/* ============================================================
   Hero-секция «ПЁТР ЮШКИН»
   Чистый CSS, без сборщиков и зависимостей.
   ЖЁЛТОГО КРУГА В ЭТОМ МАКЕТЕ НЕТ.

   Анимация играет ОДИН РАЗ при загрузке и не повторяется.
   Порядок:
     0.50с — фигура
     1.20с — «ПЁТР» и «ЮШКИН» с двух сторон
     2.10с — рукописное «Поворотный момент» (последним)
   ============================================================ */

.hy-root {
  /* Сцена считалась от полной высоты окна, поэтому макушка фигуры доходила
     до самого верха и оказывалась под фиксированной навигацией.

     Тонкость: фигура НЕ вписана в рамку сцены — её высота ~108.6% высоты
     сцены, то есть примерно 5.6% выходит вверх за пределы .hy-stage
     (снизу она так же выступает на 2.98%, это и задано в .hy-subject).
     Поэтому мало начать сцену под меню — нужно ещё компенсировать выступ.

     Отсюда формула: отступ = (нижняя граница меню + воздух + 0.056·высота
     окна) / 1.056, что после сокращения даёт множители ниже. Макушка при
     любой высоте окна остаётся примерно на 16px ниже навигации.

     Крутить высоту героя здесь: больше --hero-clearance — мельче фигура. */
  --hero-clearance: calc(var(--nav-h) + 16px);
  --hero-top-gap: calc(var(--hero-clearance) * 0.947 + 5.3vh);

  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 90% 80% at 50% 45%,
              #232326 0%, #0a0a0b 68%, #000 100%);
}

.hy-stage {
  position: relative;
  width: min(1440px, 96vw);
  aspect-ratio: 1672 / 941;
  margin: 0 auto;
}

/* На десктопе сцену ограничивала ширина, хотя по высоте оставался запас:
   по краям пустовало ~125px, сверху и снизу — меньше. Считаем размер от
   высоты окна и упираемся в ширину только при нехватке места. Пропорция
   1672/941 не меняется, композиция та же — просто крупнее.
   На узких экранах правило не работает: там баннер и так во всю ширину. */
@media (min-width: 900px) {
  .hy-root {
    padding-top: var(--hero-top-gap);
  }

  .hy-stage {
    width: min((100vh - var(--hero-top-gap)) * 1672 / 941, 100vw);
    max-width: none;
    /* .hy-stage — флекс-элемент, и со стандартным flex-shrink:1 он
       ужимался до ширины окна, игнорируя расчёт выше */
    flex: none;
  }
}

/* --- 2. Имя и фамилия --------------------------------------- */
.hy-word {
  position: absolute;
  bottom: 30.82%;
  height: auto;
  opacity: 0;
  z-index: 2;
  filter: drop-shadow(0 0 26px rgba(255,255,255,.28));
}

.hy-w1 {
  left: 7.3%;
  width: 31.94%;
  transform: translateX(-70px);
  animation: hy-slide .7s cubic-bezier(.22,1,.36,1) 1.2s forwards;
}

.hy-w2 {
  right: 6.34%;
  width: 48.74%;
  transform: translateX(70px);
  animation: hy-slide .7s cubic-bezier(.22,1,.36,1) 1.2s forwards;
}

/* --- 1. Фигура ---------------------------------------------- */
.hy-subject {
  position: absolute;
  left: 48.71%;
  bottom: -2.98%;
  width: 78%;
  height: auto;
  z-index: 1;
  opacity: 0;
  transform: translateX(-50%) translateY(46px);
  animation: hy-rise 1s cubic-bezier(.22,1,.36,1) .5s forwards;
}

.hy-hand {
  position: absolute;
  left: 48.71%;
  bottom: -2.98%;
  width: 78%;
  height: auto;
  z-index: 4;
  opacity: 0;
  transform: translateX(-50%) translateY(46px);
  animation: hy-rise 1s cubic-bezier(.22,1,.36,1) .5s forwards;
}

.hy-hero-actions {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: max(1.5rem, 4svh);
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  width: min(calc(100% - 2 * var(--gutter)), 30rem);
  transform: translateX(-50%);
}

.hy-hero-actions .btn {
  justify-content: center;
  min-width: 0;
  flex: 1 1 0;
  padding: 0.8rem 1rem;
  font-size: 0.92rem;
  white-space: normal;
  text-align: center;
}

.hy-hero-note { display: none; }

/* --- 3. Рукописная надпись ---------------------------------- */
/* Привязана НЕ К ЛЕВОМУ контуру: линия упирается в последнюю букву
   фамилии и уходит вниз-влево, под фигуру.
   Точка вращения — правый нижний угол.

   ВАЖНО: наклон повторён в обоих кадрах анимации. Если убрать
   rotate из keyframes, transform перезапишет поворот и надпись
   ляжет горизонтально.

   Крутить положение здесь: */
.hy-turn {
  --turn-right:  1%;    /* насколько правый конец отступает справа */
  --turn-bottom: 42%;   /* высота правого конца от низа (было 32%: при крупном кегле левый конец уходил под край) */
  --turn-angle: -28deg; /* наклон; больше = круче вверх            */
  --turn-size:  min(5.6vw, 9svh); /* кегль (было 4.4vw - по просьбе 2026-09-15 крупнее); 9svh - потолок для низких экранов 16:9, иначе левый конец уходит под нижний край */

  position: absolute;
  right: var(--turn-right);
  bottom: var(--turn-bottom);
  z-index: 5;

  font-family: 'Caveat', 'Segoe Script', cursive;
  font-weight: 700;
  font-size: var(--turn-size);
  line-height: 1.15;
  color: #F08A24;
  white-space: nowrap;
  letter-spacing: .01em;
  text-shadow: 0 2px 16px rgba(0,0,0,.7);
  pointer-events: none;

  transform-origin: right bottom;
  transform: rotate(var(--turn-angle)) translateY(18px);
  opacity: 0;
  animation: hy-turn-in .9s cubic-bezier(.22,1,.36,1) 2.1s forwards;
}

@keyframes hy-slide { to { opacity: 1; transform: translateX(0); } }
@keyframes hy-rise  { to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes hy-turn-in {
  from { opacity: 0; transform: rotate(var(--turn-angle)) translateY(18px); }
  to   { opacity: 1; transform: rotate(var(--turn-angle)) translateY(0); }
}

/* На узких и вытянутых экранах надпись крупнее и положе */
@media (max-width: 820px) {
  /* Первый экран телефона должен показывать ТОЛЬКО героя.
     Баннер 16:9 на узком экране — низкая полоса (на 430px ширины это
     ~232px высоты), и от отступов 17vh/15vh секция получалась около 530px
     из 932: снизу в кадр залезал портрет из следующего блока.

     Поэтому высоту задаём не отступами, а нижней границей во весь экран,
     а сцену центрируем флексом (он уже на .hy-root). Высота auto оставлена
     намеренно: на альбомной ориентации баннер выше экрана, и секция должна
     вырасти под него, а не обрезать.

     svh — высота вьюпорта при ВИДИМОЙ адресной строке. С обычным 100vh на
     мобильных Safari и Chrome секция вышла бы выше видимой области; здесь
     это не сломало бы кадр, но появился бы лишний скролл в никуда.
     Строка с 100vh стоит первой как запасной вариант для старых браузеров.

     Отступ сверху — под фиксированное меню, снизу больше верхнего: так
     баннер садится чуть выше геометрического центра, как и принято в
     первом экране. */
  .hy-root {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--nav-h) + 3vh) 0 4svh;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.75rem, 5svh, 2.5rem);
  }

  /* 96vw оставляли поля по бокам, которые на всю высоту экрана читаются
     как случайные. Берём всю ширину: у PNG по краям и так ~7% прозрачного
     поля, буквы не режутся. */
  .hy-stage {
    width: 100vw;
    flex: none;
  }

  .hy-hero-actions {
    position: absolute;
    left: 50%;
    bottom: calc(max(1rem, 4svh) + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    margin: 0;
  }

  .hy-hero-actions {
    gap: 0.55rem;
    flex-direction: column;
    width: min(calc(100vw - 2 * var(--gutter)), 24rem);
  }

  .hy-hero-actions .btn {
    flex: none;
    width: 100%;
    padding: 0.75rem 0.6rem;
    font-size: 0.84rem;
  }

  .hy-hero-note {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    translate: 0 -1rem;
    display: block;
    flex: none;
    width: calc(100% - 2 * var(--gutter));
    margin: 0;
    opacity: calc(1 - clamp(0, (var(--s) - 105) / 15, 1));
    color: var(--fg-muted);
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
  }

  .hy-turn {
    --turn-angle: -26deg;
    --turn-size: 9vw;   /* было 7.1vw - по просьбе 2026-09-15 крупнее */
    --turn-right: 2.5%; /* крупная надпись не выходит за правый край экрана */
    --turn-bottom: 29%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hy-word    { animation: none; opacity: 1; transform: translateX(0); }
  .hy-subject, .hy-hand { animation: none; opacity: 1; transform: translateX(-50%); }
  .hy-turn    { animation: none; opacity: 1;
                transform: rotate(var(--turn-angle)); }
}