/* ============================================================
   CINEZED — SHEET: светла техническа тема
   ------------------------------------------------------------
   Друг свят от началната страница: бяло, ъгли без заобляне,
   технически шрифтове.

   НЕ Е таблица в Excel. Подредбата е на подравнени колони с
   тънки линии — толкова, колкото окото да хване реда, и нито
   линия повече.

   Работи само където <body> носи class="sheet".
   ============================================================ */

body.sheet{
  --bg:#f2f3f5;
  --surface:#ffffff;
  --surface-2:#eceef1;
  --surface-3:#e3e6ea;
  --line:#d5d8dd;
  --line-2:#e6e8ec;

  --text:#0f1115;
  --text-2:#4d535c;
  --text-3:#868c96;

  --red:#0f1115;
  --red-soft:#2a2d36;
  --red-deep:#000000;
  --red-wash:rgba(15,17,21,.05);
  --red-line:rgba(15,17,21,.28);

  /* --- НИКАКВИ ЗАОБЛЕНИ РЪБОВЕ --- */
  --r-xs:0; --r-sm:0; --r:0; --r-lg:0; --r-xl:0; --r-pill:0;

  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
}

body.sheet *,
body.sheet *::before,
body.sheet *::after{border-radius:0 !important}

body.sheet > *{position:relative;z-index:1}

/* ============================================================
   ФОНЪТ, КОЙТО КУРСОРЪТ ОТКРИВА
   Под страницата стои чиста техническа шарка. Вижда се само в
   кръга около курсора — колкото да усетиш, че под листа има
   плот, без да пречи на четенето.
   ============================================================ */

.reveal-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .55s var(--ease);
  background:
    repeating-linear-gradient(45deg,rgba(15,17,21,.055) 0 1px,transparent 1px 13px),
    repeating-linear-gradient(0deg,rgba(15,17,21,.05) 0 1px,transparent 1px 52px),
    repeating-linear-gradient(90deg,rgba(15,17,21,.05) 0 1px,transparent 1px 52px);
  -webkit-mask-image:radial-gradient(circle var(--r,270px) at var(--mx,-999px) var(--my,-999px),
    #000 0%,rgba(0,0,0,.55) 46%,transparent 78%);
          mask-image:radial-gradient(circle var(--r,270px) at var(--mx,-999px) var(--my,-999px),
    #000 0%,rgba(0,0,0,.55) 46%,transparent 78%);
}
.reveal-bg.on{opacity:1}

/* ============================================================
   ХЕДЪР И ФУТЪР
   ============================================================ */

/* Прозрачен. Само лек градиент отгоре, за да не се слива с
   текста, докато страницата минава под него. */
body.sheet .hdr{
  background:linear-gradient(180deg,rgba(242,243,245,.94) 0%,rgba(242,243,245,0) 100%);
  border-bottom:none;
}
body.sheet #site-header{z-index:600}
body.sheet .burger i{background:var(--text)}
body.sheet .cart-btn{color:var(--text-2)}
body.sheet .cart-btn:hover{background:var(--surface-3);color:var(--text)}
/* Броячът е гола цифра и тук — без кръгче, в цвета на бутона.
   Виж .cart-count в css/style.css. */
body.sheet .cart-count{background:none;color:inherit}

body.sheet .navlay{background:var(--surface)}
body.sheet .navlay li{border-top-color:var(--line)}
body.sheet .navlay li:last-child{border-bottom-color:var(--line)}
body.sheet .navlay a{font-family:var(--tech);font-weight:500;color:var(--text-3)}
body.sheet .navlay a:hover{color:var(--text);background:var(--surface-2)}
body.sheet .navlay a em{font-family:var(--term)}
body.sheet .navlay a:hover em{color:var(--red)}

body.sheet .ftr{border-top:1px solid var(--line);background:var(--surface);margin-top:0}
/* Футърът е ЧЕРЕН на всички страници (css/mono.css), а логото е бяло.
   Тук беше invert(1) от времето на светлата тема — логото излизаше
   черно върху черно и не се виждаше (намерено 11.10.2026). */
body.sheet .ftr-mark .logo-mark{filter:none}
body.sheet .ftr-tag,
body.sheet .ftr-col h4{font-family:var(--term);color:var(--text-3)}
body.sheet .ftr-col a,
body.sheet .ftr-col p{color:var(--text-2)}
body.sheet .ftr-col a:hover{color:var(--red)}
body.sheet .ftr-col .fine{font-family:var(--term);font-size:11px;color:var(--text-3);margin-top:8px}
body.sheet .ftr-bot{border-top-color:var(--line);color:var(--text-3)}

/* ============================================================
   БУТОНИ — прави, с ръб и плътна сянка
   ============================================================ */

body.sheet .btn,
body.sheet button:not(.burger):not(.cdel):not(.vbtn){
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--text);
  box-shadow:3px 3px 0 0 rgba(15,17,21,.14);
  font-family:var(--term);font-size:11px;letter-spacing:.16em;
  padding:13px 22px;min-height:44px;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .2s,color .2s;
}
body.sheet .btn::before,
body.sheet button:not(.burger):not(.cdel):not(.vbtn)::before,
body.sheet .btn::after,
body.sheet button:not(.burger):not(.cdel):not(.vbtn)::after{display:none}
body.sheet .btn:hover,
body.sheet button:not(.burger):not(.cdel):not(.vbtn):hover{
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 0 rgba(15,17,21,.18);
  background:var(--text);color:var(--surface);
}
body.sheet .btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 0 rgba(15,17,21,.2)}
body.sheet .btn.red{
  background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:3px 3px 0 0 rgba(15,17,21,.22);
}
body.sheet .btn.red:hover{background:#3b3b3b;border-color:#3b3b3b;color:#fff}
body.sheet .lm-layer{display:none}
body.sheet .lm-ripple{background:radial-gradient(circle,rgba(15,17,21,.14),transparent 70%)}

/* --- бутон с течен метал по ръба ---
   Металът е част от езика на сайта, затова се среща и тук —
   но само по главното действие, не навсякъде. */
body.sheet .btn.metal{border-color:transparent;background:var(--surface)}
body.sheet .btn.metal::before{
  display:block;content:"";position:absolute;inset:0;
  padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--rim-a),
    #9a9daa 0deg,#3a3d47 40deg,#0f1115 70deg,#7f828f 105deg,
    #d6d9e2 145deg,#4a4d58 200deg,#12141a 250deg,#8b8e9b 300deg,#9a9daa 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:rimTurn 8s linear infinite;
}

/* ============================================================
   ТЕЧЕН МЕТАЛ ВЪРХУ БЯЛО
   На тъмно металът е светъл; на бяло трябва да е тъмен, иначе
   изчезва. Същото движение, обърнати стойности.
   ============================================================ */

.metal-ink{
  background:linear-gradient(100deg,
    #6b6e79 0%, #14161c 15%, #4a4d58 26%, #9aa0ad 38%,
    #0f1115 52%, #5c606c 66%, #2a2d36 80%, #7d818e 100%);
  background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:metalShift 10s linear infinite;
}
.metal-rule{
  height:2px;
  background:linear-gradient(90deg,#8b8e9b,#12141a,#6b6e79,#0f1115,#9aa0ad,#2a2d36);
  background-size:230% 100%;
  animation:metalShift 8s linear infinite;
}

/* ============================================================
   ЗАГЛАВНА ЧАСТ
   ============================================================ */

.sheet-top{padding:calc(var(--bar-h) + clamp(34px,7vh,80px)) 0 clamp(20px,3vw,34px)}

.sheet-crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--term);font-size:11px;letter-spacing:.2em;
  color:var(--text-3);text-transform:uppercase;
  margin-bottom:clamp(22px,4vw,40px);
}
.sheet-crumb a{transition:color .2s}
.sheet-crumb a:hover{color:var(--red)}

.sheet-title{
  display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,60px);
  align-items:end;padding-bottom:clamp(16px,2.4vw,26px);
}
.sheet-title h1{
  font-family:var(--tech);font-weight:600;
  font-size:clamp(38px,8vw,108px);line-height:.92;letter-spacing:-.015em;
  text-transform:uppercase;
}
.sheet-title .sub{
  font-family:var(--term);font-size:11px;letter-spacing:.2em;
  color:var(--text-3);text-transform:uppercase;text-align:right;line-height:2;
}
.sheet-lede{
  max-width:62ch;margin-top:clamp(22px,3vw,34px);
  font-size:clamp(15px,1.7vw,18px);line-height:1.62;color:var(--text-2);
}
.sheet-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,3.4vw,38px)}

/* ============================================================
   СПИСЪКЪТ
   Подравнени колони и тънки линии. Всеки ред расте леко под
   курсора и номерът му светва — толкова.
   ============================================================ */

.slist{border-top:1px solid var(--text);margin:clamp(26px,4vw,46px) 0}

.srow{
  display:grid;
  grid-template-columns:66px minmax(0,1fr) minmax(0,1.5fr) auto;
  gap:clamp(14px,2.6vw,40px);
  align-items:baseline;
  padding:clamp(20px,2.8vw,34px) clamp(4px,1vw,14px);
  border-bottom:1px solid var(--line);
  transform-origin:left center;
  transition:transform .32s var(--ease),background .28s var(--ease),padding .32s var(--ease);
}
.srow:hover{
  transform:scale(1.014);
  background:var(--surface);
  padding-left:clamp(12px,2vw,26px);
}

.srow .n{
  font-family:var(--term);font-size:12px;letter-spacing:.14em;
  color:var(--text-3);transition:color .28s;
}
.srow:hover .n{color:var(--text)}

.srow .k{
  font-family:var(--tech);font-weight:600;
  font-size:clamp(20px,3vw,34px);line-height:1.04;letter-spacing:-.005em;
  text-transform:uppercase;
  transition:transform .32s var(--ease);
}
.srow:hover .k{transform:translateX(4px)}

.srow .v{color:var(--text-2);font-size:clamp(14px,1.55vw,16px);line-height:1.6}
.srow .p{
  font-family:var(--term);font-size:12px;letter-spacing:.14em;
  color:var(--red);text-transform:uppercase;white-space:nowrap;
}

/* редовете влизат един по един */
.slist .srow{opacity:0;transform:translateY(16px)}
.slist.in .srow{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .6s var(--ease)}
.slist.in .srow:hover{transform:scale(1.014)}

@media (max-width:900px){
  .srow{grid-template-columns:46px 1fr;row-gap:8px}
  .srow .k,.srow .v,.srow .p{grid-column:2/3}
  .srow:hover{transform:none}
}

/* ============================================================
   РЕДОВЕ, КОИТО ВОДЯТ НАНЯКЪДЕ (архивът)
   Прилича на таблица, но е списък: няма клетки, само подравнени
   колони и линия между редовете.
   ============================================================ */

.rows{border-top:1px solid var(--text);margin:clamp(24px,3.6vw,42px) 0}

.rows-head,
.rrow{
  display:grid;
  grid-template-columns:56px minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.15fr) 130px;
  gap:clamp(12px,2vw,28px);
  align-items:center;
  padding:clamp(15px,1.9vw,22px) clamp(4px,1vw,14px);
}
.rows-head{
  padding-top:0;padding-bottom:13px;
  border-bottom:1px solid var(--line);
  font-family:var(--term);font-size:10px;letter-spacing:.2em;
  color:var(--text-3);text-transform:uppercase;
}
.rrow{
  border-bottom:1px solid var(--line);
  transform-origin:left center;
  transition:transform .3s var(--ease),background .26s var(--ease),padding .3s var(--ease);
}
a.rrow:hover{
  transform:scale(1.012);
  background:var(--surface);
  padding-left:clamp(12px,2vw,24px);
}
.rrow .n{font-family:var(--term);font-size:12px;color:var(--text-3)}
.rrow .k{
  font-family:var(--tech);font-weight:600;
  font-size:clamp(18px,2.3vw,26px);letter-spacing:.005em;text-transform:uppercase;
  transition:color .26s;
}
a.rrow:hover .k{color:var(--red)}
.rrow .loc{font-size:14px;color:var(--text-2)}
/* серията е отделно поле — виждаш от коя серия е състезанието */
.rrow .ser{
  font-family:var(--term);font-size:10.5px;letter-spacing:.14em;
  color:var(--text-2);text-transform:uppercase;
}
.rrow .st{
  font-family:var(--term);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;text-align:right;
}
.rrow.is-live .st{color:var(--red)}
.rrow.is-soon{opacity:.5}
.rrow.is-soon .st{color:var(--text-3)}
.rrow.is-soon:hover{transform:none;background:transparent}
a.rrow .st::after{content:" \2192";opacity:0;transition:opacity .2s}
a.rrow:hover .st::after{opacity:1}

.rows .rrow{opacity:0;transform:translateY(14px)}
.rows.in .rrow{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .55s var(--ease)}
.rows.in a.rrow:hover{transform:scale(1.012)}

@media (max-width:900px){
  .rows-head{display:none}
  .rrow{grid-template-columns:44px 1fr auto;row-gap:6px}
  .rrow .k{grid-column:2/4}
  .rrow .loc{grid-column:2/3}
  .rrow .ser{grid-column:2/4}
  .rrow .st{grid-column:3/4;grid-row:2}
  a.rrow:hover{transform:none}
}

/* ============================================================
   ЧЕТЦИ С ЧИСЛА — стоят САМО на една страница
   Ако ги има навсякъде, спират да значат каквото и да е.
   ============================================================ */

.rdos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border-top:1px solid var(--text);
  margin:clamp(26px,4vw,46px) 0;
}
.rdo{
  position:relative;
  padding:clamp(18px,2.2vw,26px) clamp(14px,1.8vw,22px);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .8s var(--ease),background .26s;
}
.rdo:last-child{border-right:none}
.rdo.in{opacity:1;transform:none}
.rdo:hover{background:var(--surface)}
.rdo::before,.rdo::after{
  content:"";position:absolute;width:9px;height:9px;
  border:1px solid var(--text);opacity:.4;
}
.rdo::before{top:9px;left:9px;border-right:none;border-bottom:none}
.rdo::after{bottom:9px;right:9px;border-left:none;border-top:none}

.rdo-k{
  display:flex;align-items:center;gap:7px;
  font-family:var(--term);font-size:9px;letter-spacing:.2em;
  color:var(--text-3);text-transform:uppercase;margin-bottom:12px;
}
.rdo-k .ix{color:var(--text)}
.rdo-k .dot{
  width:5px;height:5px;flex:none;margin-left:auto;background:var(--red);
  animation:sheetDot 2.6s var(--ease) infinite;
}
@keyframes sheetDot{0%,100%{opacity:.35}50%{opacity:1}}

.rdo-v{
  font-family:var(--tech);font-weight:600;
  font-size:clamp(26px,3.6vw,44px);line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.rdo-seg{
  display:block;height:6px;margin-top:13px;
  background:repeating-linear-gradient(90deg,rgba(15,17,21,.13) 0 2px,transparent 2px 5px);
}
.rdo-seg i{
  display:block;height:100%;width:0;
  background:repeating-linear-gradient(90deg,var(--text) 0 2px,transparent 2px 5px);
  transition:width 1.6s var(--ease) .15s;
}
.rdo.in .rdo-seg i{width:var(--to,100%)}

/* ============================================================
   ТЕКСТ
   ============================================================ */

.note{
  max-width:70ch;
  padding:clamp(16px,2.2vw,24px) 0 clamp(16px,2.2vw,24px) clamp(18px,2.6vw,30px);
  border-left:2px solid var(--text);
  margin:clamp(26px,3.6vw,44px) 0;
}
.note h2{
  font-family:var(--tech);font-weight:600;
  font-size:clamp(19px,2.4vw,28px);letter-spacing:.005em;text-transform:uppercase;
  margin-bottom:14px;
}
.note p{color:var(--text-2);font-size:clamp(15px,1.6vw,17px);line-height:1.65}
.note p + p{margin-top:14px}
.note strong{color:var(--text);font-weight:600}
.note a{text-decoration:underline;text-underline-offset:3px}
.note a:hover{color:var(--red)}

.sec-label{
  display:flex;align-items:center;gap:12px;
  font-family:var(--term);font-size:11px;letter-spacing:.24em;
  color:var(--text-3);text-transform:uppercase;
  margin:clamp(48px,7vw,96px) 0 clamp(12px,1.8vw,20px);
}
.sec-label::after{content:"";flex:1;height:1px;background:var(--line)}
.sec-label b{font-weight:400;color:var(--text)}

/* ============================================================
   СЦЕНАТА С КАМЕРАТА (само на една страница)
   ============================================================ */

.sheet-scene{
  position:relative;
  display:grid;grid-template-columns:1fr minmax(280px,.85fr);
  gap:clamp(24px,5vw,70px);align-items:center;
  margin:clamp(26px,4vw,50px) 0;
  padding:clamp(24px,3.4vw,44px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sheet-scene .scene{max-width:420px;aspect-ratio:1/1}
.sheet-scene .scene::before{display:none}
.sheet-scene .scene-tag{
  font-family:var(--term);font-size:9px;letter-spacing:.2em;color:var(--text-3);
}
@media (max-width:900px){
  .sheet-scene{grid-template-columns:1fr}
  .sheet-scene .scene{max-width:300px}
}

/* ============================================================
   ВРЪЗКИ КЪМ ПРОФИЛИТЕ (контактът е тук, отделна страница няма)
   ============================================================ */

.links{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border-top:1px solid var(--text);
  margin:clamp(24px,3.6vw,44px) 0;
}
.links a{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:clamp(20px,2.6vw,30px) clamp(14px,1.8vw,22px);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transform-origin:center;
  transition:transform .3s var(--ease),background .26s var(--ease);
}
.links a:last-child{border-right:none}
.links a:hover{transform:scale(1.03);background:var(--surface)}
.links a b{
  display:block;
  font-family:var(--tech);font-weight:600;
  font-size:clamp(17px,2.2vw,24px);letter-spacing:.005em;text-transform:uppercase;
}
.links a span{
  display:block;margin-top:6px;
  font-family:var(--term);font-size:11px;letter-spacing:.12em;color:var(--text-3);
}
.links a i{
  font-style:normal;font-family:var(--term);font-size:15px;color:var(--text-3);
  transition:transform .3s var(--ease),color .26s;
}
.links a:hover i{transform:translate(4px,-4px);color:var(--red)}

.sheet-foot{
  padding:clamp(40px,6vw,80px) 0 clamp(50px,8vw,100px);
  border-top:1px solid var(--line);
  margin-top:clamp(40px,6vw,80px);
}

@media (prefers-reduced-motion:reduce){
  .slist .srow,.rows .rrow,.rdo{opacity:1 !important;transform:none !important}
  .rdo .rdo-seg i{transition:none;width:var(--to,100%)}
  .rdo-k .dot,.metal-ink,.metal-rule,body.sheet .btn.metal::before{animation:none}
  .reveal-bg{display:none}
}