/* первый экран: бюст в двух лучах, заголовок в нижней левой трети */
.hero {
  --hh: clamp(640px, calc(100svh - 20px), 1040px);
  --fw: calc(var(--hh) * 1.3393);
  --fx-x: 0px; --fx-y: 0px;
  --lv-x: 0px; --lv-y: 0px; --lg-x: 0px; --lg-y: 0px;
  --vx: 31%; --vy: 22%; --gx: 76%; --gy: 82%; --lit: .16;
  position: relative; height: var(--hh); overflow-x: clip; isolation: isolate;
}

/* лучи: два направленных конуса света, фиолетовый сверху слева и золотой снизу справа */
.hero-lights { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 84%, transparent 100%); }
.hl { position: absolute; inset: 0; will-change: transform, opacity; }
.hl-v { transform: translate3d(var(--lv-x), var(--lv-y), 0); }
.hl-g { transform: translate3d(var(--lg-x), var(--lg-y), 0); }
.hl .cone { position: absolute; inset: -6%; filter: blur(9px); }
.hl-v .cone {
  background: conic-gradient(from 94deg at 6% 6%, transparent 0deg, color-mix(in srgb, var(--light-violet) 40%, transparent) 4deg, color-mix(in srgb, var(--light-violet) 30%, transparent) 14deg, color-mix(in srgb, var(--light-violet) 10%, transparent) 25deg, transparent 32deg);
  -webkit-mask-image: radial-gradient(105% 105% at 6% 6%, #000 0, #000 30%, transparent 78%); mask-image: radial-gradient(105% 105% at 6% 6%, #000 0, #000 30%, transparent 78%);
}
.hl-g .cone {
  background: conic-gradient(from 288deg at 94% 94%, transparent 0deg, color-mix(in srgb, var(--light-gold) 32%, transparent) 4deg, color-mix(in srgb, var(--light-gold) 24%, transparent) 14deg, color-mix(in srgb, var(--light-gold) 8%, transparent) 25deg, transparent 32deg);
  -webkit-mask-image: radial-gradient(105% 105% at 94% 94%, #000 0, #000 30%, transparent 78%); mask-image: radial-gradient(105% 105% at 94% 94%, #000 0, #000 30%, transparent 78%);
}

/* фигура */
.hero-fig { position: absolute; z-index: 1; bottom: 0; left: calc(62.5% - var(--fw) / 2); width: var(--fw); height: var(--hh); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 54%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 54%, transparent 100%); }
.fig-shift { position: absolute; inset: 0; transform: translate3d(var(--fx-x), var(--fx-y), 0); will-change: transform; }
.bust { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.fig-lit {
  position: absolute; inset: 0; opacity: var(--lit); mix-blend-mode: screen;
  -webkit-mask: url("../assets/bust-2000.webp") center / 100% 100% no-repeat; mask: url("../assets/bust-2000.webp") center / 100% 100% no-repeat;
  background:
    radial-gradient(36% 40% at var(--vx) var(--vy), color-mix(in srgb, var(--light-violet) 62%, transparent), transparent 72%),
    radial-gradient(32% 38% at var(--gx) var(--gy), color-mix(in srgb, var(--light-gold) 56%, transparent), transparent 72%);
}

/* левая планка */
.hero-rail { position: absolute; z-index: 3; left: var(--pad); top: 30%; display: grid; gap: 14px; justify-items: start; }
.hero-rail .bar { width: 30px; height: 3px; background: var(--color-focus-ring); }
.hero-rail a { position: relative; display: block; width: 5px; height: 5px; background: color-mix(in srgb, var(--color-text) 46%, transparent); transition: background-color .3s, transform .4s var(--ease-out); text-decoration: none; }
.hero-rail a::before { content: ""; position: absolute; inset: -9px -12px; }
.hero-rail a:hover, .hero-rail a[aria-current="true"] { background: var(--color-text); transform: scale(1.5); }
.hero-rail a span { position: absolute; left: 20px; top: 50%; transform: translate(-6px, -50%); opacity: 0; white-space: nowrap; font: 400 11px/1 var(--ff-mono); letter-spacing: .14em; text-transform: uppercase; transition: opacity .3s, transform .4s var(--ease-out); pointer-events: none; }
.hero-rail a:hover span { opacity: 1; transform: translate(0, -50%); }

/* заголовок */
.hero-title { position: absolute; z-index: 4; left: calc(var(--pad) + 1.5vw); bottom: clamp(36px, 7vh, 80px); font-size: clamp(54px, 9vw, 170px); line-height: .92; letter-spacing: -.018em; }
.hero-title .ln { display: block; overflow: hidden; padding: .02em .1em .1em 0; margin-bottom: -.06em; }
.hero-title .ln > span { display: block; }
.hero-title .ln2 { padding-left: .72em; }
.hero-title .outline { color: transparent; -webkit-text-stroke: 1.6px var(--color-text); paint-order: stroke fill; }

/* лид и кнопка */
.hero-side { position: absolute; z-index: 4; right: var(--pad); top: 32%; width: clamp(210px, 16vw, 290px); display: grid; gap: 20px; }
.hero-side .lead { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.5; color: color-mix(in srgb, var(--color-text) 86%, transparent); }
.hero-side .cta-row { display: grid; gap: 16px; justify-items: start; }

/* вход */
.js:not(.is-in) .hero-fig .fig-shift { opacity: 0; filter: brightness(.25) blur(14px); transform: translate3d(0, 28px, 0) scale(1.03); }
.js.is-in .hero-fig .fig-shift { opacity: 1; filter: none; transition: opacity 1.4s var(--ease-out) .15s, filter 1.6s var(--ease-out) .15s; }
.js:not(.is-in) .fig-lit { opacity: 0; }
.js.is-in .fig-lit { transition: opacity 1.6s ease .9s; }
.js:not(.is-in) .hl-v, .js:not(.is-in) .hl-g { opacity: 0; }
.js.is-in .hl-v { opacity: 1; transition: opacity 1.5s ease .1s; }
.js.is-in .hl-g { opacity: 1; transition: opacity 1.8s ease .75s; }
.js:not(.is-in) .hero-title .ln > span { transform: translateY(108%); }
.js.is-in .hero-title .ln > span { transform: none; transition: transform 1s var(--ease-out); }
.js.is-in .hero-title .ln1 > span { transition-delay: .5s; }
.js.is-in .hero-title .ln2 > span { transition-delay: .62s; }
.js.is-in .hero-title .ln3 > span { transition-delay: .74s; }
.js:not(.is-in) .hero-side > *, .js:not(.is-in) .hero-rail > * { opacity: 0; transform: translateY(18px); }
.js.is-in .hero-side > *, .js.is-in .hero-rail > * { opacity: 1; transform: none; transition: opacity .9s ease, transform 1s var(--ease-out); }
.js.is-in .hero-side > :nth-child(1) { transition-delay: .95s; }
.js.is-in .hero-side > :nth-child(2) { transition-delay: 1.05s; }
.js.is-in .hero-side > :nth-child(3) { transition-delay: 1.15s; }
.js.is-in .hero-rail > * { transition-delay: 1.1s; }
.js:not(.is-in) .site-header .sh-wrap { opacity: 0; }
.js.is-in .site-header .sh-wrap { opacity: 1; transition: opacity .8s ease .3s; }

@media (max-width: 1200px) {
  .hero-fig { left: calc(57% - var(--fw) / 2); }
  .hero-side { top: 26%; }
}

@media (max-width: 1100px) {
  .hero-rail { display: none; }
  .hero-title { font-size: clamp(54px, 11.4vw, 150px); }
  .hero-side { top: 38%; width: clamp(200px, 22vw, 260px); }
}

@media (max-width: 900px) {
  .hero { --hh: auto; --fw: min(150vw, 1000px); height: auto; min-height: calc(100svh - 20px); display: flex; flex-direction: column; padding-top: var(--hdr-h); padding-bottom: 44px; overflow: clip; }
  .hero-fig { position: relative; left: 50%; bottom: auto; width: var(--fw); height: calc(var(--fw) / 1.3393); margin-left: calc(var(--fw) / -2 + 3vw); margin-top: -2vw; flex: none; }
  .hero-rail { display: none; }
  .hero-title { position: relative; left: auto; bottom: auto; margin: calc(var(--fw) * -.17) 0 0; padding: 0 var(--pad); font-size: clamp(54px, 15vw, 130px); }
  .hero-title .ln2 { padding-left: .6em; }
  .hero-side { position: relative; right: auto; top: auto; width: auto; padding: 22px var(--pad) 0; max-width: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .js:not(.is-in) .hero-fig .fig-shift { opacity: 1; filter: none; transform: none; }
  .js:not(.is-in) .hero-title .ln > span, .js:not(.is-in) .hero-side > *, .js:not(.is-in) .hero-rail > * { opacity: 1; transform: none; }
  .js:not(.is-in) .hl-v, .js:not(.is-in) .hl-g, .js:not(.is-in) .fig-lit { opacity: 1; }
}