/* ==== Главная: одна ночная сцена, живой фон, частицы по краям, свечения, каскадные появления. Только transform/opacity в анимациях. ==== */
:root{
  --sky-1:#0d1d2a; --sky-2:#1f3f4d; --fog-purple:#2d2448; --ember:#ffb454; --ember-2:#ff7a3c; --wisp:#b48cff; --mist:#7fd6d0;
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1); --ease-move:cubic-bezier(0.77, 0, 0.175, 1);
}
body.landing{background:var(--sky-1)}
/* фиксированное небо за всей страницей — экраны переходят друг в друга без швов */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% -10%, #2a5566 0%, transparent 60%),
    radial-gradient(90% 60% at 10% 90%, #3a2a5c 0%, transparent 55%),
    linear-gradient(180deg, #24404e 0%, #1e3a48 40%, #2b2a48 100%)}
.sky .fog{position:absolute;left:-20%;width:140%;height:42%;filter:blur(28px);opacity:.55;will-change:transform;
  background:radial-gradient(ellipse 45% 60% at 30% 50%, rgba(120,190,200,.55), transparent 70%),
             radial-gradient(ellipse 40% 55% at 70% 45%, rgba(150,120,210,.5), transparent 70%)}
.sky .fog.f1{top:30%;animation:fog-a 70s linear infinite}
.sky .fog.f2{top:58%;opacity:.4;animation:fog-b 95s linear infinite}
@keyframes fog-a{0%{transform:translate3d(-6%,0,0)}50%{transform:translate3d(6%,2%,0)}100%{transform:translate3d(-6%,0,0)}}
@keyframes fog-b{0%{transform:translate3d(5%,0,0)}50%{transform:translate3d(-5%,-2%,0)}100%{transform:translate3d(5%,0,0)}}
/* северное сияние: широкая размытая лента медленно плывёт над всей страницей */
.sky .aurora{position:absolute;top:-12%;left:-30%;width:160%;height:64%;filter:blur(70px);opacity:.38;will-change:transform;
  background:linear-gradient(100deg, transparent 18%, rgba(90,220,200,.42) 36%, rgba(160,100,255,.46) 52%, rgba(255,150,90,.22) 64%, transparent 82%);
  animation:aurora 46s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate3d(-6%,0,0) rotate(-3deg)}100%{transform:translate3d(6%,3%,0) rotate(3deg)}}
/* тёмная виньетка по краям — сцена «в фонаре» */
.sky::after{content:"";position:absolute;inset:0;background:radial-gradient(115% 85% at 50% 50%, transparent 58%, rgba(6,2,20,.55) 100%)}

/* ==== частицы: canvas в каждом экране между артом и текстом, рисует js/landing.js ==== */
canvas.fx{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;display:block}

/* экраны */
.story{position:relative;z-index:1}
.screen{position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start}
.screen .art{position:absolute;left:0;bottom:0;width:100%;height:auto;pointer-events:none;user-select:none;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 26%);mask-image:linear-gradient(to bottom, transparent 0, #000 26%);
  will-change:transform}
/* контент — в контейнере 1366 по центру, фон и частицы — во всю ширину окна */
.screen .copy{position:relative;z-index:2;width:min(var(--container), 92%);margin:0 auto;padding:clamp(28px, 6vh, 64px) 0 0}
.screen .copy > div{position:relative;z-index:0;max-width:100%}
/* мистический ореол за текстом: дышит, только opacity/transform */
.screen .copy > div::before{content:"";position:absolute;inset:-10% -14%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(60% 60% at 45% 50%, rgba(70,30,130,.55), rgba(70,30,130,0) 72%);filter:blur(28px);
  animation:halo 7s ease-in-out infinite;will-change:transform,opacity}
@keyframes halo{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
/* зона под текст: высота экрана минус картинка (16:9 во всю ширину) — текст никогда не ложится на персонажа */
.screen.hero,.screen.pain,.screen.how{padding-bottom:calc(56.25vw + 24px)}
.nowrap{white-space:nowrap}
/* типографика: крупно, плотно, с размерным трекингом */
.screen h1{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:clamp(34px, 9.4vw, 64px);line-height:1.04;letter-spacing:-.025em;
  color:#FFE066;text-shadow:0 2px 0 #4a2a00, 0 10px 40px rgba(255,190,60,.25)}
.screen h2{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:clamp(26px, 6.6vw, 44px);line-height:1.08;letter-spacing:-.02em;color:#FFE066;text-shadow:0 2px 0 #4a2a00;margin:0 0 14px}
.screen .lead{font-size:clamp(17px, 4.6vw, 22px);line-height:1.45;color:#fff;margin:16px 0 26px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.screen .note{font-size:15px;color:rgba(255,255,255,.72);margin-top:14px}
.pains{list-style:none;margin:6px 0 30px}
.pains li{position:relative;padding:8px 0 8px 34px;font-size:clamp(17px, 4.5vw, 20px);line-height:1.35;color:#fff}
.pains li::before{content:"";position:absolute;left:8px;top:.9em;width:10px;height:10px;border-radius:50%;background:var(--ember);box-shadow:0 0 12px 3px rgba(255,180,84,.55)}
.steps{list-style:none;margin:6px 0 30px;padding:0}
.steps li{display:flex;gap:.7em;align-items:flex-start;padding:9px 0;font-size:clamp(17px, 4.5vw, 20px);line-height:1.35;color:#fff}
.steps .n{flex:0 0 2em;height:2em;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;
  background:radial-gradient(circle at 35% 30%, #fff3a3, #F2D811 55%, #d39a00);color:#2A1145;box-shadow:0 4px 14px rgba(242,216,17,.45), 0 0 26px rgba(242,216,17,.35)}
.facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 0 26px}
.facts .fact{display:flex;flex-direction:column;min-width:96px}
.facts .fact b{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:clamp(34px, 9vw, 52px);line-height:1;letter-spacing:-.03em;color:#fff;text-shadow:0 0 24px rgba(255,180,84,.5), 0 0 60px rgba(255,150,60,.3)}
.facts .fact span{font-size:14px;color:rgba(255,255,255,.75);margin-top:4px;letter-spacing:.02em}
/* CTA: ореол-пульс снаружи (обёртка), блик внутри, отклик на нажатие */
.cta-wrap{position:relative;display:inline-block;max-width:100%}
.cta-wrap::before{content:"";position:absolute;inset:-4px;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 2px rgba(255,80,190,.55), 0 0 34px 10px rgba(196,0,255,.45);animation:cta-pulse 2.6s ease-in-out infinite;will-change:transform,opacity}
@keyframes cta-pulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
.btn.cta{position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(255,0,123,.35)}
.btn.cta::before{content:"";position:absolute;top:-60%;left:-40%;width:35%;height:220%;transform:skewX(-20deg) translate3d(0,0,0);
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);animation:cta-shine 3.4s var(--ease-out) infinite;pointer-events:none}
@keyframes cta-shine{0%,70%{transform:skewX(-20deg) translate3d(-120%,0,0)}100%{transform:skewX(-20deg) translate3d(420%,0,0)}}
/* появление: каскад при загрузке и при прокрутке */
/* скрываем до появления только при включённом JS — без него всё видно сразу */
html.js .reveal{opacity:0;transform:translate3d(0,18px,0);transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);transition-delay:calc(var(--i, 0) * 70ms)}
html.js .reveal.in{opacity:1;transform:none}
/* переходы между экранами: тёплая пелена сверху каждой картинки уже в маске; снизу — мягкое затемнение под футер */
.story::after{content:"";display:block;height:40px;background:linear-gradient(to bottom, transparent, rgba(10,4,32,.85))}
/* подвал должен лежать НАД фиксированным небом (.sky z-index:0), иначе его перекрывает градиент */
body.landing .site-footer{position:relative;z-index:1;margin-top:0;background:rgba(22,10,44,.82);border-top-color:rgba(160,100,255,.55);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
/* заголовок-стекло */
.site-header.glass{position:fixed;left:0;right:0;top:0;background:rgba(74,30,120,.62);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.14);box-shadow:none}
body.landing main{padding-top:0}
.screen.hero .copy{padding-top:calc(64px + clamp(24px, 6vh, 72px))}
/* третий экран: слева шаги, справа «Что внутри» на матовом стекле (glassmorphism); на телефоне — столбиком */
.screen.how .copy{display:block}
.how-right.glass{padding:clamp(28px, 2.4vw, 44px) clamp(28px, 2.6vw, 48px) clamp(32px, 2.8vw, 52px);text-align:center;
  background:rgba(42, 17, 69, 0.45);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255, 255, 255, 0.18);border-radius:3px;
  box-shadow:0 8px 32px rgba(0, 0, 0, 0.35)}
.how-right.glass::before{display:none}
.how-right .facts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px, 2.2vw, 36px) 24px;margin:0;justify-items:stretch}
.how-right .fact{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.how-right .fact b{font-variant-numeric:tabular-nums;font-size:clamp(48px, 3.8vw, 76px);line-height:1;letter-spacing:-.02em;will-change:transform}
.how-right .fact b.done{animation:count-pop .36s var(--ease-out)}
@keyframes count-pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.how-right .fact span{font-size:clamp(14px, .95vw, 18px);margin-top:8px;color:rgba(255,255,255,.85);letter-spacing:.02em}
.how-cta{margin-top:22px}
.how-right .facts .fact b{text-shadow:0 0 24px rgba(255,180,84,.55), 0 0 60px rgba(255,150,60,.35)}
.how-right h2{margin:0 0 clamp(18px, 1.6vw, 28px);text-align:center}
.how-right .cta-wrap{margin-top:4px}
/* первый экран: справа — вертикальное видео (9:16) на стекле с кнопкой Play; файл /video/hero.mp4 */
.screen.hero .copy{display:block}   /* на телефоне текст и видео — столбиком (site.css даёт .copy flex) */
.hero-video{position:relative;aspect-ratio:9/16;width:min(320px, 78%);margin:28px auto 0;border-radius:20px;
  background:rgba(42, 17, 69, 0.45);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255, 255, 255, 0.18);box-shadow:0 8px 32px rgba(0, 0, 0, 0.35)}
/* свечение за видео: два слоя — широкий бирюзово-зелёный ореол и яркая кайма у рамки; медленно «дышат» (opacity + scale) */
.hero-video{overflow:visible;z-index:0}
.hero-video video{border-radius:inherit}
.screen .copy > .hero-video::before{content:"";position:absolute;inset:-16% -34% -22% -34%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(55% 55% at 50% 55%, rgba(90, 255, 225, .95), rgba(40, 220, 200, .55) 40%, rgba(30, 200, 210, .18) 65%, rgba(30, 200, 210, 0) 80%);
  filter:blur(28px);animation:hv-glow 4.5s ease-in-out infinite;will-change:transform,opacity}
.screen .copy > .hero-video::after{content:"";position:absolute;inset:-14px;z-index:-1;border-radius:32px;pointer-events:none;
  background:rgba(80, 245, 215, .85);filter:blur(18px);animation:hv-glow-2 4.5s ease-in-out infinite;will-change:transform,opacity}
@keyframes hv-glow{0%,100%{opacity:.6;transform:scale(.94)}50%{opacity:1;transform:scale(1.08)}}
@keyframes hv-glow-2{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.screen .copy > .hero-video::before,.screen .copy > .hero-video::after{animation-duration:9s}}
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0a0420}
.hero-video.no-video video{display:none}
.hv-play{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:2px solid rgba(255,255,255,.65);
  background:rgba(196,0,255,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(255,0,123,.35);transition:transform .1s var(--ease-out),background .2s ease,opacity .2s ease}
.hv-play svg{width:44px;height:44px;fill:#fff;margin-left:6px}
.hv-play:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.hv-play:hover{background:rgba(255,0,123,.7)}}
.hero-video.playing .hv-play{opacity:0;pointer-events:none}
.hero-video.no-video .hv-play{opacity:.45;pointer-events:none}
.hv-soon{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:rgba(255,255,255,.8);font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
/* десктоп: фон и арт — во всю ширину окна, контент — в контейнере 1366 по центру; по бокам остаются поля для частиц */
:root{--container:1366px;--gutter:max(4%, calc((100% - var(--container)) / 2))}
@media (min-width:900px){
  .screen{min-height:100vh;justify-content:center;padding-bottom:0 !important}
  .screen .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 93%, transparent 100%);mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 93%, transparent 100%)}
  .screen.hero .art{object-position:left center}
  .screen.pain .art{object-position:right center}
  .screen.how .art{object-position:center}
  .screen .copy{padding:0;width:min(92%, var(--container))}
  .screen.hero .copy{padding-top:0}
  .screen.hero .copy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px}
  .screen.hero .copy > div{max-width:none}
  .screen.hero .hero-text{max-width:clamp(300px, 33vw, 450px)}
  .screen.hero .hero-video{justify-self:end;width:clamp(300px, 23vw, 440px);margin:0 clamp(0px, 4vw, 80px) 0 0}
  .screen.pain .copy > div{max-width:min(600px, 44vw)}
  .screen.how .copy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:40px}
  .screen.how .copy > div{max-width:none}
  .screen.how .how-left{max-width:min(660px, 52vw)}
  .screen.how .how-right{justify-self:end;width:min(640px, 46vw)}
  .screen h1{font-size:clamp(40px, 3.4vw, 64px)}
  .screen h2{font-size:clamp(28px, 2.4vw, 40px)}
  .screen .lead{font-size:clamp(18px, 1.35vw, 24px)}
  .pains li,.steps li{font-size:clamp(17px, 1.2vw, 21px)}
  .facts .fact b{font-size:clamp(40px, 3.2vw, 60px)}
  .site-header{padding-left:var(--gutter);padding-right:var(--gutter)}
}
/* широкие экраны: у hero силуэты монстров начинаются с 34% ширины картинки — сдвигаем арт вправо на часть поля и растворяем его левый край в небе */
@media (min-width:1500px){
  .screen.hero .art{left:calc((100% - var(--container)) / 2 * .7);width:calc(100% - (100% - var(--container)) / 2 * .7);right:auto;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 93%, transparent 100%), linear-gradient(to right, transparent 0, #000 22%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 93%, transparent 100%), linear-gradient(to right, transparent 0, #000 22%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}
@media (max-width:899px){.screen .art{transform:none !important}}
/* меньше движения — но не мёртвая страница: остаются мерцание блёсток и плавные появления */
@media (prefers-reduced-motion:reduce){
  .sky .fog,.sky .aurora,.cta-wrap::before,.btn.cta::before,.screen .copy > div::before{animation:none}
  .reveal{transition:opacity .3s ease;transform:none}
  .screen .art{transform:none !important}
}
@media (prefers-reduced-transparency:reduce){.site-header.glass,body.landing .site-footer{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(45,27,94,.96)}}