/* Глаз Бури v5: первый экран «тишина в центре шторма» и загрузчик-спираль.
   Хозяин: storm.js. Палитра: фон #0E1420, текст #E6E4DF, вторичный #CBD0DA, золото #D6B36A, капля #8A2332.
   Свечения нет нигде: ни text-shadow, ни box-shadow с цветом, ни shadowBlur в канвасе. */

/* ───────── загрузчик: видно только когда скрипт в разметке включил html.ldr-on ───────── */
#loader{display:none}
html.ldr-on{overflow:hidden}
html.ldr-on #loader{display:block;position:fixed;inset:0;z-index:200;background:#0E1420}
#loader .ldr-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
#loader .ldr-skip{position:absolute;right:clamp(16px,4vw,48px);bottom:clamp(20px,4vh,40px);min-height:44px;padding:0 18px;
  font:400 15px/1 "Tenor Sans",system-ui,sans-serif;letter-spacing:.04em;color:#CBD0DA;background:rgba(14,20,32,.6);
  border:1px solid rgba(214,179,106,.35);border-radius:2px;cursor:pointer;opacity:0;transition:opacity .3s}
#loader .ldr-skip.show{opacity:1}
#loader .ldr-skip:hover{color:#E6E4DF;border-color:#D6B36A}
#loader .ldr-skip:focus-visible{outline:2px solid #E0C080;outline-offset:3px;opacity:1}
/* страховка без скрипта: через 4 с заставка уходит сама */
html.ldr-on #loader{animation:ldr-safe .01s linear 4s forwards}
@keyframes ldr-safe{to{visibility:hidden;opacity:0}}

/* пока storm.js не взял первый экран, его движущиеся части спрятаны; страховка открывает их через 4,5 с */
html.storm-pre .storm .who,html.storm-pre .storm .hello,html.storm-pre .storm .fact,html.storm-pre .storm .btn,html.storm-pre .storm .door{
  opacity:0;animation:storm-safe .01s linear 4.5s forwards}
@keyframes storm-safe{to{opacity:1}}

/* ───────── первый экран: общее ───────── */
.storm{--bg-k:max(100vw,calc((100vh - 72px) * 1.7778));
  --bg-w:calc(var(--bg-k) * 1.4583);--bg-x:calc(71.35vw - var(--bg-w) * .5);--bg-y:calc((100vh - 72px) * .472 - var(--bg-w) * .28277);
  --ex:71.35vw;--ey:calc((100vh - 72px) * .472);--er:calc(var(--bg-k) * .08958);
  background:#0E1420;padding:0}
.storm .storm-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0E1420 url(storm.webp) no-repeat;
  background-size:var(--bg-w) auto;background-position:var(--bg-x) var(--bg-y);transform-origin:var(--ex) var(--ey)}
.storm .storm-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s linear}
.storm.gl-on .storm-bg canvas{opacity:1}
/* без WebGL: тот же кадр картинкой, глаз тонируем в матовое золото, небо под текстом притемняем */
.storm .storm-bg::before,.storm .storm-bg::after{content:"";position:absolute;inset:0;pointer-events:none}
.storm .storm-bg::before{mix-blend-mode:multiply;
  background:radial-gradient(circle at var(--ex) var(--ey),#E8D3A0 0,#DCC48E calc(var(--er) * .9),rgba(203,208,218,.92) calc(var(--er) * 2.6),rgba(203,208,218,.92) 100%)}
.storm .storm-bg::after{background:linear-gradient(90deg,rgba(14,20,32,.66) 0,rgba(14,20,32,.5) calc(var(--tx, 45vw) - 160px),rgba(14,20,32,0) calc(var(--tx, 45vw) + 60px)),
  linear-gradient(180deg,rgba(14,20,32,0) 70%,rgba(14,20,32,.5) 100%)}
.storm.gl-on .storm-bg::before,.storm.gl-on .storm-bg::after{opacity:0}

.storm .wrap{position:static}
.storm .storm-text{position:relative;z-index:3}
.storm .doors{z-index:3}
.storm .storm-bits{position:absolute;left:0;top:0;width:100%;z-index:2;pointer-events:none;overflow:hidden}
.storm .who{margin:0 0 6px}
.storm .hello{margin:0 0 14px;color:#CBD0DA}
.storm .fact{margin:0 0 30px;padding-left:14px;border-left:1px solid #D6B36A;font-size:16px;line-height:1.5;color:#CBD0DA}
.storm .hero-h1{margin-bottom:clamp(24px,3vw,40px)}

/* ───────── обрывки дела: текст, а не частицы ───────── */
.storm .pc{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;font-family:"Tenor Sans",system-ui,sans-serif;font-weight:400;transform-origin:50% 50%}
.storm-bits:not(.on) .pc{display:none}
.storm .bub{background:#1A2434;border:1px solid rgba(230,228,223,.16);border-radius:20px 20px 20px 5px;padding:15px 22px;font-size:25px;line-height:30px;color:#E6E4DF}
.storm .cap-ex{position:absolute;left:6px;top:100%;margin-top:7px;font-size:15px;line-height:18px;letter-spacing:.04em;color:#CBD0DA;opacity:.8}
.storm .tm{border:1px solid rgba(203,208,218,.4);border-radius:999px;padding:9px 22px;font-size:30px;line-height:34px;color:#CBD0DA;letter-spacing:.06em;background:rgba(14,20,32,.5)}
.storm .stk{background:#CDB27A;color:#1B1608;padding:20px 24px 24px;font-size:24px;line-height:28px;width:196px;white-space:normal}
.storm .drf{width:240px;height:168px;background:#2A3548;border:1px solid #3A465C;padding:18px;
  clip-path:polygon(0 0,100% 0,100% 90%,92% 100%,80% 91%,66% 100%,52% 92%,38% 100%,24% 91%,10% 100%,0 92%)}
.storm .drf i{display:block;height:9px;background:#46536D;border-radius:2px;margin-bottom:13px}
.storm .drf i.h{height:18px;width:60%;background:#56647F;margin-bottom:18px}
.storm .drf i.w88{width:88%}
.storm .drf i.w70{width:70%}
.storm .drf i.b{height:22px;width:42%;border:1px dashed #56647F;background:transparent;margin-top:20px}

/* ───────── двери: стекло бури ───────── */
.storm .door{border:1px solid rgba(214,179,106,.38);border-radius:2px;
  background:linear-gradient(165deg,rgba(230,228,223,.07) 0,rgba(14,20,32,.5) 38%,rgba(14,20,32,.62) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15)}
.storm .door::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(214,179,106,0),rgba(214,179,106,.75) 50%,rgba(214,179,106,0));pointer-events:none}
.storm .door:hover{border-color:rgba(214,179,106,.75)}

/* ───────── компьютер: текст слева крупно, глаз справа, двери парой под глазом у горизонта ───────── */
@media (min-width:961px){
  .storm{height:calc(100vh - 72px);min-height:600px;overflow:hidden;
    --h1:clamp(52px,4.75vw,80px);--dw:clamp(220px,17.5vw,290px);--dgap:22px;
    --dx:calc(min(100vw - 64px, 50vw + 552px) - var(--dw) - var(--dgap) * .5);--ex:var(--dx);--ey:calc((100vh - 72px) * .44);--dtop:calc(var(--ey) + var(--er) + 24px);
    --tx:calc(max(48px,calc(50vw - 552px)) + var(--h1) * 10.95)}
  .storm .storm-bits{height:100%}
  .storm .wrap{height:100%;display:flex;align-items:center}
  /* колонка под самую длинную фразу «Помощники, которые»: по две строки на часть заголовка */
  .storm .storm-text{width:calc(var(--h1) * 10.95);padding-bottom:1vh}
  .storm .hero-h1{font-size:var(--h1);line-height:1.06;max-width:none}
  .storm .hero-h1 .hl{display:block}
  .storm .doors{position:absolute;left:0;top:0;width:0;height:0;display:block}
  .storm .door{position:absolute;top:calc(var(--dtop) - var(--sv));width:var(--dw);padding:20px 22px 46px;--sh:0px;--sv:0px}
  .storm .door:first-child{left:calc(var(--dx) - var(--dgap) * .5 - var(--dw) + var(--sh))}
  .storm .door:last-child{left:calc(var(--dx) + var(--dgap) * .5 - var(--sh))}
  .storm .door-t{font-size:23px}
  .storm .door-g{font-size:15px}
  .storm .door-go{left:22px;bottom:20px}
}

/* ───────── телефон и планшет: глаз сверху, текст под ним, двери столбиком ───────── */
@media (max-width:960px){
  .storm{--bg-w:210vw;--bg-x:-55vw;--bg-y:calc(40vw - 59.4vw);--ex:50vw;--ey:40vw;--er:12.9vw;padding:0 0 56px}
  .storm .storm-bg{position:relative;inset:auto;height:min(92vw,64vh);min-height:300px}
  .storm .storm-bg::after{background:linear-gradient(180deg,rgba(14,20,32,0) 62%,#0E1420 100%)}
  .storm.gl-on .storm-bg::after{opacity:1}
  .storm .storm-bits{height:min(92vw,64vh);min-height:300px}
  .storm .wrap{display:block;margin-top:-28px}
  .storm .hero-h1{font-size:clamp(30px,8.2vw,46px);margin-bottom:22px}
  .storm .hero-h1 .hl{display:block}
  .storm .btn{width:100%;max-width:420px}
  .storm .doors{flex-direction:column;align-items:stretch;gap:12px;margin-top:28px;max-width:520px}
  .storm .door{width:auto;padding:18px 18px 46px}
  .storm .door-t{font-size:22px}
  .storm .door-go{left:18px;bottom:18px}
}

/* ───────── просили тишины: статичный кадр, двери на месте ───────── */
@media (prefers-reduced-motion:reduce){
  html.ldr-on #loader{display:none}
  .storm .pc{display:none}
  html.storm-pre .storm .who,html.storm-pre .storm .hello,html.storm-pre .storm .fact,html.storm-pre .storm .btn,html.storm-pre .storm .door{opacity:1;animation:none}
}
@media (max-width:600px){.storm .storm-bg{background-image:url(storm-m.webp)}}

/* заголовок первого экрана ждёт въезда строк (kino.js снимает h1-wait), страховка открывает его через 5 с */
html.h1-wait #top .hero-h1{visibility:hidden;animation:h1-safe .01s linear 5s forwards}
@keyframes h1-safe{to{visibility:visible}}

/* низ первого экрана мягко уходит в фон, без резкого обреза под глазом */
.storm::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24vh;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(14,20,32,0),#0E1420 92%)}