/* =============================================================================
   hero — секція 01. Перший екран на 390, 768 і 1440, тому вантажиться
   блокуючи рендер (спец. 003 §9).

   Секція навмисно БЕЗ руху входу за жодних умов (спец. 003 §15): жодного
   @keyframes, жодного opacity: 0, жодного transition поза успадкованим .btn.
   LCP-елемент — h1.hero__title, статичний текстовий вузол.
   ============================================================================= */

.hero {
  position: relative;
  padding-block: var(--space-xl) var(--space-3xl);
}

/* Порушення сітки B1 (art-direction §8, №5): hero не використовує --wrap-max.
   Смуга обмежена лише --wrap-pad з обох боків і колонкою рейки, яку ставить
   body. На 1440 це 1250px проти 1184px усередині .wrap. Поле, а не padding —
   щоб getBoundingClientRect().width повертав саме доступну міру рядка. */
.hero__inner {
  margin-inline: var(--wrap-pad);
}

.hero__eyebrow {
  margin-block-end: var(--space-md);
}

.hero__title {
  margin-block-end: var(--space-md);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  max-inline-size: none;
  text-wrap: wrap;
}

/* Нижче 64rem рядки inline і переносяться природно; від 64rem — три блоки
   з явними переносами, щоб підміна шрифту не змінювала їх кількість. */
.hero__line {
  display: inline;
}

/* ---- формула у вікні показника --------------------------------------------- */

.hero__formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  max-inline-size: none;
}

.hero__formula-node {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding: var(--readout-window-pad);
  border: var(--readout-window-border);
  border-radius: var(--radius-readout);
  background: var(--surface-sunken);
  box-shadow: var(--shadow-inset-panel);
  font-family: var(--font-readout);
  font-size: var(--fs-small);
  font-weight: var(--fw-readout);
  line-height: var(--lh-readout);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

/* Блік скла поверх вікна показника. */
.hero__formula-node::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 100%;
  background: var(--specular);
  pointer-events: none;
}

.hero__formula-arrow {
  font-family: var(--font-readout);
  font-size: var(--fs-small);
  line-height: var(--lh-readout);
  color: var(--accent);
}

/* ---- split 5/7 -------------------------------------------------------------- */

.hero__split {
  display: grid;
  gap: var(--space-2xl);
  margin-block-start: var(--space-lg);
}

.hero__lead {
  max-inline-size: var(--measure-narrow);
}

.hero__actions {
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
}

.hero__actions .btn {
  justify-content: center;
}

.hero__note {
  margin-block-start: var(--space-2xs);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ---- ілюстрація приладу ------------------------------------------------------ */

.hero__figure {
  inline-size: var(--hero-figure-inline);
}

.hero__gauge {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 9 / 7;
  color: var(--text-secondary);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* ---- живий прилад -----------------------------------------------------------
   Модуль gauge.js пише рівно одну властивість --gauge-angle. Усе інше обертає
   CSS: стрілка, активна поділка і клин, що відкриває залиту дугу. Вісь у всіх
   одна — центр дуги (360 400) у координатах viewBox, виведений із самого шляху
   M143.5 275A250 250: хорда 433 при радіусі 250 дає центр на 125 нижче кінців.

   Значення за замовчуванням = позиція спокою. Без JS стрілка стоїть на ній, а
   не зривається в нуль: невизначена змінна зробила б transform недійсним. */

.hero__gauge {
  --gauge-angle: var(--gauge-pos-1);
  /* Геометрія самого малюнка, не дизайнерське рішення: активна поділка
     накреслена на -40°, тому щоб опинитися під стрілкою, вона довертається на
     +40°. Змінюється тільки разом із шляхом .hero__gauge-live. */
  --gauge-live-offset: 40deg;
}

.hero__gauge-needle,
.hero__gauge-live,
.hero__gauge-wedge {
  transform-box: view-box;
  transform-origin: 360px 400px;
  transform: rotate(var(--gauge-angle));
}

/* Активна поділка креслиться на -40° і їде за стрілкою тим самим кутом, тому
   її власний нахил компенсується зсувом осі обертання — вона лишається
   перпендикулярною дузі на будь-якому куті. */
.hero__gauge-live {
  stroke: var(--accent);
  transform: rotate(calc(var(--gauge-angle) + var(--gauge-live-offset)));
}

/* Дуга, залита до поточного показання. Клин-маска — це напівплощина, що
   обертається навколо тієї самої осі: вона відкриває дугу від лівого упору до
   стрілки. Обертання, не stroke-dashoffset: перше — композиція, друге — фарба. */
.hero__gauge-fill {
  stroke: var(--accent);
  stroke-width: var(--icon-stroke-heavy, var(--icon-stroke));
}

/* Єдиний залитий вузол малюнка — сигнальна лампа. */
.hero__gauge-lamp {
  fill: var(--accent);
  stroke: none;
  opacity: var(--gauge-lamp-lit);
}

/* Ореол лампи. Розмиття статичне, анімується лише прозорість. */
.hero__gauge-glow {
  fill: var(--accent);
  stroke: none;
  filter: blur(var(--gauge-glow-blur));
  opacity: var(--gauge-glow-opacity);
}

/* Показання приладу у вікні на бортику. */
.hero__gauge-readout {
  fill: var(--accent);
  stroke: none;
  font-family: var(--font-readout);
  font-size: var(--fs-readout-label);
  font-weight: var(--fw-readout);
  letter-spacing: var(--tracking-numeric);
}

/* Вікна формули — це позиції шкали, тому вони інтерактивні й показують це. */
.hero__formula-node {
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.hero__formula-node:hover,
.hero__formula-node:focus-visible,
.hero__formula-node[data-on="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

/* Нижче --bp-lg вказівника немає: лишається тільки вхідна анімація, далі
   прилад стоїть. Курсор не обіцяє того, чого не буде. */
@media not all and (min-width: 64rem) {
  .hero__formula-node { cursor: default; }
}

/* ---- телефон ------------------------------------------------------------------
   Нижнє поле героя 120px рахувалося на десктоп, де під ним смуга метрик
   заходить угору на --space-xl. На 390 це 64px чистої порожнечі перед першим
   показником — при тому, що сам герой тут займає 1.3 екрана. Проміжок між
   лідом і приладом та відступ над кнопками того ж походження. */
@media not all and (min-width: 48rem) {
  .hero { padding-block: var(--space-xl) var(--space-2xl); }

  .hero__split { gap: var(--space-xl); }

  .hero__actions { margin-block-start: var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__gauge-needle,
  .hero__gauge-live,
  .hero__gauge-wedge,
  .hero__gauge-lamp,
  .hero__gauge-glow {
    transition: none;
  }
}

/* ---- від 48rem: кнопки стають у ряд -----------------------------------------
   Нижче — стовпчик на всю ширину контейнера: удвох вони не вміщаються в один
   рядок, і розтягнута кнопка читається краще за дві стиснені з переносом. */

@media (min-width: 48rem) {
  .hero__actions {
    grid-auto-flow: column;
    justify-content: start;
  }
}

/* ---- від 64rem: три рядки h1 і split 5/7 з виносом за правий край ------------ */

@media (min-width: 64rem) {
  .hero {
    padding-block: calc(var(--header-height) + var(--space-2xl)) var(--space-xl);
  }

  .hero__line {
    display: block;
  }

  /* Ліва колонка — рівно 5 із 12, розділювач — власний padding колонки, а не
     gap: тоді ліва межа ілюстрації = 5/12 доступної міри з точністю до пікселя
     (критерій 003-14.20). */
  .hero__split {
    grid-template-columns: 5fr 7fr;
    gap: 0;
    align-items: start;
  }

  .hero__col {
    padding-inline-end: var(--gutter);
  }

  /* Порушення сітки B2: правий край ілюстрації = правий край вікна.
     Підйом на --space-2xl тримає низ секції в межах 900…1200px (критерій 12). */
  .hero__figure {
    inline-size: auto;
    margin-block-start: calc(-1 * var(--space-2xl));
    margin-inline-end: calc(-1 * var(--wrap-pad));
  }
}