/* Первый экран. Размеры в единицах контейнера (cqw/cqh), чтобы композиция держалась на любом окне. */
@property --sweep{syntax:"<percentage>";inherits:true;initial-value:50%}
.hero{--mark-fs:300px;--mark-x:11cqw;--girl-scale:1;--mx:0;--my:0;position:relative;margin-top:var(--gap);height:clamp(620px,calc(100svh - 48px),920px);container-type:size;isolation:isolate;background:linear-gradient(180deg,color-mix(in srgb,var(--color-primary) 16%,var(--color-background)) 0%,var(--color-background) 42%,color-mix(in srgb,var(--color-primary) 30%,var(--color-background)) 100%)}

/* дымка: текстура дыма под маской, три места - за героиней, под вордмарком, у пола */
.hero__bg{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.hz{position:absolute;display:block;background:url(../assets/smoke-a.webp) center/100% 100% no-repeat;-webkit-mask-image:radial-gradient(closest-side,#000 24%,transparent 100%);mask-image:radial-gradient(closest-side,#000 24%,transparent 100%);opacity:clamp(0,calc(var(--o,.8) * var(--haze)),1)}
.hz--girl{right:-10cqw;bottom:-22cqh;width:66cqw;height:110cqh;--o:.7}
.hz--mark{left:14cqw;top:-12cqh;width:66cqw;height:62cqh;--o:.4;background-image:url(../assets/smoke-b.webp)}
.hz--floor{left:-4cqw;bottom:-30cqh;width:108cqw;height:60cqh;--o:.5;background-image:url(../assets/smoke-b.webp)}

/* вордмарк: знак K (логотип) + слово OBALT. Знак «вырастает», кружок-голова падает, буквы выезжают из-за правого края знака.
   Покрытие общее: кобальтовое стекло, световая полоса по всему слову (идёт за курсором), жёсткая нижняя кромка. */
.hero__mark{position:absolute;left:var(--mark-x);top:9cqh;z-index:1;margin:0;font-size:var(--mark-fs);line-height:.8;transform:translate3d(calc(var(--mx) * 14px),calc(var(--my) * 8px),0);will-change:transform;animation:sweep 2.4s cubic-bezier(.3,.6,.2,1) 2.55s both}
@keyframes sweep{from{--sweep:-30%}to{--sweep:46%}}
.hm{--shine:calc(var(--sweep) + var(--mx) * 28%);--cap:.7;position:relative;display:inline-flex;align-items:baseline;white-space:nowrap;filter:drop-shadow(0 .05em 0 color-mix(in srgb,var(--color-primary) 34%,var(--color-background)))}
.hm i,.mk-body,.mk-dot{
  background:
    linear-gradient(100deg,transparent calc(var(--shine) - 15%),color-mix(in srgb,#fff calc(var(--mark-gloss) * 100%),transparent) var(--shine),transparent calc(var(--shine) + 15%)),
    linear-gradient(to bottom,color-mix(in srgb,var(--color-text) 72%,var(--color-primary)) 0%,color-mix(in srgb,var(--color-primary) 78%,var(--color-text)) 30%,var(--color-primary) 56%,color-mix(in srgb,var(--color-primary) 44%,var(--color-background)) 100%);
  background-size:var(--ww,100%) 100%,100% 100%;background-position:var(--ox,0) 0,0 0;background-repeat:no-repeat}
.hm i{display:block;font-style:normal;font-weight:900;line-height:.8;padding-top:.04em;color:transparent;-webkit-background-clip:text;background-clip:text}
/* знак: высота равна высоте заглавной, низ стоит на базовой линии букв */
.hm-k{position:relative;flex:none;height:calc(var(--cap) * 1em);aspect-ratio:102/123;margin-right:.05em}
.mk-body,.mk-dot{position:absolute;inset:0;display:block;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.mk-body{-webkit-mask-image:url(../assets/logo-k-body.svg);mask-image:url(../assets/logo-k-body.svg);animation:mk-rise .9s cubic-bezier(.16,1,.3,1) .15s both}
.mk-dot{-webkit-mask-image:url(../assets/logo-k-dot.svg);mask-image:url(../assets/logo-k-dot.svg);animation:mk-drop 1s cubic-bezier(.3,1.55,.5,1) .7s both}
@keyframes mk-rise{from{clip-path:inset(100% 0 0 0);transform:translateY(7%)}to{clip-path:inset(0);transform:none}}
@keyframes mk-drop{0%{transform:translateY(-190%) scaleY(1.25);opacity:0}30%{opacity:1}100%{transform:none}}
/* слово выходит из-за правого края знака: граница-шторка идёт слева направо (буквы появляются по порядку O, B, A, L, T), блок при этом чуть выезжает вправо; буквы не двигаются друг относительно друга и не пересекаются */
.hm-rest{display:inline-flex;align-items:baseline;clip-path:inset(-30% -8% -30% 0);animation:ob-wipe 1.3s cubic-bezier(.45,.05,.2,1) 1.05s both}
.hm-rest-in{display:inline-flex;align-items:baseline;animation:ob-pull 1.3s cubic-bezier(.45,.05,.2,1) 1.05s both}
@keyframes ob-wipe{from{clip-path:inset(-30% 100% -30% 0)}to{clip-path:inset(-30% -8% -30% 0)}}
@keyframes ob-pull{from{transform:translateX(-17%)}to{transform:none}}

/* героиня и пол */
.hero__floor{position:absolute;right:calc(var(--girl-r,1cqw) + var(--girl-w,52cqh) * .06);bottom:2cqh;width:calc(var(--girl-w,52cqh) * .9);height:9cqh;z-index:1;border-radius:50%;background:radial-gradient(closest-side,rgba(2,5,22,.78),transparent);filter:blur(14px)}
.hero__girl{position:absolute;right:var(--girl-r,-1.5cqw);bottom:0;height:calc(var(--girl-h,84cqh) * var(--girl-scale));aspect-ratio:1800/2087;z-index:2;margin:0;transform:translate3d(calc(var(--mx) * -12px),calc(var(--my) * -7px),0);will-change:transform;animation:girl-in 1.1s cubic-bezier(.16,1,.3,1) .35s both}
.hero__girl img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(2,5,22,.55))}
@keyframes girl-in{from{opacity:0;transform:translate3d(calc(var(--mx) * -12px),26px,0) scale(.97);filter:blur(10px)}to{opacity:1;filter:none}}

/* текст слева */
.hero__copy{position:absolute;left:var(--pad-x);bottom:11cqh;z-index:3;width:min(42cqw,560px)}
.hero__what{font-size:clamp(40px,4.6cqw,72px);line-height:.9;color:var(--color-text);animation:rise .8s cubic-bezier(.16,1,.3,1) .55s both}
.hero__lead{margin-top:16px;max-width:30ch;font-size:clamp(17px,1.4cqw,21px);line-height:1.45;color:var(--color-text);opacity:.92;animation:rise .8s cubic-bezier(.16,1,.3,1) .65s both}
.hero__cta{margin-top:26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;animation:rise .8s cubic-bezier(.16,1,.3,1) .85s both}
.hero__fact{max-width:25ch;font-size:15px;line-height:1.35;color:var(--color-text-muted)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* стеклянные плашки */
.hero .pill{position:absolute;z-index:4}
.pill--next{left:41cqw;top:60cqh;animation:slide-r .9s cubic-bezier(.16,1,.3,1) .75s both}
.pill--group{right:2cqw;top:45cqh;animation:slide-l .9s cubic-bezier(.16,1,.3,1) .95s both}
@keyframes slide-r{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes slide-l{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
.hero__city{position:absolute;left:var(--pad-x);bottom:4.5cqh;z-index:3;font-size:17px;letter-spacing:.14em;color:var(--color-text-muted)}

/* планшет и телефон: столбик со своим темпом */
@media (max-width:820px){
  .hero{--mark-fs:24vw;--mark-x:0px;height:auto;min-height:0;container-type:normal;display:flex;flex-direction:column;padding:34px 0 26px}
  .hero__mark{position:relative;top:auto;left:auto;right:auto;padding:0 var(--pad-x)}
  .hz--girl{right:-30vw;bottom:34%;width:120vw;height:120vw}
  .hz--mark{left:-10vw;top:-10vw;width:110vw;height:60vw}
  .hz--floor{left:-20vw;bottom:-20vw;width:140vw;height:70vw}
  .hero__floor{display:none}
  .hero__girl{position:relative;right:auto;bottom:auto;height:auto;width:min(92vw,470px);margin:-6vw 0 0 auto;align-self:flex-end}
  .hero__copy{position:relative;left:auto;bottom:auto;width:auto;padding:0 var(--pad-x);margin-top:6vw}
  .hero__what{font-size:clamp(40px,11.5vw,64px)}
  .hero__cta{flex-direction:column;align-items:stretch;gap:14px}
  .hero__cta .btn{width:100%}
  .hero__fact{max-width:none}
  .hero .pill{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:14px var(--pad-x) 0;padding-right:20px}
  .pill--next{order:5}
  .pill--group{order:6}
  .hero__city{position:relative;left:auto;right:auto;bottom:auto;order:7;margin:22px var(--pad-x) 0;align-self:flex-end}
  .hero__mark{order:1}
  .hero__girl{order:2}
  .hero__copy{order:3}
}
@media (min-width:821px) and (max-width:1100px){
  .pill--next{left:36cqw;top:62cqh}
  .hero__copy{width:min(40cqw,460px)}
}
@media (prefers-reduced-motion:reduce){
  .hm-rest,.hm-rest-in,.mk-body,.mk-dot,.hero__girl,.hero__what,.hero__lead,.hero__cta,.pill--next,.pill--group,.hero__mark{animation:none!important}
  .hero__mark,.hero__girl{transform:none!important}
}