/* section.hero: the name cut into terrain, HUD, sun dial. Tokens come from main.css (--m, --r, --ink, --ink-dim, --accent). */
@property --rise { syntax: '<number>'; inherits: false; initial-value: 1; }

.hero { position: relative; height: 100vh; height: 100svh; --rc: clamp(300px, 24vw, 380px); }
.motion .hero { height: 220vh; height: 220svh; }
.hero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero__gl, .hero__topo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hero.no-gl .hero__gl { display: none; }

/* The name. Static fallback first (works with no script), then the JS fit via --nfs/--nx/--ny/--nrot. */
.hero__name {
  position: absolute; left: 0; bottom: -.17em; z-index: 1; margin: 0;
  font-family: Unbounded, "Arial Black", Impact, sans-serif; font-weight: 800; font-kerning: normal;
  font-size: var(--nfs, 15.2vw); line-height: .86; letter-spacing: -.05em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink); transform: translateX(-2vw); transform-origin: 0 0;
}
.hero.is-fitted .hero__name { top: 0; bottom: auto; transform: translate(var(--nx, 0px), var(--ny, 0px)) rotate(var(--nrot, 0deg)); }
.hero.has-gl .hero__name { color: transparent; }
.hero__name::selection, .hero__name .hero__line::selection { background: var(--accent); color: var(--accent-ink, #17120c); }
.hero__line { display: block; width: max-content; }
.hero__probe { display: inline-block; width: 0; height: 0; }

/* Copy, top-left on the shared margin */
.hero__copy { position: absolute; z-index: 2; left: var(--m); top: 112px; width: min(34ch, calc(100% - 2 * var(--m))); }
.hero__lede { margin: 0; font: 500 clamp(20px, 1.7vw, 26px)/1.3 Onest, system-ui, sans-serif; letter-spacing: 0; color: var(--ink); max-width: 34ch; }
.hero__role { margin: 20px 0 0; font: 500 16px/1.45 Onest, system-ui, sans-serif; color: var(--ink); }
.hero__role > span[aria-hidden] { color: var(--ink-dim); padding: 0 .1em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.hero__corner { position: absolute; z-index: 2; top: 112px; right: var(--m); width: max-content; max-width: calc(var(--rc) * 1.15); margin: 0; text-align: right; font: 400 14px/1.5 Onest, system-ui, sans-serif; color: var(--ink-dim); }
.hero__scale { position: absolute; z-index: 2; top: 164px; right: var(--m); margin: 0; text-align: right; font: 400 13px/1.4 Onest, system-ui, sans-serif; color: var(--ink-dim); pointer-events: none; }

/* HUD, bottom-left (what is under the lens, read from the same height field that is drawn) */
.hud { position: absolute; z-index: 2; right: var(--m); top: 208px; width: var(--rc); pointer-events: none; font-family: Onest, system-ui, sans-serif; }
.hud__grid { display: grid; grid-template-columns: 112px 1fr; gap: 10px 12px; margin: 0 0 12px; }
.hud__grid div { min-width: 0; }
.hud__grid div:nth-child(4) { grid-column: auto; }
.hud dt { font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--ink); }
.hud dd { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud__profile { display: block; width: 100%; height: 44px; margin-bottom: 8px; overflow: visible; }
.hud__fill { fill: rgba(201, 242, 79, .08); stroke: none; }
.hud__line { fill: none; stroke: var(--lime, #c9f24f); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hud__cur { stroke: var(--amber, #ffb340); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.hud__hist { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 22px; align-items: end; }
.hud__hist i { display: block; height: 100%; background: var(--lime, #c9f24f); transform: scaleY(.12); transform-origin: 50% 100%; }

/* HUD sheds parts when the column is short (set by fitUI in hero-terrain.js) */
.hero.hud-lite .hud__profile, .hero.hud-lite .hud__hist { display: none; }
.hero.hud-off .hud { display: none; }
.hero.hud-dock .hud { top: auto; bottom: calc(var(--name-h, 34%) + var(--m) * .8); right: calc(var(--m) + var(--rc) + 32px); }

/* Sun dial, bottom-right: today's sun path, drag or arrow keys */
.sundial { position: absolute; z-index: 3; right: var(--m); bottom: calc(var(--name-h, 34%) + var(--m) * .8); width: var(--rc); font-family: Onest, system-ui, sans-serif; }
.sundial__slider { display: block; cursor: grab; touch-action: none; border-radius: var(--r); -webkit-tap-highlight-color: transparent; user-select: none; }
.sundial__slider:active { cursor: grabbing; }
.sundial__slider:focus { outline: none; }
.sundial__slider:focus-visible { outline: 2px solid var(--accent, #c9f24f); outline-offset: 4px; }
.sundial svg { display: block; width: 100%; height: auto; overflow: visible; }
.sundial__arc { fill: none; stroke: var(--lime, #c9f24f); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sundial__below { fill: none; stroke: var(--ink, #f1ece2); stroke-opacity: .6; stroke-width: 1.5; stroke-dasharray: 1 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sundial__fill { fill: var(--lime, #c9f24f); fill-opacity: .14; }
.sundial__horizon { stroke: var(--ink, #f1ece2); stroke-opacity: .4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sundial__rise { stroke: var(--ink, #f1ece2); stroke-opacity: .7; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sundial__tick { stroke: var(--amber, #ffb340); stroke-width: 1.2; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.sundial__disc { fill: var(--lime, #c9f24f); transform-box: fill-box; transform-origin: center; }
.sundial__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 8px; min-height: 2.8em; }
.sundial__label { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; text-wrap: balance; }
.sundial__now { flex: none; appearance: none; border: 0; background: none; text-decoration: underline; text-underline-offset: 4px; color: var(--ink); font: 600 15px/1.4 Onest, system-ui, sans-serif; padding: 6px 2px; cursor: pointer; border-radius: 0; }
.sundial__now[hidden] { display: none; }
.sundial__now:focus-visible { outline: 2px solid var(--accent, #c9f24f); outline-offset: 3px; }

.hero.no-gl .sundial { padding: 12px 14px; background: var(--night, #0e100d); border-radius: var(--r); }
/* Entrance and scroll story. --rise is the entrance, --fc/--fh/--drift come from the scroll story (hero-terrain.js). */
.hero__lede, .hero__role, .hero__actions, .hero__corner { --rise: 1; opacity: calc(var(--rise) * var(--fc, 1)); translate: 0 calc((1 - var(--rise)) * 28px + var(--drift, 0px)); }
.hud, .sundial, .hero__scale { --rise: 1; opacity: calc(var(--rise) * var(--fh, 1)); translate: 0 calc((1 - var(--rise)) * 28px); }
.hero.is-past .hud, .hero.is-past .sundial, .hero.is-past .hero__copy, .hero.is-past .hero__corner, .hero.is-past .hero__name, .hero.is-past .hero__scale { visibility: hidden; }
.motion .hero:not(.is-in) :is(.hero__lede, .hero__role, .hero__actions, .hero__corner, .hud, .sundial, .hero__scale) { --rise: 0; animation: hero-failsafe .01s 8s forwards; }
.motion .hero.is-in :is(.hero__lede, .hero__role, .hero__actions, .hero__corner, .hud, .sundial, .hero__scale) { transition: --rise 1.1s cubic-bezier(.16, 1, .3, 1); }
.motion .hero.is-in .hero__role { transition-delay: 70ms; }
.motion .hero.is-in .hero__actions { transition-delay: 140ms; }
.motion .hero.is-in .hero__corner { transition-delay: 210ms; }
.motion .hero.is-in .hud { transition-delay: 280ms; }
.motion .hero.is-in .sundial { transition-delay: 350ms; }
.motion .hero.is-in .hero__scale { transition-delay: 420ms; }
@keyframes hero-failsafe { to { --rise: 1; } }
@media (prefers-reduced-motion: reduce) { .hero * { transition: none !important; animation: none !important; } }

/* Phone / tall (W/H <= 5/8, same threshold as PORTRAIT_AR in hero-terrain.js): the name turns a quarter and runs down the right side, whole.
   Copy, HUD (two readouts) and dial stack down the left column, which ends where the name begins (--name-edge). */
@media (max-aspect-ratio: 5/8) {
  .hero { --col: calc(var(--name-edge, 55%) - 1.5 * var(--m)); }
  .hero__copy { top: 96px; width: var(--col); }
  .hero__lede { font-size: 17px; line-height: 1.35; }
  .hero__role { margin-top: 14px; min-height: 4.35em; }
  .hero__actions { margin-top: 20px; gap: 12px 20px; }
  .hud { top: auto; right: auto; left: var(--m); bottom: calc(var(--m) + var(--dial-h, 120px) + 18px); width: var(--col); }
  .hud__grid { grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; }
  .hud__grid div:nth-child(n+3), .hud__profile, .hud__hist { display: none; }
  .sundial { left: var(--m); right: auto; bottom: var(--m); width: var(--col); }
  .sundial__disc { transform: scale(1.7); }
  .sundial__row { min-height: 4.2em; }
}

/* Corner note and scale are visually hidden (still in the accessibility tree) wherever the top-right column would meet the copy:
   phones, narrow windows, short windows. */
@media (max-aspect-ratio: 5/8), (max-width: 900px), (max-height: 700px) {
  .hero__corner { width: 1px; height: 1px; max-width: none; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .hero__scale { display: none; }
}

/* Short / landscape (H <= 700, not portrait): copy tightens up under the header, the dial goes compact at top right beside it, HUD off,
   and hero-terrain.js fits the name into the band below both (it reads --short). */
@media (max-height: 700px) and (min-aspect-ratio: 626/1000) {
  .hero { --short: 1; --dw: clamp(124px, 20vw, 240px); }
  .hero__copy { top: calc(var(--m) + 38px); width: min(560px, calc(100% - 2 * var(--m) - var(--dw) - 16px)); }
  .hero__lede { font-size: clamp(14px, 2.2vw, 20px); line-height: 1.3; max-width: none; }
  .hero__role { margin-top: 6px; font-size: 15px; line-height: 1.45; min-height: 1.45em; }
  .hero__actions { margin-top: 8px; gap: 8px 22px; }
  .hero__actions .btn { height: 44px; }
  .hud { display: none; }
  .sundial { top: calc(var(--m) + 54px); bottom: auto; width: var(--dw); }
  .sundial__row { min-height: 0; margin-top: 6px; }
  .sundial__label { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; }
  .sundial__now { font-size: 13px; padding: 2px; }
}
@media (max-height: 700px) and (min-aspect-ratio: 626/1000) and (max-width: 560px) {
  .hero__role { min-height: 2.9em; }
  .hero__actions { gap: 8px 14px; }
  .hero__actions .btn { padding: 0 16px; }
}