/* Блок 1, вариант Б — «3D-сцена с глубиной».
   Камера = поворот «мира» (.world) в CSS 3D: клавиша стоит на небольшой площадке-сетке (опора), над ней
   редкие пылинки и одна подпись способа; всё висящее смотрит в камеру (обратный поворот).
   Сильных эффектов два: (1) камера — вход отъездом, дрейф, отклик на мышь; (2) нажатие — волна по площадке
   и крупный клип, который вылетает из клавиши, играет и уходит. Анимируются только transform / translate / opacity.
   Один шрифт — Onest (из общего ../fonts.css).
   Цвета: только фиолетовый бренда (с прозрачностью) и тёмный фон из base.css. */

/* Настройки сцены (меняются здесь; JS берёт --cam-* отсюда) */
.hero {
  --kx: 68%;            /* где клавиша на экране по горизонтали */
  --ky: 46%;            /* и по вертикали */
  --persp: 1100px;      /* «объектив» камеры */
  --cam-rx: 58;         /* наклон камеры в покое, градусы */
  --cam-rz: -32;        /* поворот камеры в покое, градусы */
  --cam-d: 0;           /* отъезд камеры в покое, px (минус — дальше) */
  --key: 240px;         /* размер клавиши */
  position: relative; overflow: clip; isolation: isolate;
  min-height: clamp(620px, calc(100svh - 65px), 900px);
  display: flex; align-items: center;
}

/* ── сцена ── */
.scene { position: absolute; inset: 0; perspective: var(--persp); perspective-origin: var(--kx) var(--ky); z-index: 0; }
.light { position: absolute; left: var(--kx); top: var(--ky); width: 1200px; height: 1000px; translate: -50% -58%; pointer-events: none;
  background: radial-gradient(closest-side, #7c50f938, #7c50f90f 55%, transparent); animation: breathe 9s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .7; } }

.world { --rx: calc(var(--cam-rx) * 1deg); --rz: calc(var(--cam-rz) * 1deg); --d: calc(var(--cam-d) * 1px);
  position: absolute; left: var(--kx); top: var(--ky); width: 0; height: 0; transform-style: preserve-3d;
  transform: translateZ(var(--d)) rotateX(var(--rx)) rotateZ(var(--rz)); scale: var(--ws, 1); will-change: transform; }
.world > * { position: absolute; transform-style: preserve-3d; }

/* опора: небольшая площадка-сетка под клавишей. Маска гасит её к краю, и волна (кольца внутри площадки)
   гаснет вместе с ней — до колонки текста не доходит. */
.floor { left: -440px; top: -440px; width: 880px; height: 880px; pointer-events: none;
  background-image: linear-gradient(#a281ff47 1px, transparent 1px), linear-gradient(90deg, #a281ff47 1px, transparent 1px);
  background-size: 48px 48px; background-position: 23px 23px;
  -webkit-mask-image: radial-gradient(closest-side, #000 28%, #0006 55%, transparent 78%); mask-image: radial-gradient(closest-side, #000 28%, #0006 55%, transparent 78%); }
.pool { left: -340px; top: -340px; width: 680px; height: 680px; border-radius: 50%; pointer-events: none; transform: translateZ(1px);
  background: radial-gradient(closest-side, #7c50f966, #7c50f922 45%, transparent); }
.ring { position: absolute; left: 290px; top: 290px; width: 300px; height: 300px; border-radius: 50%; border: 2px solid #a281ff; opacity: 0; transform: scale(.4); }
.ring.go { animation: ring 1.6s cubic-bezier(.16, 1, .3, 1) forwards; }
.ring.r2 { border-width: 1px; } .ring.r2.go { animation-delay: .16s; }
@keyframes ring { 0% { opacity: 1; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.5); } }

/* клавиша: стопка слоёв бока + верх */
.key { left: calc(var(--key) / -2); top: calc(var(--key) / -2); width: var(--key); height: var(--key); cursor: pointer; border-radius: 22%; outline: none; }
.cap { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .22s cubic-bezier(.3, 1.6, .5, 1); }
.key.down .cap { transform: translateZ(-20px); transition: transform .08s ease-in; }
.ext { position: absolute; inset: 0; border-radius: 22%; background: var(--c); transform: translateZ(var(--z)); }
.ext:first-child { box-shadow: 0 0 90px 16px #7c50f955; }
.face { position: absolute; inset: 0; border-radius: 22%; transform: translateZ(54px); display: grid; place-items: center; color: #fff; overflow: hidden;
  background: radial-gradient(120% 120% at 25% 15%, var(--accent-hi), var(--accent) 60%, #5d34d6); box-shadow: inset 0 0 0 3px #ffffff30, inset 0 -16px 28px #3a1fa066; }
.face .ic { width: 46%; height: 46%; stroke-width: 3; }
/* надпись клавиши, как на настоящей клавише: мелко в верхнем левом углу */
.legend { position: absolute; left: 12%; top: 9%; font: 750 calc(var(--key) * .15)/1 var(--ui); letter-spacing: -.01em; color: #ffffffe0; }
.face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, #ffffff3a 50%, transparent 62%); transform: translateX(-130%); animation: sheen 4s ease-in-out infinite 2.4s; }
@keyframes sheen { 0%, 45% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.key:focus-visible .face { box-shadow: inset 0 0 0 3px #fff, inset 0 -16px 28px #3a1fa066; }

/* всё, что висит над полом, повёрнуто к камере: обратный поворот мира в рабочем ракурсе (константа, не per-frame) */
.bb, .tag { transform: translate3d(var(--x), var(--y), var(--z)) rotateZ(calc(var(--cam-rz) * -1deg)) rotateX(calc(var(--cam-rx) * -1deg)) translate(-50%, -50%); }

/* пылинки (создаёт JS) */
.dust { left: 0; top: 0; }.p { position: absolute; left: 0; top: 0; pointer-events: none; animation: hover var(--t, 9s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
@keyframes hover { to { translate: 0 0 var(--h, 18px); } }
.p > i { display: block; }
.p > i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, #fff, #cdbcffcc 35%, #a281ff55 60%, transparent); }
.dust.kick .p > i { animation: kick .9s cubic-bezier(.2, .7, .2, 1) var(--kd, 0s) both; }
@keyframes kick { 30% { transform: translateY(-14px) scale(1.5); opacity: 1; } }

/* одна подпись способа (тем же Onest, что и весь текст) */
.tag { left: 0; top: 0; display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  font: 500 13px/1 var(--ui); color: var(--t1); background: #101217e8; border: 1px solid var(--line-hi); box-shadow: 0 14px 30px -12px #000;
  animation: hover 7s ease-in-out infinite alternate; --h: 12px; }
/* место подобрано замером под рабочий ракурс 1440×900: вдали, справа сверху от клавиши — далеко от кнопки */
.t1 { --x: 227px; --y: 13px; --z: 200px; }
.tag.on { border-color: #a281ff99; box-shadow: 0 0 24px -4px #7c50f9aa, 0 14px 30px -12px #000; transition: border-color .3s, box-shadow .3s; }
.tag b { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 10px var(--accent-hi); }

/* клип, вылетающий к зрителю: свой слой со своей перспективой (JS ставит точку вылета --fx/--fy) */
.fly { position: absolute; inset: 0; perspective: 900px; perspective-origin: var(--fx, 71%) var(--fy, 50%); pointer-events: none; z-index: 1; }
.clip { position: absolute; left: var(--fx, 71%); top: var(--fy, 50%); width: clamp(300px, 25vw, 360px); aspect-ratio: 16 / 9; opacity: 0;
  border-radius: 14px; overflow: hidden; background: #000; border: 1px solid #a281ff55; box-shadow: 0 24px 40px -16px #000c;
  transform: translate(-50%, -50%) translateZ(-60px) scale(.3); }
.clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip figcaption { position: absolute; left: 10px; bottom: 10px; padding: 5px 9px; border-radius: 6px; background: #0b0d12e0; font: 500 13px/1 var(--ui); color: var(--t1); }
/* 3,6 с: 0,5 с вылет из грани клавиши → 2,5 с висит крупно и играет (чуть плывёт к зрителю) → 0,6 с уходит
   назад, к сцене, и гаснет. Наверх не летит, поэтому под шапкой ничего не обрезается. */
.clip.go { animation: fly 3.2s linear forwards; }
@keyframes fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate3d(0, 0, -60px) rotateX(55deg) scale(.3); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  10%  { opacity: 1; }
  16%  { transform: translate(-50%, -50%) translate3d(var(--cx, -110px), var(--cy, -205px), 0) rotateX(0) rotateY(-6deg) scale(1); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  72%  { opacity: 1; transform: translate(-50%, -50%) translate3d(calc(var(--cx, -110px) - 6px), calc(var(--cy, -205px) - 7px), 30px) rotateX(0) rotateY(-3deg) scale(1); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate3d(calc(var(--cx, -110px) + 70px), calc(var(--cy, -205px) + 15px), -140px) rotateX(0) rotateY(-10deg) scale(.86); }
}
/* пока клип главный, остальная сцена приглушается */
.hero.go.show .p, .hero.go.show .tag, .hero.go.show .light { opacity: .3; transition: opacity .4s ease; }

/* ── текст ── */
.hero-in { position: relative; z-index: 2; pointer-events: none; }
.copy { display: grid; gap: 28px; justify-items: start; max-width: 640px; pointer-events: auto; padding: 40px 0; }
.copy h1 { max-width: 10.5em; }
.copy .lead { max-width: 31em; }
.cta-note { display: grid; gap: 2px; }
.w { display: inline-block; vertical-align: top; }
.wi { display: inline-block; }

/* ── вход (только когда движение разрешено: класс anim ставится в <head>) ── */
.anim h1 { visibility: hidden; } .anim h1.split { visibility: visible; }
.anim .wi { transform: translateY(.45em); opacity: 0; }
.anim .go .wi { transform: none; opacity: 1; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) calc(.45s + var(--i) * 90ms), opacity .8s ease calc(.45s + var(--i) * 90ms); }
.anim .lead { opacity: 0; transform: translateY(14px); }
.anim .go .lead { opacity: 1; transform: none; transition: opacity .9s var(--ease) 1.25s, transform 1s var(--ease) 1.25s; }
.anim .floor, .anim .pool, .anim .light { opacity: 0; }
.anim .cta-note, .anim .cta .btn { opacity: 0; } .anim .go .cta-note { opacity: 1; transition: opacity .9s ease 1.7s; } .anim .go .cta .btn { opacity: 1; transition: opacity .9s ease 1.5s, transform .25s var(--ease), background .2s, box-shadow .25s var(--ease); }
.anim .go .floor { opacity: 1; transition: opacity 1.6s ease .25s; }
.anim .go .pool { opacity: 1; transition: opacity 1.2s ease .5s; }
.anim .go .light { opacity: 1; transition: opacity 1.8s ease; }
.anim .p { opacity: 0; }
.anim .go .p { opacity: var(--o, 1); transition: opacity 1.1s ease var(--in, .6s); }
.anim .tag { opacity: 0; }
.anim .go .tag { opacity: 1; transition: opacity .8s ease 1.6s; }

/* ── телефон и узкие окна: текст сверху, сцена под ним ── */
@media (max-width: 900px) {
  .nav { display: none; } .bar { gap: 16px; } .btn-sm { margin-left: auto; }
  .hero { --kx: 50%; --ky: 58%; --cam-d: -120; --key: 150px; flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-in { order: 1; } .copy { padding: 36px 0 0; gap: 22px; }
  .scene { position: relative; order: 2; inset: auto; height: 450px; }
  .fly { top: auto; height: 450px; bottom: 0; }
  .tag { font-size: 12px; padding: 7px 11px; }
  .t1 { --x: -262px; --y: 303px; --z: 80px; }   /* телефон: слева снизу от клавиши, клип висит над ней — не пересекаются */
  .clip { width: min(300px, calc(100vw - 40px)); }
  @keyframes fly {
    0%   { opacity: 0; transform: translate(-50%, -50%) translate3d(0, 0, -60px) rotateX(55deg) scale(.3); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
    10%  { opacity: 1; }
    16%  { transform: translate(-50%, -50%) translate3d(0, -78px, 0) scale(1); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
    72%  { opacity: 1; transform: translate(-50%, -50%) translate3d(0, -82px, 20px) scale(1); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
    100% { opacity: 0; transform: translate(-50%, -50%) translate3d(0, -40px, -140px) scale(.86); }
  }
}
@media (max-width: 560px) { :root { --gut: 20px; } .btn-lg { width: 100%; justify-content: center; } .hero { --cam-d: -220; } }

/* ── уменьшить движение: статичная сцена, клип при нажатии просто проявляется ── */