/* Первый экран УС v2. Переменные на .hx-st ставит hero.js: --o шторы 0..1, --l свет 0..1, --g логотип 0..1, --q текст 0..1, --a кнопки 0..1.
   Полосы штор (.hx-cur i) двигает JS напрямую (transform), всё остальное - через переменные. */
.hx{position:relative;height:320vh;background:#e8e1d6;margin-top:calc(var(--hh) * -1)}
.hx-st{--o:0;--l:0;--g:0;--m:0;--q:0;--a:0;--gap:0px;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:#e8e1d6}

/* фон: светлое архитектурное пространство, в темноте пока шторы закрыты */
.hx-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(calc(1.06 - var(--o) * .06));will-change:transform}
.hx-dim{position:absolute;inset:0;background:#2a251f;opacity:calc(.72 - var(--l) * .72);pointer-events:none}
/* линия света в стыке: тонкая -> яркая -> растворяется в ambient */
.hx-slit{position:absolute;top:0;bottom:0;left:50%;width:calc(var(--gap) + 2px);transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,rgba(255,236,205,0),rgba(255,243,224,.95) 30%,#fffaf1 50%,rgba(255,243,224,.95) 70%,rgba(255,236,205,0));
  box-shadow:0 0 calc(20px + var(--l) * 120px) calc(4px + var(--l) * 40px) rgba(255,226,180,.55);
  opacity:calc(min(1, var(--l) * 6) * (1 - var(--o) * 2.6))}

/* знак и текст */
.hx-c{position:absolute;inset:var(--hh) 0 0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;gap:34px}
.hx-logo{display:flex;flex-direction:column;align-items:center;gap:18px;color:#9a7650;opacity:var(--g);
  filter:blur(calc((1 - var(--g)) * 6px));transform:translateY(calc((1 - var(--m)) * 110px)) scale(calc(.96 + var(--g) * .04 - var(--m) * .22))}
.hx-name{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(13px,1.2vw,16px);letter-spacing:.46em;text-transform:uppercase;color:#6f5a42;margin-right:-.46em}
.hx-copy{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:880px;opacity:var(--q);transform:translateY(calc((1 - var(--q)) * 26px))}
.hx-tag{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#8a7a66;font-weight:500}
.hx-copy h1{font-weight:300;font-size:clamp(32px,4.4vw,62px);line-height:1.04;letter-spacing:-.03em;color:#1f1c18}
.hx-copy p{font-size:clamp(16px,1.3vw,19px);color:#5d554b;max-width:560px;line-height:1.5}
.hx-acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;opacity:var(--a);transform:translateY(calc((1 - var(--a)) * 16px));pointer-events:none}
.hx[data-done] .hx-acts{pointer-events:auto}

/* шторы: полосы-складки с текстурой ткани GPT; правая - зеркало левой */
.hx-cur{position:absolute;left:0;top:calc(var(--hh) + 6px);bottom:4%;width:100%;z-index:2;pointer-events:none;
  filter:brightness(calc(.92 + var(--l) * .34)) saturate(calc(1 - var(--l) * .25))}
.hx-cur--r{transform:scaleX(-1)}
.hx-cur i{position:absolute;top:0;bottom:0;left:0;width:var(--sw);transform-origin:0 0;will-change:transform;
  background-image:url(/img/hero/curtain.webp);background-size:var(--pw) 100%;background-repeat:no-repeat}
/* тень складки: чем плотнее собрана ткань, тем глубже */
.hx-cur i:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,30,20,.0),rgba(40,30,20,.32) 82%,rgba(40,30,20,.12));opacity:var(--k,0)}
/* кайма света на внутреннем крае ткани (свет идёт из проёма) */
.hx-cur:after{content:'';position:absolute;top:0;bottom:0;left:calc(var(--lead) - 54px);width:54px;z-index:1;
  background:linear-gradient(90deg,rgba(255,244,226,0),rgba(255,240,218,.55) 75%,rgba(255,250,240,.85));opacity:calc(min(1, var(--l) * 5) * (1 - var(--o) * .8));mix-blend-mode:screen}
/* мягкая тень от шторы на фон */
.hx-cur:before{content:'';position:absolute;top:0;bottom:-4%;left:calc(var(--lead) - 4px);width:34px;background:linear-gradient(90deg,rgba(30,22,14,.16),transparent);filter:blur(6px);opacity:calc(min(1, var(--o) * 4))}
.hx-rail{position:absolute;left:0;right:0;top:var(--hh);height:6px;z-index:3;background:linear-gradient(#55504a,#2e2a26);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.hx-rail i{position:absolute;right:3%;top:-3px;width:46px;height:12px;border-radius:2px;background:linear-gradient(#4a4540,#24211e)}

.hx-hint{position:absolute;z-index:4;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font:500 11px/1 'Inter',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#efe6d8;opacity:calc(1 - var(--o) * 6);padding-left:.3em}
.hx-hint span{width:1px;height:34px;background:linear-gradient(#efe6d8,transparent);animation:hxHint 1.8s ease-in-out infinite;transform-origin:top}
@keyframes hxHint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* «Алиса» - точка, используется и в других блоках */
.hx-led{width:10px;height:10px;border-radius:50%;background:conic-gradient(#8b5cff,#5b8cff,#c45cff,#8b5cff);animation:hxSpin 1.6s linear infinite;flex:none}
@keyframes hxSpin{to{transform:rotate(360deg)}}

@media(max-width:900px){
  .hx{height:280vh}
  .hx-c{gap:18px;padding:0 13vw}
  .hx-copy p{font-size:15px}
  .hx-logo .us-mark{width:96px;height:96px}
  .hx-copy h1{font-size:30px}
  .hx-acts{flex-direction:column;width:100%;max-width:360px}.hx-acts .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.hx{height:100vh}.hx-hint span{animation:none}}