/* На главной шапка лежит ПОВЕРХ хиро: в потоке она добавляла свою высоту к 100svh,
   и нижняя строка хиро уезжала за нижний край экрана. На остальных страницах
   шапка остаётся в потоке. */
.home .site-head { position: absolute; top: 0; left: 0; right: 0; }

/* Хиро главной — направление F: лотос вырастает из воды и тянется к курсору.
   Подключается только на главной. Стили лежат здесь, а НЕ инжектятся скриптом:
   CSP сайта — style-src 'self' без 'unsafe-inline', инлайновый <style> он гасит молча. */

.hero {
  position: relative;
  display: block;
  height: 100svh;
  overflow: clip;
  background: var(--paper);
  color: var(--ink);
  perspective: 1400px;
}

.hero-stage { position: relative; width: 100%; height: 100svh; overflow: hidden; }
.hero-scene { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }

/* имя студии — дальний план, за водой; scale возвращает размер, съеденный перспективой
   (1400 / 1560), точка опоры совпадает с точкой схода: верх строки 55svh, центр сцены 50svh */
.hero-name {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 55%;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: clamp(56px, 13.5vw, 224px);
  letter-spacing: .2em;
  padding-left: .2em;
  opacity: .92;
  color: var(--ink);
  transform: translateZ(-160px) scale(1.1143);
  transform-origin: 50% calc(50svh - 55svh);
  /* Проявление — CSS-анимация, а НЕ класс от скрипта: пока имя ждало JS,
     именно оно было самым большим элементом первого экрана, и мобильный LCP
     упирался в 2,4 с при бюджете 1,5. */
  animation: hero-name-settle 2.6s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes hero-name-settle {
  from { opacity: .06; letter-spacing: .34em; padding-left: .34em; }
  to { opacity: .92; letter-spacing: .2em; padding-left: .2em; }
}

.hero-city {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: calc(55% + clamp(56px, 13.5vw, 224px) * .92);
  text-align: center;
  animation: hero-city-in 1.4s ease 1.2s both;
}

@keyframes hero-city-in { from { opacity: 0; } to { opacity: 1; } }

/* акварель: кадры роста, вода и растения — один прямоугольник 567×760 */
.hero-plate {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  height: min(97svh, 1180px);
  aspect-ratio: 567 / 760;
  --ph: min(97svh, 1180px);
  --pw: calc(min(97svh, 1180px) * .746);
  transform: translateX(-50%);
  transform-style: preserve-3d;
}

.hero-plate > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* готовый лотос для тех, у кого нет JS: с JS его закрывает canvas и он не нужен */
.js-hero .hero-still { display: none; }

/* кадр ролика лежит поверх готовой 3D-сцены и растворяется: конец ролика и разбор
   акварели на части сходятся не идеально, мгновенная подмена читалась бы прыжком */
.hero-frames { transition: opacity .5s cubic-bezier(.2, .7, .2, 1); }
.hero.is-3d .hero-frames { opacity: 0; }

/* растения на 40px ближе воды; точка опоры — точка схода перспективы, иначе слой
   уезжает вниз на ~8px и подмена кадра на 3D выглядит прыжком */
.hero-plants { transform: translateZ(40px) scale(.9714); transform-origin: 50% calc(100% - 50svh); }
.hero-plants canvas { width: 100%; height: 100%; display: block; }

/* вода продолжается на всю ширину экрана: две половины по бокам акварели, середину
   оставляем самой акварели с отражениями стеблей — две полупрозрачные воды наложились бы */
.hero-pond {
  inset: auto;
  left: -200vw;
  right: -200vw;
  width: auto;
  height: auto;
  top: 80.444%;
  bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 58%, transparent);
  mask-image: linear-gradient(to bottom, #000 0 58%, transparent);
  transform: translateZ(-.6px);
}

.hero-pond i {
  position: absolute;
  top: 0;
  height: calc(var(--ph) * .12444);
  background: url('../img/lotus/pond.webp') repeat-x top left / auto 100%;
}

.hero-pond .deep { position: absolute; left: 0; right: 0; top: calc(var(--ph) * .12444); bottom: 0; background: #c7c5bb; }

.hero-pond .l {
  left: 0;
  width: calc(200vw + var(--pw) * .15);
  background-position-x: calc(200vw + var(--pw) * .095);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--pw) * .095), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--pw) * .095), transparent);
}

.hero-pond .r {
  right: 0;
  width: calc(200vw + var(--pw) * .15);
  background-position-x: calc(-1 * var(--pw) * .755);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 calc(var(--pw) * .095));
  mask-image: linear-gradient(to right, transparent, #000 calc(var(--pw) * .095));
}

/* края воды внутри акварели растворяются в полосу: тон у ролика и у полосы чуть разный.
   У кадров маска двухслойная (верх непрозрачный, низ с боковым растворением),
   у воды — только боковое: сама картинка теперь и есть полоса. */
.hero-frames {
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(to right, transparent 5.5%, #000 15%, #000 85%, transparent 94.5%);
  mask-image: linear-gradient(#000, #000), linear-gradient(to right, transparent 5.5%, #000 15%, #000 85%, transparent 94.5%);
  -webkit-mask-size: 100% 80.444%, 100% 19.556%;
  mask-size: 100% 80.444%, 100% 19.556%;
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* картинка воды — только сама полоса (было: во всю акварель, 80% прозрачных пикселей,
   и именно она оказывалась самым тяжёлым элементом первого экрана) */
.hero-water {
  top: 80.526%;
  bottom: auto;
  height: 12.369%;
  -webkit-mask-image: linear-gradient(to right, transparent 5.5%, #000 15%, #000 85%, transparent 94.5%);
  mask-image: linear-gradient(to right, transparent 5.5%, #000 15%, #000 85%, transparent 94.5%);
}

/* строка под лотосом: чем занимаемся и ссылка на работы */
.hero-foot {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-block: 28px;
  color: var(--ink);
}

.hero-foot p { margin: 0; max-width: 26em; font-size: 13px; line-height: 1.55; }
.hero-foot a { text-decoration: none; white-space: nowrap; }
.hero-foot a:hover { text-decoration: underline; text-underline-offset: 6px; }

@media (max-width: 780px) {
  .hero-plate { height: 50svh; bottom: 28svh; --ph: 50svh; --pw: calc(50svh * .746); --pond-below: 28svh; }
  .hero-pond { bottom: calc(-1 * var(--pond-below, 0px)); }
  .hero-plants { transform-origin: 50% calc(100% - 50svh + var(--pond-below, 0px)); }
  .hero-name { top: 19%; font-size: 15vw; }
  .hero.is-on .hero-name { letter-spacing: .12em; padding-left: .12em; }
  .hero-city { top: calc(19% - 26px); }
  .hero-foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-name, .hero-city { animation: none; opacity: .92; }
  .hero-city { opacity: 1; }
  .hero-frames { transition: none; }
}