/* ── Экстремум: слой моушена (подключается ПОСЛЕ style.css).
   Идеи — из практик сайтов-лауреатов: маскированный выход заголовка,
   магнитные кнопки, spotlight-карточки, курсор-кольцо, зерно, каскад экранов.
   Всё в токенах приложения и уважает prefers-reduced-motion. ── */

/* появление: чуть глубже + расфокус */
.reveal { transform: translateY(22px); filter: blur(9px); transition: opacity .6s var(--ease), transform .72s var(--ease), filter .72s var(--ease); }
.reveal.visible { filter: blur(0); }

/* хиро: слова выезжают из маски; сам заголовок хореографии не мешает */
.hero-title.reveal { transform: none; filter: none; }
.w-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.w { display: inline-block; transform: translateY(118%); transition: transform .9s var(--ease); will-change: transform; }
.words-in .w { transform: none; }

/* аврора за хиро — медленный дрейф двух пятен света */
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::before { width: 640px; height: 640px; left: -170px; top: -130px; background: radial-gradient(circle, rgba(53,224,181,.12), transparent 62%); animation: drift-a 26s ease-in-out infinite; }
.hero::after { width: 540px; height: 540px; right: -130px; bottom: -90px; background: radial-gradient(circle, rgba(139,156,255,.10), transparent 62%); animation: drift-b 32s ease-in-out infinite; }
@keyframes drift-a { 50% { transform: translate(70px, 46px) scale(1.1); } }
@keyframes drift-b { 50% { transform: translate(-64px, -40px) scale(1.07); } }

/* зерно поверх всего — живая плёнка вместо «плоского» тёмного фона */
body::after {
  content: ""; position: fixed; inset: -60%; width: 220%; height: 220%;
  pointer-events: none; z-index: 98; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grain 8s steps(8) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 12.5% { transform: translate(-2%, 1.4%); }
  25% { transform: translate(1.6%, -1.2%); } 37.5% { transform: translate(-1.2%, -2%); }
  50% { transform: translate(2%, 1.2%); } 62.5% { transform: translate(-1.6%, .8%); }
  75% { transform: translate(1.2%, 2%); } 87.5% { transform: translate(-.8%, -1.6%); }
  100% { transform: translate(0, 0); }
}

/* кнопки: блик по основной + магнит (переменные ставит motion.js) */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: -2px; bottom: -2px; left: -75%; width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.btn-primary:hover::after { left: 125%; transition: left .55s ease; }
.magnetic { transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0); }
.btn-primary.magnetic:hover { transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0); box-shadow: 0 14px 30px -14px rgba(53,224,181,.5); }
.btn-ghost.magnetic:hover, .btn-buy.magnetic:hover, .btn-sell.magnetic:hover { transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0); }

/* spotlight: подсветка карточки следует за курсором */
.spot { position: relative; }
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(53,224,181,.075), transparent 70%);
}
.spot:hover::after { opacity: 1; }
.spot-iris::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(139,156,255,.09), transparent 70%); }

/* навигация: прячется на скролле вниз, возвращается на вверх; живое подчёркивание */
.nav { transition: background .3s, border-color .3s, transform .45s var(--ease); }
.nav.nav-hide { transform: translateY(-102%); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--mint); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav-links a { position: relative; }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* световой шлейф: мягкое пятно света идёт за курсором, ничего не рисуя поверх */
.mouse-glow {
  position: fixed; top: 0; left: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(53,224,181,.075), rgba(139,156,255,.05) 42%, transparent 68%);
  transition: opacity .6s;
}
@media (pointer: coarse) { .mouse-glow { display: none; } }

/* мост «свечи → нейроны» между демо и наставником */
.bridge { position: relative; height: 340px; margin-top: 90px; overflow: hidden; }
#bridgeCanvas {
  width: 100%; height: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.bridge-cap {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: var(--t4); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
}

/* экраны приложения: каскадный вход и объём на ховере */
.shot { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease) var(--d, 0s), transform .72s var(--ease) var(--d, 0s); }
.shots-rail.in .shot { opacity: 1; transform: none; }
.shot img { transition: transform .45s var(--ease), border-color .3s, box-shadow .45s; }
.shot:hover img { box-shadow: 0 26px 60px -22px rgba(0,0,0,.7); }

/* редукция движения: слой отключается целиком */
@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none; }
  .w { transform: none; transition: none; }
  .hero::before, .hero::after, body::after { animation: none; }
  .mouse-glow { display: none; }
  .shot { opacity: 1; transform: none; transition: none; }
  .nav.nav-hide { transform: none; }
}