/* ============================================================
   CINEZED — FX слой
   ------------------------------------------------------------
   Всичко ново е тук: 3D сцени, реакция на курсора, анимации при
   скрол, кръглата въртележка с Reels и статистиките около нея.
   Държим го отделно от style.css, за да е лесно за поддръжка.
   Зависи от променливите в style.css (--red, --line, --ease...).
   ============================================================ */

/* ============================================================
   1. РАЗКРИВАНЕ ПРИ СКРОЛ
   .rv си остава от преди. Тук добавяме посоки и стъпаловидно
   закъснение, за да не влиза всичко наведнъж.
   ============================================================ */

[data-rv]{
  opacity:0;
  transform:translate3d(var(--rv-x,0),var(--rv-y,28px),0) scale(var(--rv-s,1));
  transition:
    opacity .9s var(--ease) var(--rv-d,0ms),
    transform 1s var(--ease) var(--rv-d,0ms),
    filter .9s var(--ease) var(--rv-d,0ms);
  filter:blur(var(--rv-b,0px));
  will-change:opacity,transform;
}
[data-rv].in{opacity:1;transform:none;filter:none}

[data-rv="left"]{--rv-x:-42px;--rv-y:0}
[data-rv="right"]{--rv-x:42px;--rv-y:0}
[data-rv="zoom"]{--rv-y:0;--rv-s:.94}
[data-rv="blur"]{--rv-y:16px;--rv-b:14px}

/* редове, които влизат един след друг */
[data-rv-stagger] > *{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .8s var(--ease),transform .9s var(--ease);
}
[data-rv-stagger].in > *{opacity:1;transform:none}

/* думи на заглавие, които се вдигат една по една */
.split-line{display:block;overflow:hidden}
/* Вдигат се с малко, не с цяла височина: при голямо заглавие
   пълното изместване пада върху абзаца отдолу, докато трае
   анимацията, и двете се четат едно върху друго. */
.split-word{
  display:inline-block;
  transform:translateY(.34em);
  opacity:0;
  filter:blur(6px);
  transition:transform .9s var(--ease),opacity .7s var(--ease),filter .7s var(--ease);
  transition-delay:var(--wd,0ms);
}
.in .split-word{filter:none}
.in .split-word{transform:none;opacity:1}

/* ============================================================
   2. КУРСОР
   Слоят след курсора е махнат. Свети само 3D графиката под
   мишката — виж js/tech3d.js.
   ============================================================ */

/* магнитни бутони — леко се навеждат към курсора */
.mag{transition:transform .45s var(--spring)}

/* ============================================================
   3. НАКЛОН ПО КУРСОРА (3D карти)
   ============================================================ */

.tilt{
  transform-style:preserve-3d;
  transform:perspective(900px)
            rotateX(var(--tx,0deg))
            rotateY(var(--ty,0deg));
  transition:transform .5s var(--ease);
  will-change:transform;
}
.tilt.live{transition:transform .12s linear}

/* блик, който минава по картата спрямо курсора */
.tilt-sheen{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.10),transparent 62%);
}
.tilt:hover .tilt-sheen{opacity:1}

/* ============================================================
   4. 3D СЦЕНА (canvas)
   ============================================================ */

.scene{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-width:520px;
  margin-inline:auto;
}
.scene canvas{
  display:block;width:100%;height:100%;
  /* курсорът минава през сцената — тя не бива да пречи на текста */
  pointer-events:none;
}
/* мека светлина зад обекта, за да не виси в празното */
.scene::before{
  content:"";position:absolute;inset:8%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.055),transparent 66%);
  pointer-events:none;
}
.scene .scene-tag{
  position:absolute;left:0;bottom:0;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  color:var(--text-3);text-transform:uppercase;
  pointer-events:none;
}

/* заглавие + сцена една до друга */
.headscene{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,5vw,72px);align-items:center;
}
.headscene .scene{max-width:440px}
/* В двуколонния вид заглавието има по-малко място — иначе
   "Имаш идея? Нека я заснемем." се разбива на четири реда. */
.pagehead.has-scene h1{font-size:clamp(32px,5.4vw,74px)}
@media (max-width:900px){
  .headscene{grid-template-columns:1fr}
  .headscene .scene{max-width:320px}
}

/* по-широка, ниска сцена (пътека, лента) */
.scene.wide{aspect-ratio:16/10;max-width:none}
.scene.wide::before{inset:14% 8%}

/* ============================================================
   5. CSS 3D — листове един зад друг (идея → резултат)
   ============================================================ */

.deck{
  perspective:1100px;
  height:clamp(230px,30vw,340px);
  display:flex;align-items:center;justify-content:center;
}
.deck-stage{
  position:relative;width:min(320px,78%);aspect-ratio:16/10;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,12deg)) rotateY(var(--ry,-20deg));
  transition:transform .5s var(--ease);
}
.deck-plane{
  position:absolute;inset:0;
  border:1px solid rgba(255,255,255,.20);
  border-radius:var(--r-sm);
  background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.012));
  /* лек вертикален отстъп на всеки лист: иначе надписите на
     четирите листа падат един върху друг и не се четат */
  transform:translate3d(0,var(--y,0px),var(--z,0px));
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:10px 12px;
  backface-visibility:hidden;
}
.deck-plane b{
  font-family:var(--mono);font-size:8px;letter-spacing:.2em;font-weight:400;
  color:var(--text-3);text-transform:uppercase;
}
.deck-plane i{
  font-family:var(--mono);font-size:8px;font-style:normal;letter-spacing:.16em;
  color:var(--text-3);
}
.deck-plane:last-child{
  background:linear-gradient(150deg,rgba(255,255,255,.15),rgba(255,255,255,.03));
  border-color:rgba(255,255,255,.44);
}
.deck-plane:last-child b{color:var(--text)}

/* ============================================================
   6. СКРОЛ ИНДИКАТОРИ
   ============================================================ */

/* тънка линия отгоре: докъде си стигнал в страницата */
.scrollbar-top{
  position:fixed;left:0;top:0;height:2px;z-index:700;
  width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--red-deep),var(--red),#fff);
  pointer-events:none;
}

/* стрелката „скролни“ под героя */
.scroll-cue{
  display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  color:rgba(255,255,255,.62);text-transform:uppercase;
}
.scroll-cue .rail{
  position:relative;width:1px;height:52px;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.02));
  overflow:hidden;
}
.scroll-cue .rail::after{
  content:"";position:absolute;left:0;top:-40%;
  width:100%;height:40%;
  background:linear-gradient(180deg,transparent,#fff);
  animation:cueRun 2.1s var(--ease) infinite;
}
@keyframes cueRun{
  0%{top:-40%;opacity:0}
  22%{opacity:1}
  100%{top:100%;opacity:0}
}

/* числа, които се качват */
.count{font-variant-numeric:tabular-nums}

/* ============================================================
   7. REELS — кръгла въртележка, задвижена от скрола
   Картите стоят по стените на цилиндър. Скролът върти
   цилиндъра, а числата отстрани се качват заедно с него.
   ============================================================ */

/* Височината на секцията решава КОЛКО СКРОЛ отива за една
   обиколка. Повече височина = по-бавно и по-спокойно въртене. */
.reels{position:relative;height:440vh;border-top:1px solid var(--line)}
.reels-sticky{
  position:sticky;top:0;height:100svh;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}

/* заглавието стои горе вляво и не мърда */
.reels-head{
  position:absolute;left:var(--gut);top:clamp(84px,14vh,140px);z-index:4;
  max-width:min(38ch,44vw);pointer-events:none;
}
.reels-head h2{
  font-family:var(--display);font-weight:var(--w-light);
  font-size:clamp(28px,5vw,64px);line-height:1.02;letter-spacing:-.015em;
  margin-bottom:14px;
}
.reels-head p{color:var(--text-2);font-size:clamp(14px,1.6vw,17px);max-width:40ch}

.reels-stage{
  position:absolute;inset:0;
  perspective:1500px;perspective-origin:50% 50%;
}
.reels-ring{
  position:absolute;top:50%;left:50%;
  width:0;height:0;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%)
            rotateX(var(--tiltx,-4deg))
            rotateY(var(--rot,0deg));
  will-change:transform;
}

.rc{
  position:absolute;
  width:var(--cw);height:var(--ch);
  left:calc(var(--cw) / -2);
  top:calc(var(--ch) / -2);
  transform:rotateY(var(--a,0deg)) translateZ(var(--rad));
  border-radius:var(--r-lg);
  backface-visibility:hidden;
  /* JS сваля яркостта на далечните карти */
  opacity:var(--o,1);
  filter:brightness(var(--b,1)) saturate(var(--sat,1));
  transition:filter .25s linear,opacity .25s linear;
}

/* видеото пълни картата до ръба — нищо не остава празно */
.rc-media{
  position:absolute;inset:0;
  border-radius:inherit;overflow:hidden;
  background:#0b0b0d;
}
.rc-media video,
.rc-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* картите са витрина, не плейър — курсорът минава през тях */
  pointer-events:none;user-select:none;-webkit-user-select:none;
}
.rc-media .ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--text-3);text-align:center;padding:16px;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 12px,transparent 12px 24px),
    var(--surface-2);
}

/* металният ръб — същият език като бутоните */
.rc-rim{
  position:absolute;inset:0;border-radius:inherit;
  padding:1.5px;
  pointer-events:none;
  background:conic-gradient(from var(--rim-a),
    rgba(255,255,255,.06) 0deg,
    rgba(232,232,240,.85) 42deg,
    rgba(242,244,250,.95) 68deg,
    rgba(255,255,255,.30) 96deg,
    rgba(120,120,132,.14) 150deg,
    rgba(255,255,255,.70) 214deg,
    rgba(198,200,214,.42) 262deg,
    rgba(90,90,100,.10) 310deg,
    rgba(255,255,255,.06) 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;
}
/* Металът се върти САМО по картите, обърнати към нас. Осем
   въртящи се conic-градиента с маска наведнъж карат видеокартата
   да рисува непрекъснато без никой да го вижда. */
.rc.front .rc-rim{animation:rimTurn 9s linear infinite}

/* лек градиент долу, за да се чете надписът върху видеото */
.rc-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 14px 12px;
  border-radius:inherit;
  background:linear-gradient(to top,rgba(0,0,0,.78),transparent);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  pointer-events:none;
}
.rc-cap b{
  font-family:var(--list);font-weight:400;
  font-size:15px;letter-spacing:.04em;text-transform:uppercase;
}
.rc-cap span{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.72);
}

/* картата отпред получава лек ореол */
.rc.front .rc-media{box-shadow:0 40px 90px -40px rgba(0,0,0,1)}

/* --- статистиките: технически четци, не етикетчета ---
   Ъглови резки, сегментна скала и моноширинен надпис — езикът на
   апаратура, не на инфографика. Металът замества червеното. */
.reels-stats{position:absolute;inset:0;pointer-events:none;z-index:3}

.stat-chip{
  position:absolute;
  min-width:clamp(160px,15.5vw,212px);
  padding:13px 15px 12px;
  border-radius:3px;
  background:linear-gradient(180deg,rgba(11,11,15,.78),rgba(11,11,15,.44));
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 70px -46px rgba(0,0,0,1);
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .8s var(--ease);
}
.stat-chip.on{opacity:1;transform:none}

/* ъгловите резки */
.stat-chip::before,
.stat-chip::after{
  content:"";position:absolute;width:9px;height:9px;
  border:1px solid rgba(232,236,248,.5);
}
.stat-chip::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.stat-chip::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

/* горният ред: индекс, етикет и живата точка */
.stat-chip .k{
  display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:8px;letter-spacing:.2em;
  color:var(--text-3);text-transform:uppercase;
  margin-bottom:9px;
}
.stat-chip .k .ix{color:rgba(232,236,248,.75)}
.stat-chip .k .dot{
  width:4px;height:4px;border-radius:50%;flex:none;margin-left:auto;
  background:rgba(232,236,248,.85);
  box-shadow:0 0 0 0 rgba(232,236,248,.5);
  animation:techDot 2.6s var(--ease) infinite;
}
@keyframes techDot{
  0%{box-shadow:0 0 0 0 rgba(232,236,248,.45)}
  70%{box-shadow:0 0 0 6px rgba(232,236,248,0)}
  100%{box-shadow:0 0 0 0 rgba(232,236,248,0)}
}

.stat-chip .v{
  display:block;
  font-family:var(--mono);font-weight:500;
  font-size:clamp(21px,2.9vw,34px);line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}

/* сегментна скала — стъпаловидна, както на апарат */
.stat-chip .seg{
  display:block;height:6px;margin-top:11px;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.13) 0 2px, transparent 2px 5px);
}
.stat-chip .seg i{
  display:block;height:100%;width:var(--fill,0%);
  background:repeating-linear-gradient(90deg,
    #e9edf9 0 2px, transparent 2px 5px);
  transition:width .2s linear;
}

.stat-chip.p1{left:var(--gut);bottom:clamp(80px,14vh,140px)}
.stat-chip.p2{right:var(--gut);top:clamp(96px,18vh,180px)}
.stat-chip.p3{right:var(--gut);bottom:clamp(80px,14vh,140px)}

/* напредъкът на въртенето */
.reels-progress{
  position:absolute;left:50%;bottom:clamp(24px,4vh,44px);transform:translateX(-50%);
  z-index:4;width:min(220px,40vw);height:1px;background:var(--line);
}
.reels-progress i{display:block;height:100%;width:var(--p,0%);background:var(--text)}

@media (max-width:900px){
  .reels-head{max-width:none;right:var(--gut);top:clamp(72px,11vh,110px)}
  .reels-head p{display:none}
  .stat-chip{padding:11px 13px;min-width:0}
  .stat-chip.p1{left:var(--gut);bottom:clamp(56px,10vh,90px)}
  .stat-chip.p2{right:var(--gut);top:auto;bottom:clamp(56px,10vh,90px)}
  .stat-chip.p3{display:none}
}

/* Телефон: кръгът ОСТАВА кръг, но не чака скрол — върти се сам.
   Секцията става нормално висока (без 440vh sticky), защото на
   телефон никой не скролва четири екрана заради една витрина. */
@media (max-width:640px){
  .reels{height:auto;padding:clamp(54px,11vw,90px) 0}
  .reels-sticky{position:static;height:auto;display:block;overflow:visible}
  .reels-head{position:static;max-width:none;padding:0 var(--gut);margin-bottom:18px}
  .reels-stage{
    position:relative;inset:auto;
    height:min(92vw,430px);
    perspective:820px;
  }
  .reels-stats{
    position:static;display:flex;gap:10px;flex-wrap:wrap;
    padding:26px var(--gut) 0;
  }
  .stat-chip{position:static;flex:1 1 140px;min-width:0}
  .stat-chip.p3{display:block}
  /* дългите етикети минават на нов ред, вместо да се блъскат
     с живата точка вдясно */
  .stat-chip .k{flex-wrap:wrap;row-gap:3px}
  .reels-progress{display:none}
  .vmeter{display:none}
}

/* (Тук стояха контролите на плейъра. Махнати са: прегледите
   вървят на цикъл и посетителят не ги пипа.) */

/* ============================================================
   9. ЗАГЛАВНА ЧАСТ НА ВЪТРЕШНИТЕ СТРАНИЦИ
   ============================================================ */

.pagehead.has-scene{position:relative}
/* меко петно, което следва курсора в заглавната част */
.spot{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(460px circle at var(--sx,50%) var(--sy,50%),
    rgba(255,255,255,.05),transparent 66%);
}
.pagehead.has-scene:hover .spot,
.headscene:hover .spot{opacity:1}
.pagehead.has-scene > *{position:relative;z-index:1}

/* редът с цифрата отстрани на секциите */
.secnum{
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  color:var(--text-3);text-transform:uppercase;
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.secnum::before{content:"";width:22px;height:1px;background:var(--line)}

/* паралакс: елементът се движи малко по-бавно от страницата */
[data-parallax]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  [data-rv],[data-rv-stagger] > *,.split-word{opacity:1!important;transform:none!important;filter:none!important}
  .scroll-cue .rail::after{animation:none}
  .rc-rim{animation:none}
  .reels{height:auto;padding:clamp(60px,12vw,100px) 0}
  .reels-sticky{position:static;height:auto;display:block;overflow:visible}
  .reels-head{position:static;max-width:none;padding:0 var(--gut);margin-bottom:26px}
  .reels-stage{position:static;perspective:none}
  .reels-ring{position:static;width:auto;height:auto;transform:none;display:flex;gap:14px;overflow-x:auto;padding:4px var(--gut) 18px}
  .rc{position:relative;left:auto;top:auto;transform:none!important;flex:0 0 min(240px,66vw);width:auto;height:auto;aspect-ratio:9/16;opacity:1!important;filter:none!important}
  .reels-stats{position:static;display:flex;gap:10px;flex-wrap:wrap;padding:18px var(--gut) 0}
  .stat-chip{position:static;flex:1 1 150px;opacity:1;transform:none}
  .reels-progress{display:none}
}

/* ============================================================
   10. ТЕЧЕН МЕТАЛ — фон на цяла секция
   Рисува се от js/metal.js. Тук е само рамката и винетката,
   която пази текста четим върху него.
   ============================================================ */

.metal-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
  background:#0a0a0d;
}
.metal-bg canvas{
  display:block;width:100%;height:100%;
  filter:contrast(1.07) saturate(.82);
}
/* Металът е красив, но текстът е по-важен. Затова отляво пада
   плътна сянка, а по краищата — винетка. Така фонът остава
   фон, а не съперник на съдържанието. */
.metal-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(8,8,11,.92) 0%,rgba(8,8,11,.66) 34%,rgba(8,8,11,.10) 62%,transparent 82%),
    radial-gradient(130% 100% at 62% 45%,transparent 0%,rgba(8,8,11,.45) 66%,rgba(8,8,11,.88) 100%);
}
.metal-bg.flip::after{
  background:
    linear-gradient(270deg,rgba(8,8,11,.92) 0%,rgba(8,8,11,.66) 34%,rgba(8,8,11,.10) 62%,transparent 82%),
    radial-gradient(130% 100% at 38% 45%,transparent 0%,rgba(8,8,11,.45) 66%,rgba(8,8,11,.88) 100%);
}
/* докато canvas-ът се смята, отдолу стои спокоен градиент */
.metal-bg:not(.is-live){
  background:
    radial-gradient(80% 70% at 62% 40%,#22232b 0%,#101014 55%,#0a0a0d 100%);
}

/* секция, която носи фон под себе си */
.stage{position:relative;isolation:isolate;overflow:hidden}
.stage > *:not(.metal-bg){position:relative;z-index:1}

/* ============================================================
   11. СТЪКЛЕНИ ПАНЕЛИ
   Текстът стои на стъкло, за да се отдели от метала отдолу.
   ============================================================ */

.glass{
  position:relative;
  border-radius:var(--r-lg);
  padding:clamp(22px,3.2vw,44px);
  background:linear-gradient(160deg,rgba(16,16,21,.62),rgba(10,10,13,.44));
  backdrop-filter:blur(26px) saturate(1.35);
  -webkit-backdrop-filter:blur(26px) saturate(1.35);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 50px 110px -60px rgba(0,0,0,1),
    inset 0 1px 0 rgba(255,255,255,.08);
}
/* тънък метален кант, същият език като бутоните */
.glass::before{
  content:"";position:absolute;inset:0;
  border-radius:inherit;padding:1px;
  pointer-events:none;opacity:.55;
  background:conic-gradient(from var(--rim-a),
    rgba(255,255,255,.04) 0deg,
    rgba(232,232,240,.55) 46deg,
    rgba(242,244,250,.62) 72deg,
    rgba(255,255,255,.16) 104deg,
    rgba(120,120,132,.08) 156deg,
    rgba(255,255,255,.42) 216deg,
    rgba(198,200,214,.26) 268deg,
    rgba(90,90,100,.06) 314deg,
    rgba(255,255,255,.04) 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 14s linear infinite;
}
.glass > *{position:relative}

.glass.tight{padding:clamp(18px,2.4vw,30px)}
.glass h1,.glass h2,.glass h3{margin-bottom:14px}
.glass p{color:var(--text-2)}
.glass p + p{margin-top:16px}

/* ============================================================
   12. МЕТАЛЕН ТЕКСТ И ЛИНИИ
   Заместват червеното там, където то е било само украса.
   Червеното остава само където носи смисъл (статус на архива,
   броячът на количката).
   ============================================================ */

@keyframes metalShift{to{background-position:220% 0}}

.metal-text{
  background:linear-gradient(100deg,
    #6e7080 0%, #d6d8e4 16%, #fff8e6 27%, #8e909e 42%,
    #eceef8 58%, #6a6c7a 72%, #dfe1ec 86%, #7a7c8a 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:metalShift 11s linear infinite;
}

.metal-line{
  background:linear-gradient(90deg,#4a4c58,#d6d8e4,#f3f3f3,#8a8c99,#eceef8,#5a5c68);
  background-size:220% 100%;
  animation:metalShift 9s linear infinite;
}

/* лентата за скрол отгоре вече е метал, не червено */
.scrollbar-top{
  background:linear-gradient(90deg,#4a4c58,#d6d8e4,#f3f3f3,#8a8c99,#eceef8,#5a5c68);
  background-size:220% 100%;
  animation:metalShift 9s linear infinite;
}

/* ============================================================
   13. КОПЧЕТО ЗА ПУСКАНЕ ВЪРХУ ПРЕГЛЕДА
   Стои, докато клипът е спрян. Изчезва, щом тръгне.
   ============================================================ */

.playpad{
  position:absolute;top:50%;left:50%;z-index:4;
  width:clamp(52px,26%,72px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  border:none;background:none;color:#fff;cursor:pointer;
  transition:opacity .35s var(--ease),transform .45s var(--spring);
  -webkit-tap-highlight-color:transparent;
}
.playpad .pp-disc{
  position:absolute;inset:0;border-radius:50%;
  background:rgba(10,10,13,.42);
  backdrop-filter:blur(10px) saturate(1.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
}
/* метален кант, който бавно се върти */
.playpad .pp-disc::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  padding:1px;
  background:conic-gradient(from var(--rim-a),
    rgba(255,255,255,.08) 0deg,
    rgba(232,232,240,.9) 44deg,
    rgba(242,244,250,.95) 70deg,
    rgba(255,255,255,.28) 100deg,
    rgba(120,120,132,.12) 152deg,
    rgba(255,255,255,.75) 214deg,
    rgba(198,200,214,.4) 264deg,
    rgba(90,90,100,.08) 312deg,
    rgba(255,255,255,.08) 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 7s linear infinite;
}
.playpad svg{
  position:relative;width:34%;height:34%;
  fill:currentColor;margin-left:8%;
}
.vplayer:hover .playpad{transform:translate(-50%,-50%) scale(1.06)}
.vplayer.playing .playpad{opacity:0;transform:translate(-50%,-50%) scale(.8);pointer-events:none}

/* ============================================================
   14. ТЕКСТ, КОЙТО СЕ РАЗГРЪЩА СЪС СКРОЛА
   Абзаците влизат един по един, а колоната върви малко
   по-бавно от страницата — оттам идва усещането за дълбочина.
   ============================================================ */

.readout > *{
  opacity:0;
  transform:translate3d(0,34px,0);
  filter:blur(8px);
  transition:
    opacity .9s var(--ease),
    transform 1s var(--ease),
    filter .8s var(--ease);
}
.readout > *.in{opacity:1;transform:none;filter:none}

/* линия отляво, която се дочертава заедно с текста */
.readout{position:relative;padding-left:clamp(18px,2.4vw,30px)}
.readout::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.02));
  transform:scaleY(var(--read,0));transform-origin:50% 0;
  transition:transform .6s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  .readout > *{opacity:1;transform:none;filter:none}
  .readout::before{transform:none}
  .metal-text,.metal-line,.scrollbar-top,.glass::before,.playpad .pp-disc::after{animation:none}
}

/* ============================================================
   15. СЦЕНА КАТО ФОН
   3D обектът заема цялата секция и стои встрани от текста.
   Текстът се качва върху стъкло, за да се отдели от метала.
   ============================================================ */

.scene.fill{
  position:absolute;inset:0;z-index:0;
  width:auto;max-width:none;aspect-ratio:auto;margin:0;
  pointer-events:none;
}
.scene.fill::before{display:none}
.scene.fill .scene-tag{
  left:auto;right:var(--gut);bottom:clamp(20px,4vh,40px);
  text-align:right;
}

/* заглавната сцена заема екрана */
.stage.head{
  min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--bar-h) + clamp(16px,3vh,34px)) 0 clamp(40px,7vh,80px);
}
/* по-нисък блок за секция вътре в страницата */
.stage.split{
  min-height:min(84svh,780px);
  display:flex;align-items:center;
  padding:clamp(60px,10vw,120px) 0;
  border-top:1px solid var(--line);
}

.glass.lead{max-width:min(640px,53vw)}
.glass.narrow{max-width:min(580px,48vw)}
.glass.lead .crumbs{margin-bottom:16px}
.glass.lead h1{
  font-family:var(--display);font-weight:var(--w-light);
  font-size:clamp(34px,6.4vw,88px);line-height:.98;letter-spacing:-.015em;
  text-transform:uppercase;
}
.glass.lead .lede{margin-top:20px;color:var(--text-2);font-size:clamp(15px,1.6vw,17px);max-width:46ch}
.glass .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* индикаторът за скрол долу на заглавната сцена */
.stage .cue{
  position:absolute;left:50%;bottom:clamp(18px,4vh,38px);
  transform:translateX(-50%);z-index:2;
}

@media (max-width:900px){
  .glass.lead,.glass.narrow{max-width:none}
  /* на тесен екран обектът минава зад стъклото и се смалява,
     за да не се бие с текста */
  .scene.fill{opacity:.42}
  .stage.head{min-height:auto;padding-bottom:clamp(50px,9vh,80px)}
  .stage.split{min-height:auto}
  .scene.fill .scene-tag{display:none}
}

/* листовете като фон на секция (about.html) */
.deck.fill-deck{
  position:absolute;inset:0;z-index:0;height:auto;
  pointer-events:none;
  justify-content:flex-end;
  padding-right:clamp(20px,7vw,120px);
}
.deck.fill-deck .deck-stage{width:min(460px,32vw)}
@media (max-width:900px){
  .deck.fill-deck{opacity:.35;justify-content:center;padding-right:0}
  .deck.fill-deck .deck-stage{width:min(300px,70vw)}
}

/* ============================================================
   16. TECH ФОН + СТЪКЛЕНИ ПРОЗОРЦИ, КОИТО СЕ СМЕНЯТ СЪС СКРОЛА
   ------------------------------------------------------------
   Фонът е точков 3D модел (js/tech3d.js), който се преобразува
   при всеки нов прозорец. Прозорците са течно стъкло: влизат
   отстрани, стоят, излизат нагоре.
   ============================================================ */

.tech-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
  background:
    radial-gradient(120% 90% at 68% 45%,#15161c 0%,#0c0c10 55%,#08080a 100%);
}
.tech-bg canvas{display:block;width:100%;height:100%}
/* фина техническа мрежа под точките — като милиметрова хартия */
.tech-bg::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 84px);
  -webkit-mask-image:radial-gradient(90% 80% at 60% 45%,#000 0%,transparent 78%);
          mask-image:radial-gradient(90% 80% at 60% 45%,#000 0%,transparent 78%);
}
/* сянка отляво, за да се чете стъклото върху фона */
.tech-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,11,.86) 0%,rgba(8,8,11,.44) 38%,transparent 68%);
}

/* ---------- поредицата ---------- */

.paneseq{
  position:relative;
  height:var(--seq-h,320vh);
  border-top:1px solid var(--line);
}
.paneseq-sticky{
  position:sticky;top:0;height:100svh;
  overflow:hidden;
  display:flex;align-items:center;
}
.paneseq-sticky > .wrap{position:relative;width:100%;z-index:1}

/* всички прозорци стоят на едно и също място и се редуват */
.pane{
  position:absolute;top:50%;left:var(--gut);right:var(--gut);
  max-width:min(1400px,100%);
  transform:translateY(-50%);
  pointer-events:none;
}
.pane-in{
  opacity:var(--o,0);
  transform:translate3d(var(--x,0),var(--y,0),0) scale(var(--s,1));
  filter:blur(var(--b,0px));
  will-change:transform,opacity,filter;
}
.pane.on{pointer-events:auto}

/* ---------- течно стъкло ---------- */

.pane-glass{
  position:relative;overflow:hidden;
  max-width:min(980px,84vw);
  border-radius:var(--r-lg);
  padding:clamp(24px,3.4vw,48px);
  background:linear-gradient(155deg,rgba(20,21,27,.62),rgba(10,10,14,.42));
  backdrop-filter:blur(30px) saturate(1.4);
  -webkit-backdrop-filter:blur(30px) saturate(1.4);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 60px 130px -70px rgba(0,0,0,1),
    inset 0 1px 0 rgba(255,255,255,.09);
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:clamp(20px,3vw,44px);
  align-items:center;
}
/* блик, който бавно се плъзга по стъклото — оттам „течното" */
.pane-glass::after{
  content:"";position:absolute;top:-60%;left:-30%;
  width:60%;height:220%;
  pointer-events:none;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.055) 44%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.045) 56%,
    transparent 100%);
  transform:rotate(8deg);
  animation:paneSheen 7.5s var(--ease) infinite;
}
@keyframes paneSheen{
  0%{left:-40%;opacity:0}
  18%{opacity:1}
  70%{opacity:.7}
  100%{left:120%;opacity:0}
}
.pane-glass > *{position:relative;z-index:1}

.pane-head{
  display:flex;align-items:center;gap:12px;
  font-family:var(--term);font-size:11px;letter-spacing:.22em;
  color:var(--text-3);text-transform:uppercase;
  margin-bottom:18px;
}
.pane-ix{color:rgba(232,236,248,.8)}
.pane-head .bar{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.22),transparent)}

.pane-glass h2{
  font-family:var(--tech);font-weight:500;
  font-size:clamp(24px,3.6vw,46px);line-height:1.04;letter-spacing:.01em;
  text-transform:uppercase;margin-bottom:16px;
}
.pane-glass p{color:var(--text-2);font-size:clamp(14px,1.55vw,17px);line-height:1.65}
.pane-glass p + p{margin-top:14px}
.pane-glass .price{
  display:inline-block;margin-top:20px;
  font-family:var(--term);font-size:12px;letter-spacing:.18em;
  color:rgba(232,236,248,.9);
  padding:7px 14px;border:1px solid rgba(255,255,255,.16);border-radius:3px;
}
.pane-glass .actions{margin-top:26px}

/* графиката на всеки прозорец */
.pane-fig{
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(140px,18vw,220px);
}
.pane-fig svg{width:100%;height:auto;max-width:260px;overflow:visible}
.pane-fig .st{fill:none;stroke:rgba(214,220,236,.55);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.pane-fig .st2{fill:none;stroke:rgba(214,220,236,.22);stroke-width:1}
.pane-fig .fl{fill:rgba(232,236,248,.16)}
.pane-fig .hot{fill:none;stroke:rgba(241,241,241,.9);stroke-width:1.4;stroke-linecap:round}
.pane-fig .dot{fill:rgba(236,240,250,.9)}
/* линията се дочертава, когато прозорецът е активен */
.pane-fig .draw{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);transition:stroke-dashoffset 1.4s var(--ease)}
.pane.on .pane-fig .draw{stroke-dashoffset:0}
.pane-fig .spin{transform-origin:50% 50%;animation:figSpin 22s linear infinite}
@keyframes figSpin{to{transform:rotate(360deg)}}
.pane-fig .pulse{animation:figPulse 2.6s var(--ease) infinite}
@keyframes figPulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- точките отстрани ---------- */

.paneseq-dots{
  position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);
  z-index:2;display:flex;flex-direction:column;gap:16px;
  pointer-events:none;
}
.pdot{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.pdot i{
  display:block;width:26px;height:1px;background:rgba(255,255,255,.18);
  transition:width .45s var(--ease),background .45s var(--ease);
}
.pdot em{
  font-family:var(--term);font-size:10px;font-style:normal;letter-spacing:.16em;
  color:var(--text-3);transition:color .45s var(--ease);
}
.pdot.on i{width:46px;background:rgba(236,240,250,.9)}
.pdot.on em{color:var(--text)}

@media (max-width:1100px){
  .pane-glass{grid-template-columns:1fr;max-width:min(680px,88vw)}
  .pane-fig{order:-1;min-height:0;max-height:150px}
  .pane-fig svg{max-width:170px}
}

/* ---------- плосък вид: телефон и изключено движение ---------- */
@media (max-width:860px),(prefers-reduced-motion:reduce){
  .paneseq{height:auto !important;padding:clamp(40px,8vw,70px) 0}
  .paneseq-sticky{position:static;height:auto;display:block;overflow:visible}
  .pane{
    position:static;transform:none;left:auto;right:auto;
    margin-bottom:clamp(18px,3vw,28px);pointer-events:auto;
  }
  .pane-in{opacity:1 !important;transform:none !important;filter:none !important}
  .pane-glass{max-width:none}
  .paneseq-dots{display:none}
  .tech-bg::after{background:linear-gradient(180deg,rgba(8,8,11,.7),rgba(8,8,11,.9))}
}

@media (prefers-reduced-motion:reduce){
  .pane-glass::after{animation:none;opacity:0}
  .pane-fig .spin,.pane-fig .pulse{animation:none}
  .pane-fig .draw{stroke-dashoffset:0}
}

/* ============================================================
   17. 3D ФОН ПОД ЦЯЛАТА СТРАНИЦА
   Един canvas за цялата страница, закачен за екрана. Секциите
   стоят прозрачни върху него; текстът е на стъкло.
   ============================================================ */

.tech-bg.page{position:fixed;inset:0;z-index:0}
body.has-tech{background:transparent}
body.has-tech #site-header,
body.has-tech main,
body.has-tech #site-footer{position:relative;z-index:1}
/* футърът получава подложка — иначе точките минават през текста */
body.has-tech .ftr{
  background:linear-gradient(180deg,rgba(8,8,11,.55),rgba(8,8,11,.96));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top-color:rgba(255,255,255,.08);
}

/* заглавният блок на вътрешните страници */
.tophead{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--bar-h) + clamp(16px,3vh,34px)) 0 clamp(50px,8vh,90px);
}
.tophead .cue{
  position:absolute;left:50%;bottom:clamp(18px,4vh,38px);
  transform:translateX(-50%);
}

/* ============================================================
   18. ТЕХНИЧЕСКИ ШРИФТОВЕ ПО МЯСТО
   ============================================================ */

.tech-eyebrow{font-family:var(--term);letter-spacing:.24em}
.secnum{font-family:var(--term)}
.scene-tag,.stat-chip .k,.pdot em{font-family:var(--term)}
.stat-chip .v{font-family:var(--tech);font-weight:500;letter-spacing:.01em}
.reels-head h2{font-family:var(--tech);font-weight:500}

/* таблицата с контактите, когато е вътре в прозорец */
.pane-glass .ctable{
  margin:20px 0 0;background:transparent;
  border-color:rgba(255,255,255,.10);border-radius:var(--r-sm);
}
.pane-glass .ctable div{padding:12px 15px;border-bottom-color:rgba(255,255,255,.07)}
.pane-glass .ctable dt{font-family:var(--term)}
.pane-glass .ctable dd{font-family:var(--tech);font-weight:400;font-size:15px}

/* ============================================================
   19. КРАТКИЯТ НАДПИС И ВЕРТИКАЛНИЯТ ЧЕТЕЦ ПРИ КРЪГА
   Мястото отляво вече не носи абзац текст, а един ред и
   вертикална скала, която върви със скрола.
   ============================================================ */

.reels-tag{
  position:absolute;left:50%;top:clamp(74px,12vh,120px);
  transform:translateX(-50%);z-index:4;
  text-align:center;pointer-events:none;
  font-family:var(--term);font-size:11px;letter-spacing:.34em;
  color:rgba(232,236,248,.72);text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.reels-tag b{font-weight:400}
.reels-tag i{
  display:block;width:44px;height:1px;font-style:normal;
  background:linear-gradient(90deg,transparent,rgba(236,240,250,.7),transparent);
}

/* вертикалният четец отляво */
.vmeter{
  position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);
  z-index:4;pointer-events:none;
  display:flex;align-items:stretch;gap:14px;
  height:min(52vh,420px);
}
.vmeter .rail{
  position:relative;width:2px;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.16) 0 2px, transparent 2px 7px);
}
.vmeter .rail b{
  position:absolute;left:0;top:0;width:100%;height:var(--fill,0%);
  background:repeating-linear-gradient(180deg,
    #eceef8 0 2px, transparent 2px 7px);
}
/* бегачът, който слиза по скалата */
.vmeter .rail em{
  position:absolute;left:50%;top:var(--fill,0%);
  transform:translate(-50%,-50%);
  width:11px;height:11px;border-radius:50%;
  background:rgba(10,10,13,.9);
  box-shadow:0 0 0 1px rgba(236,240,250,.9),0 0 18px rgba(236,240,250,.35);
}
.vmeter .bars{
  display:flex;flex-direction:column;justify-content:space-between;
  gap:5px;width:64px;
}
.vmeter .bars s{
  display:block;height:3px;text-decoration:none;
  background:rgba(255,255,255,.14);
  width:var(--w,20%);
  transition:width .35s var(--ease),background .35s var(--ease);
}
.vmeter .bars s.hot{background:rgba(236,240,250,.85)}
.vmeter .cap{
  display:flex;flex-direction:column;justify-content:space-between;
  font-family:var(--term);font-size:9px;letter-spacing:.2em;
  color:var(--text-3);text-transform:uppercase;
  writing-mode:vertical-rl;
}
.vmeter .cap span:last-child{color:rgba(236,240,250,.85)}

@media (max-width:1100px){
  .vmeter .bars{width:40px}
}
@media (max-width:860px){
  .vmeter{display:none}
  .reels-tag{position:static;transform:none;margin-bottom:20px}
}

/* ============================================================
   20. WIPE МЕЖДУ СВЕТЛА И ТЪМНА СТРАНИЦА
   ------------------------------------------------------------
   Три остриета минават през екрана в цвета на страницата, към
   която отиваш. Едното половина при цъкане, другата при
   зареждане — затова изглежда като едно движение.
   По водещия ръб тича метална ивица.
   ============================================================ */

.wipe{position:fixed;inset:0;z-index:9800;pointer-events:none;overflow:hidden}
.wipe i{
  position:absolute;left:-30%;right:-30%;
  height:34.4%;
  transform:translate3d(-135%,0,0) skewX(-9deg);
  will-change:transform;
}
.wipe i:nth-child(1){top:-1%}
.wipe i:nth-child(2){top:33%}
.wipe i:nth-child(3){top:67%}

/* металната ивица по водещия ръб */
.wipe i::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:3px;
  background:linear-gradient(180deg,
    rgba(120,122,134,.9),rgba(232,236,248,1),rgba(241,241,241,1),
    rgba(150,152,164,.9),rgba(240,242,250,1),rgba(110,112,124,.9));
}

.wipe.to-dark  i{background:#0a0a0d}
.wipe.to-light i{background:#f2f3f5}

/* --- покриване (при цъкане) --- */
.wipe.cover i{
  transform:translate3d(0,0,0) skewX(-9deg);
  transition:transform .46s cubic-bezier(.62,0,.28,1);
}
.wipe.cover i:nth-child(2){transition-delay:.05s}
.wipe.cover i:nth-child(3){transition-delay:.1s}

/* --- прибиране (при зареждане) --- */
.wipe.instant i{transition:none !important}
.wipe.cover.clear i{
  transform:translate3d(135%,0,0) skewX(-9deg);
  transition:transform .56s cubic-bezier(.62,0,.28,1);
}
.wipe.cover.clear i:nth-child(2){transition-delay:.06s}
.wipe.cover.clear i:nth-child(3){transition-delay:.12s}

/* ---------- подреждането на съдържанието след wipe-а ---------- */

[data-stage]{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .72s var(--ease),transform .8s var(--ease);
  will-change:opacity,transform;
}
[data-stage].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .wipe{display:none}
  [data-stage]{opacity:1 !important;transform:none !important}
}

/* ============================================================
   21. СТРАНИЦА С ПРАВИ РЪБОВЕ
   Прегледите на клиповете вървят в тъмния стил, но без нито
   едно заобляне — така се връзват със светлия списък, от който
   се стига до тях.
   ============================================================ */

body.edged{
  --r-xs:0; --r-sm:0; --r:0; --r-lg:0; --r-xl:0; --r-pill:0;
}
body.edged *,
body.edged *::before,
body.edged *::after{border-radius:0 !important}