/* Первый экран — перенесён из dist/styles.css (чёрный экран с 3D-маскотом и приветствием).
   Шрифт назван «Inter Hero», чтобы локальный Inter Black не смешивался с Inter из Google Fonts. */
/* block, а не swap: иначе заголовок сначала мелькает запасным Arial и перескакивает (Black предзагружается в index.html) */
@font-face { font-family: 'Inter Hero'; src: url('./assets/inter-medium.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: block; }
@font-face { font-family: 'Inter Hero'; src: url('./assets/inter-black.ttf') format('truetype'); font-style: normal; font-weight: 900; font-display: block; }

/* Фон прозрачный: по бокам от героя видно звёздное небо страницы; сам кадр героя рисует звёзды в hero-distort.js */
.hero-wrap { overflow: clip; }
.hero {
  --u: calc(100cqw / 1512); --accent: #f70;
  /* 1000px: надпись «product designer. Valeriy Yasenko» занимает 60% ширины = колонка второго экрана (600px) */
  /* Высота обрезана до 790 из 982 макета: подписи снизу убраны, «designer» заканчивается на 731 */
  position: relative; width: min(100%, 1000px); aspect-ratio: 1512 / 790; margin-inline: auto;
  /* Текст героя и обводка «designer.» следуют теме: обводка всегда цвета фона, текст — контрастный */
  --hero-ink: #fff; --hero-stroke: var(--bg, #000);
  container-type: inline-size; color: var(--hero-ink);
  font-family: 'Inter Hero', Arial, sans-serif; letter-spacing: 0;
  /* Не dark: при color-scheme: dark Chrome подкладывает под прозрачный WebGL-холст чёрное и скрывает звёзды.
     Свойство наследуется от тёмной темы страницы, поэтому сброс явный. */
  color-scheme: normal;
}
:root[data-theme="light"] .hero { --hero-ink: #000; --hero-stroke: #fff; }/* Светлая тема: серое свечение вместо оранжевого (в WebGL-кадре перекрашивает hero-distort.js в #8a8a8a).
   grayscale(1) от #f70 даёт ≈ #8b8b8b — тот же тон, поэтому при переходе HTML → WebGL цвет не прыгает. */
:root[data-theme="light"] .hero-glow { filter: grayscale(1); }
/* Тень облачка в светлой теме серая, а не тёплая оранжевая */
:root[data-theme="light"] .stage-bubble { filter: drop-shadow(0 8px 16px rgb(0 0 0 / 10%)); }
/* HTML-затемнение под надписью видно, пока грузится WebGL-кадр: на белом фоне чёрный градиент
   давал тёмную полосу. В светлой теме он белый (в WebGL-кадре затемнение гасит только маскота). */
:root[data-theme="light"] .hero-shade { background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff 29.3255%); }.hero button { -webkit-tap-highlight-color: transparent; }
/* Свечение — hero-glow-wide.svg (полотно 1400×1300 с запасом под размытие; центр круга на прежнем месте 756/422u).
   Прежний hero-glow.svg (1014×929) обрезал размытие краем картинки — на фоне #0C0C0C был виден вертикальный край.
   Маска нижнего края та же по месту: 40%/76% старой картинки = 46.12%/71.85% новой. */
.hero-glow { position: absolute; left: calc(56 * var(--u)); top: calc(-228 * var(--u)); width: calc(1400 * var(--u)); height: calc(1300 * var(--u)); pointer-events: none; mask-image: linear-gradient(#000 46.12%, transparent 71.85%); }
.hero-character { position: absolute; left: calc(577 * var(--u)); top: calc(182 * var(--u)); width: calc(358 * var(--u)); height: calc(616 * var(--u)); }
.mascot-fallback { display: block; width: 100%; height: auto; }
.mascot-canvas { display: block; position: absolute; left: -35%; top: -18%; width: 170%; height: 124%; opacity: 0; pointer-events: none; }
.has-3d .mascot-canvas { opacity: 1; }
/* Загрузка без мельканий: PNG-заглушка маскота видна только если 3D недоступно (.no-3d),
   иначе маскот проявляется уже в 3D. Переход HTML-слоёв в WebGL-кадр — плавный, они совпадают по виду. */
.mascot-fallback { opacity: 0; transition: opacity .5s ease; }
.hero.no-3d .mascot-fallback { opacity: 1; }
.hero-fx { opacity: 0; transition: opacity .6s ease; }
.hero.has-fx .hero-fx { opacity: 1; }
.hero :is(.hero-glow, .hero-shade, .mascot-canvas) { transition: opacity .6s ease; }
/* Текст не перекрёстно: при одновременном исчезновении и появлении надпись на миг бледнела бы на ~25%.
   WebGL-текст проявляется поверх совпадающего HTML-текста, а тот скрывается, когда кадр проявился целиком. */
.hero.has-fx :is(.hero-title, .designer-name) { transition: opacity 0s linear .6s; }
/* Fade the render itself: a mask on its narrower parent clips head turns. */
.hero-mascot .mascot-fallback { mask-image: linear-gradient(#000 44%, transparent 76%); }
.hero-mascot .mascot-canvas { mask-image: linear-gradient(#000 50%, transparent 75.8065%); }
/* Эффект искажения (hero-distort.js): весь кадр рисуется в .hero-fx, DOM-слои остаются прозрачными. */
.hero-fx { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.hero.has-fx :is(.hero-glow, .hero-shade, .hero-title, .designer-name, .hero-footer, .hero-mascot .mascot-canvas) { opacity: 0; }
.hero-shade { position: absolute; z-index: 1; left: calc(226 * var(--u)); top: calc(441 * var(--u)); width: calc(1079 * var(--u)); height: calc(400 * var(--u)); background: linear-gradient(to bottom, transparent, var(--bg, #000) 29.3255%); filter: blur(calc(23.9 * var(--u))); pointer-events: none; }
/* Надпись уменьшена на 12% от макета и сдвинута на 59 единиц вправо: по центру экрана (оси маскота)
   стоит вся надпись «product designer. Valeriy Yasenko» вместе с именем.
   Масштаб задан размерами шрифта, а не transform: hero-distort.js перерисовывает текст по computed font-size. */
.hero-title { margin: 0; font-size: calc(130.76 * var(--u)); font-weight: 900; line-height: calc(158.4 * var(--u)); letter-spacing: 0; }
.hero-title > span { position: absolute; z-index: 2; display: block; white-space: nowrap; }
.title-product { left: calc(510.9 * var(--u)); top: calc(481.5 * var(--u)); }
.title-designer { left: calc(356 * var(--u)); top: calc(573 * var(--u)); -webkit-text-stroke: calc(23.1 * var(--u)) var(--hero-stroke); paint-order: stroke fill; }
.hero .accent { color: var(--accent); }
.designer-name { position: absolute; z-index: 2; left: calc(986 * var(--u)); top: calc(628.4 * var(--u)); margin: 0; font-size: calc(33.91 * var(--u)); font-weight: 900; line-height: calc(41.36 * var(--u)); }
.designer-name span { display: block; }
.designer-name span + span { margin-top: calc(-14.96 * var(--u)); margin-left: calc(22.88 * var(--u)); }

/* Облачко приветствия */
.stage-bubble { position: absolute; z-index: 3; width: max(280px, calc(370 * var(--u))); padding: clamp(20px, calc(26 * var(--u)), 26px); background: #fff; color: #111; filter: drop-shadow(0 8px 12px rgb(119 43 0 / 10%)); }
.stage-bubble[hidden] { display: none; }
.stage-bubble h2 { margin: 0 0 12px; font-size: clamp(26px, calc(34 * var(--u)), 34px); font-weight: 900; line-height: 1.05; letter-spacing: -.035em; }
.stage-bubble p { margin: 0; font-size: clamp(14px, calc(16 * var(--u)), 16px); font-weight: 500; line-height: 1.45; text-wrap: pretty; letter-spacing: 0; }
.stage-bubble-tail { position: absolute; top: calc(100% - 1px); width: 52px; height: 33px; fill: #fff; pointer-events: none; }
/* Ширина фиксированная: в единицах макета на герое шириной 1000px облачко сжималось до 240px и текст рвался на 6 строк */
.hero-bubble { top: calc(130 * var(--u)); bottom: auto; left: calc(940 * var(--u)); width: 268px; padding: 20px; border-radius: 32px 32px 32px 10px; transform-origin: 12% 100%; rotate: 2deg; }
/* Облачко набрано шрифтом сайта (Inter 400/500, трекинг -.02em, как во втором блоке), а не Inter Black героя */
.hero-bubble { font-family: var(--sans); letter-spacing: -.02em; }
/* Крестика нет (облачко нельзя закрыть), поэтому справа у заголовка отступ не резервируется */
.hero-bubble h2 { margin: 0 0 8px; font-family: var(--sans); font-weight: 500; font-size: 20px; line-height: 1.1; letter-spacing: -.02em; }
.hero-bubble p { font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.4; letter-spacing: -.02em; color: rgba(0, 0, 0, .63); }
.hero-bubble .stage-bubble-tail { left: 20px; right: auto; transform: scaleX(-1); }

/* Под первым экраном второму блоку не нужен большой отступ сверху */
.hero-wrap ~ main.wrap { padding-top: 32px; }

@media (max-width: 1024px) {
  /* Не выше 80px: иначе облачко заходит на кнопку темы в верхней панели */
  .hero-bubble { top: max(calc(76 * var(--u)), 80px); bottom: auto; left: auto; right: 26px; width: 264px; padding: 18px; border-radius: 28px 28px 28px 10px; transform-origin: 12% 100%; }
  .hero-bubble h2 { font-size: 19px; }
  .hero-bubble p { font-size: 14px; line-height: 1.4; }
  .hero-bubble .stage-bubble-tail { top: 50%; bottom: auto; left: -34px; transform: rotate(90deg); width: 42px; height: 26px; }
}
@media (max-width: 700px) {
  /* 16 октября 2026, по просьбе владельца облачко стоит НАД маскотом: облачко 88–234px + хвостик 26px,
     верх маскота (--mt) всегда на 268px. Маскот шириной 46% растёт с экраном (высота ≈ 79cqw), поэтому
     заголовок, имя, затенение и свечение привязаны к его размеру через --cy = --mt + 44px + 35.46cqw,
     иначе на широком телефоне голова уезжала под текст. Пропорции — как в проверенном кадре 390px */
  .hero { height: calc(377px + 61.2vw); aspect-ratio: auto; --mt: 268px; --cy: calc(var(--mt) + 44px + 35.46cqw); }
  /* Свечение по центру маскота */
  .hero-glow { left: -25.94%; top: calc(var(--mt) - 42.75cqw); width: 151.87%; max-width: none; height: auto; }
  .hero-character { left: 27%; top: var(--mt); width: 46%; height: auto; }
  .hero-shade { left: -5%; top: calc(var(--cy) - 44px - 2.55cqw); width: 110%; height: 36.35cqw; filter: blur(2.17cqw); }
  /* Те же −12%, вся надпись с именем по центру экрана */
  .hero-title { font-size: 11.88cqw; line-height: 1.2114; }
  .title-product { left: 26.29%; top: calc(var(--cy) - 44px + 1.14cqw); }
  .title-designer { left: 15.73%; top: calc(var(--cy) - 44px + 9.5cqw); -webkit-text-stroke-width: 2.09cqw; }
  .designer-name { left: 65.01%; top: calc(var(--cy) - 5.3px + 17.86cqw); font-size: 3.96cqw; line-height: 1.21955; }
  .designer-name span + span { margin-top: -1.75cqw; margin-left: 2.67cqw; }
  /* Облачко над маскотом, сразу под верхней панелью (она заканчивается на 72px); хвостик снизу смотрит вниз-вправо, на голову */
  .hero-bubble { top: 88px; bottom: auto; left: 24px; right: 24px; width: min(264px, calc(100% - 48px)); margin-inline: auto; padding: 18px; border-radius: 32px; transform-origin: 40% 100%; rotate: -1deg; }
  .hero-bubble .stage-bubble-tail { top: calc(100% - 1px); bottom: auto; left: 68px; transform: none; width: 42px; height: 26px; }
}