/* THE REGISTAN HERO, MADE ALIVE: three preview pages of 2026-11-10, built on
   the live hero (the Registan panorama, hero-registan-2.webp) without
   changing it. His ask: "Что еще можем сделать на hero page? Какие wow идеи
   есть?", then "Покажи мне все варианты визуально".
     body.ha-truck  1 · NNP's lorry drives the road on scroll
     body.ha-logo   2 · the intro logo lands on the office as its sign
     body.ha-name   3 · "NNP Raisins" stands behind the Registan
   Positions are in the panorama's own pixels (1536 x 353), as percentages of
   `.v3-arc`, whose box is the picture's box. Built by
   tools/build-hero-alive.mjs; script assets/js/hero-alive.js.
   ⚠ Preview only: delete site/index-alive-*.html and site/hero-alive.html
   before any full-site deploy. */

/* One layer over the picture that copies the pointer drift home.js puts on
   the image, so whatever stands in the scene moves with it. */
.ha-layer { position: absolute; inset: 0; pointer-events: none; }

/* ------------------------------------------------------------ 1 · the lorry */
/* The asphalt runs from y 338 to 349 of 353 across the whole frame. The
   lorry is 10% of the panorama wide (his "может побольше сделаем его?";
   7% before: about 3.5 cars, as a real articulated lorry is), seen straight from the side (the
   first render was three-quarter, and on a level road it read crooked). */
.ha-lorry { position: absolute; left: 0; bottom: 0.9%; width: 10%;
  will-change: transform; }
.ha-lorry img { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 0.15vw 0.2vw rgba(0,0,0,.45)); }
/* The headlights' wash on the road ahead, low and warm. */
.ha-beam { position: absolute; left: 92%; bottom: -6%; width: 70%; height: 46%;
  background: radial-gradient(60% 50% at 0% 60%, rgba(255,214,140,.55), rgba(255,214,140,0) 70%);
  mix-blend-mode: screen; }

/* ------------------------------------------------------- 2 · the logo lands */
/* The office: walls from x 1266 to 1448, roof to wall foot y 100 to 186.
   Dark until the logo lands, then its windows come on. */
.ha-dim { position: absolute; left: 82.4%; top: 27.5%; width: 12%; height: 26%;
  border-radius: 18% / 30%; background: rgba(12,5,26,.82);
  filter: blur(0.35vw); transition: opacity 1.1s ease .15s; }
.ha-logo.ha-lit .ha-dim { opacity: 0; }
/* The sign. The render's own is plain white "NNP" letters (x 1343 to 1367,
   y 125 to 134), not the brand's lockup, and his note on the first build
   was exactly that: "логотипы отличаются". So the gable carries a dark
   board with the real lockup, 40 x 15 at 1335 x 120.5, over those letters;
   unlit until the flying logo lands in it. */
.ha-sign { position: absolute; left: 86.92%; top: 34.14%; width: 2.6%; height: 4.25%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 1px; background: linear-gradient(180deg, #3a1a26, #22101a);
  box-shadow: 0 0 0 1px rgba(255,220,180,.18); }
.ha-sign svg { display: block; height: 82%; width: auto; color: #fff6e8; opacity: .16;
  transition: opacity .35s ease, filter .6s ease; }
.ha-logo.ha-lit .ha-sign svg { opacity: 1; filter: drop-shadow(0 0 3px rgba(255,226,170,.85)); }
/* The glow, centred on the sign at 1355 x 128. */
.ha-glow { position: absolute; left: 88.2%; top: 36.26%; width: 7%; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.4); opacity: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,240,214,.95), rgba(255,206,140,.35) 45%, rgba(255,206,140,0));
  mix-blend-mode: screen; }
.ha-logo.ha-lit .ha-glow { animation: ha-flash 1.6s ease-out forwards; }
@keyframes ha-flash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  100% { opacity: .38; transform: translate(-50%, -50%) scale(.7); }
}
/* ------------------------------------- 1 + 2 on a phone: the Registan only */
/* His call, 2026-11-10, after the whole panorama came out a 90px strip and
   a panning camera did not look right either: "для телефонной версии нужно
   оставить только registan по центру крупным планом как будто он обнимает
   всю страницу". On a narrow screen the panorama is cropped to the
   ensemble, 211% of the screen wide. The office is outside the crop, so
   no sign and no flight; the lorry stays ("а где пробегающий грузовик?")
   and drives the road across the crop.
   ⚠ CENTRED ON THE TILYA-KORI, NOT ON THE ENSEMBLE. The render's right
   madrasah is wider than its left (ensemble x 435 to 1148), so centring
   the ensemble (the first crop, 211% at 51.6%) put the central building
   15px left of the middle; his note: "центральное здание регистана не по
   центру, а чуть левее". The central building runs x 599 to 934, its
   centre 765 = 49.8%.
   ⚠ 211%, NOT 200%. Shrinking to 200% to keep the right dome (to 1148)
   whole got "ну почему регистан стал меньше?" the same evening. The size
   wins: at 211% the right dome's outer edge (~20 picture pixels) runs off
   the screen and the left madrasah has the spare margin. */
@media (max-width: 900px) {
  .ha-truck.ha-logo .v3-arc { left: 50%; width: 211%; transform: translateX(-49.8%); }
  .ha-truck.ha-logo .ha-sign, .ha-truck.ha-logo .ha-dim, .ha-truck.ha-logo .ha-glow { display: none; }
  .ha-truck.ha-logo .v3-hero-wrap { padding-bottom: calc(211vw * 353 / 1536 + 24px); }
}
/* A picture of its own for phones (body.ha-phonepic, a <picture> source):
   his "предлагаю левому тоже дать минарет как у правого" — the symmetric
   Registan, a dome on each side, the full screen wide. --ph-h is the
   picture's height over its width, --ph-road the lorry's bottom offset on
   that picture's road. */
@media (max-width: 900px) {
  .ha-truck.ha-logo.ha-phonepic .v3-arc { left: 0; width: 100%; transform: none; }
  .ha-truck.ha-logo.ha-phonepic .v3-hero-wrap { padding-bottom: calc(100vw * var(--ph-h) + 24px); }
  .ha-phonepic .ha-lorry { width: 25%; bottom: var(--ph-road); }  /* 18% before his "на телефоне машину нужно увеличить" */
}

/* The flying lockup: the header's own logo, above the intro curtain. */
.ha-fly { position: fixed; left: 0; top: 0; z-index: 10000000; pointer-events: none;
  color: var(--chalk); transform-origin: 0 0; will-change: transform, opacity; }
.ha-fly svg { display: block; width: 100%; height: auto; }

/* ------------------------------------------------- 3 · the name behind it */
/* The giant name stands in the picture's box, under the picture: the
   Registan's towers, domes and portals stand in front of it, the fields
   hide its foot. --aw is the panorama's width (106vw, 100vw on a phone). */
.ha-name .v3-hero { --aw: 106vw; }
.ha-name .v3-arc-img { position: relative; z-index: 1; }
.ha-name-h { position: absolute; left: 50%; bottom: 50%; z-index: 0; margin: 0;
  transform: translate(-50%, 0); white-space: nowrap; pointer-events: none;
  font-family: var(--display); font-weight: 800; letter-spacing: -0.05em;
  font-size: calc(var(--aw) * 0.158); line-height: 0.8;
  /* lit from below by the square's floodlights */
  background: linear-gradient(180deg, #f6f1fb 0%, #e6d6f8 48%, #f4cf96 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  will-change: transform; }
.ha-kick { margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.03em; }
.ha-kick .rotator { line-height: 1.12; justify-items: center; text-align: center; }
.ha-kick .rot-line { color: var(--violet-lt); }
.ha-name .v3-lead { margin-top: 10px; }
/* The copy is centred in the sky above the name, whose top stands about a quarter of
   the panorama's width above the hero's floor; the live page's lift of the
   copy (-9vh / -4vh on desktop) is off here. */
.ha-name .v3-hero-wrap { transform: none; padding-bottom: calc(var(--aw) * 0.25 + 26px); }
@media (max-width: 900px) {
  .ha-name .v3-hero { --aw: 100vw; }
}