/* ==========================================================================
   HERO — statue video (left), cursor-steered chart (right), centred copy.
   Engines: assets/js/hero-scene.js (video + chart) · assets/js/hero.js (intro + counters)
   Layers, back → front: sky (clouds, halo) · video · chart · copy
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  display: flex; flex-direction: column;
  min-height: calc(100svh - 102px);
  padding: clamp(32px, 5vh, 72px) 0 clamp(28px, 5vh, 64px);
}

/* sky ------------------------------------------------------------------- */
.hero__sky { position: absolute; inset: 0; z-index: var(--z-bg); pointer-events: none; translate: calc(var(--mx, 0) * -16px) calc(var(--my, 0) * -10px); }
.hero__sky::after {
  content: ""; position: absolute; left: 50%; top: 14%; width: min(1100px, 130vw); height: 560px; transform: translateX(-50%);
  background: radial-gradient(ellipse 48% 42% at 50% 58%, rgba(242, 199, 92, .11), transparent 70%), radial-gradient(ellipse 60% 50% at 50% 45%, rgba(124, 145, 182, .12), transparent 72%);
}
.cloud { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(150, 168, 204, .17), rgba(150, 168, 204, .05) 55%, transparent); opacity: .55; animation: drift 44s ease-in-out infinite alternate; }
.cloud--a { width: 980px; height: 360px; left: -16%; top: -150px; }
.cloud--b { width: 860px; height: 320px; right: -18%; top: -90px; animation-duration: 56s; animation-delay: -18s; }
.cloud--c { width: 640px; height: 260px; left: 30%; top: -190px; animation-duration: 38s; animation-delay: -9s; }
@keyframes drift { to { transform: translateX(90px); } }

/* content --------------------------------------------------------------- */
.hero__content { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero__title {
  font-size: clamp(48px, min(8.4vw, 11.6vh), 120px); line-height: 1.02; margin: 22px auto 0;
  translate: calc(var(--mx, 0) * 8px) calc(var(--my, 0) * 5px);
  filter: drop-shadow(0 0 26px rgba(152, 192, 239, .16)) drop-shadow(0 8px 34px rgba(242, 199, 92, .18));
}
/* no clipping box: the lines fade up into place, so nothing (descenders included) is ever cut */
.hero__line { display: block; padding: 0 .08em; }
.hero__line > span { display: inline-block; }
.hero__sub { max-width: 620px; margin: 24px auto 0; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.55; color: var(--text-2); }
.hero__sub strong { color: var(--text-hi); font-weight: 500; }
.hero__ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__proof { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 14px; color: var(--text-3); }
.avatars { display: flex; }
.avatars span { width: 28px; height: 28px; border-radius: 50%; margin-left: -8px; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--text-hi); background: var(--steel); box-shadow: 0 0 0 2px var(--bg), inset 0 1px 1px rgba(216, 236, 248, .2); }
.avatars span:first-child { margin-left: 0; }

/* "Start ruling." gets one gold sheen pass after the reveal */
.hero__ignite {
  background-image: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%), var(--gold-text);
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 160% 0, 0 0;
}
.hero.is-ready .hero__ignite { animation: ignite 1.5s ease-out .9s both; }
@keyframes ignite { to { background-position: -70% 0, 0 0; } }

/* intro sequence (only hides when JS runs) */
.js .hero__in { opacity: 0; transform: translateY(16px); }
.js .hero__line > span { opacity: 0; transform: translateY(.3em); }
.hero.is-ready .hero__in { opacity: 1; transform: none; transition: opacity .7s ease-out calc(var(--i) * 90ms), transform .7s ease-out calc(var(--i) * 90ms); }
.hero.is-ready .hero__line > span { opacity: 1; transform: none; transition: opacity 1s ease-out calc(var(--i) * 140ms), transform 1.2s ease-out calc(var(--i) * 140ms); }

/* odometer stats -------------------------------------------------------- */
.odos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(760px, 100%); margin: clamp(26px, 3.6vh, 44px) auto 0; }
.odos > div { display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; padding: 2px 16px; box-shadow: inset -1px 0 0 var(--edge-soft); }
.odos > div:last-child { box-shadow: none; }
.odos dd { margin: 0; min-height: 1.1em; font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.6vw, 36px); color: var(--text-hi); }
.odos .odo--gold { color: var(--gold-hi); text-shadow: 0 0 22px rgba(242, 199, 92, .35); }

.odo { display: inline-flex; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.odo__cell { display: inline-block; height: 1.1em; overflow: hidden; mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.odo__strip { display: flex; flex-direction: column; transition: transform 1.6s ease-out; }
.odo__strip > span, .odo__sym { display: block; height: 1.1em; }

/* statue video (left) — engine: assets/js/hero-scene.js ------------------ */
.hero__media {
  position: absolute; z-index: var(--z-bg); left: -2vw; top: 0; bottom: 0; width: clamp(420px, 42vw, 780px); pointer-events: none;
  translate: calc(var(--mx, 0) * -12px) calc(var(--my, 0) * -7px);
  -webkit-mask-image: linear-gradient(to right, #000 46%, transparent 94%), linear-gradient(to bottom, transparent 0%, #000 13%, #000 66%, transparent 97%);
  mask-image: linear-gradient(to right, #000 46%, transparent 94%), linear-gradient(to bottom, transparent 0%, #000 13%, #000 66%, transparent 97%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; opacity: 0; transform: scale(1.06); transition: opacity 1.8s ease-out, transform 2.6s ease-out; }
.hero.is-ready .hero__video { opacity: 1; transform: none; }
/* lifts the video's pure black to the page colour, so no darker box shows through the fade */
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--bg); mix-blend-mode: lighten; }

/* price chart (right) --------------------------------------------------- */
.hero__chart {
  position: absolute; z-index: var(--z-below); right: 0; top: 13%; bottom: 15%; width: clamp(380px, 44vw, 800px); pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  opacity: 0; transition: opacity 1.4s ease-out .5s;
}
.hero.is-ready .hero__chart { opacity: 1; }
.hero__chart canvas { display: block; width: 100%; height: 100%; }

/* readability: a soft dark pool behind the centred copy, over the video and chart edges */
.hero__content::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(1040px, 96vw); height: 86%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(5, 6, 15, .62), rgba(5, 6, 15, .3) 60%, transparent);
}

/* eye-synced sheen ------------------------------------------------------- */
/* the headline catches a fresh gold sheen each time the eyes ignite (alternating names restart it) */
.hero.is-ready .hero__ignite.relit-a { animation: relitA 1.6s ease-out both; }
.hero.is-ready .hero__ignite.relit-b { animation: relitB 1.6s ease-out both; }
@keyframes relitA { from { background-position: 160% 0, 0 0; } to { background-position: -70% 0, 0 0; } }
@keyframes relitB { from { background-position: 160% 0, 0 0; } to { background-position: -70% 0, 0 0; } }

/* cockpit (the card fan, its own section below the hero) ---------------- */
.cockpit { isolation: isolate; overflow-x: clip; }
.cockpit .hero__stage { margin-top: 0; }
.cockpit .hero__word { top: -.1em; }
/* the market toggle floats as a glass pill over the candle stream it controls */
.cockpit .simbar { position: relative; z-index: var(--z-raised); width: fit-content; margin-inline: auto; padding: 6px 6px 6px 18px; border-radius: var(--r-pill); background: rgba(5, 6, 15, .78); backdrop-filter: blur(8px); box-shadow: var(--sh-modal); }

/* cockpit art: a hand on the left, the market streaming out of its fingertip.
   The rig (hand + junction) rotates around the fingertip. The canvas stays
   axis-aligned and the engine draws the market at the rig's tilt, read from
   two marker points — crisp at native resolution. Engine: assets/js/cockpit-art.js */
.adapt-art {
  --anchor-x: clamp(200px, 26vw, 480px);   /* where the fingertip lands in the section */
  --anchor-y: 74%;
  position: absolute; inset: 0; z-index: var(--z-below); overflow: hidden; pointer-events: none;
}
.adapt-art::after { content: ""; position: absolute; inset: 0 0 0 auto; width: clamp(110px, 17%, 300px); pointer-events: none; background: linear-gradient(to right, transparent, rgba(5, 6, 15, .62) 50%, var(--bg) 94%); }
.adapt-art__rig {
  --hand-w: clamp(340px, 40vw, 720px);
  --hand-h: calc(var(--hand-w) * .6445);   /* image is 1024×660 */
  --tip-x: calc(var(--hand-w) * .9834);    /* fingertip measured at (1007, 397) */
  --tip-y: calc(var(--hand-h) * .6015);
  position: absolute; left: calc(var(--anchor-x) - var(--tip-x)); top: calc(var(--anchor-y) - var(--tip-y));
  width: var(--hand-w); height: var(--hand-h);
  transform-origin: var(--tip-x) var(--tip-y); transform: rotate(-10deg); /* a gentle rise behind the frosted cards */
}
.adapt-art__market { position: absolute; left: 0; top: 0; max-width: none; } /* sized + placed by the engine */
.adapt-art__tip, .adapt-art__aim { position: absolute; top: var(--tip-y); width: 0; height: 0; }
.adapt-art__tip { left: var(--tip-x); }
.adapt-art__aim { left: calc(var(--tip-x) + 100px); } /* a point along the tilt, gives the engine the angle */
.adapt-art__junction {
  position: absolute; left: calc(var(--tip-x) - 100px); top: calc(var(--tip-y) - 110px); width: 250px; height: 220px;
  background: radial-gradient(closest-side, var(--bg) 0%, rgba(5, 6, 15, .82) 34%, rgba(5, 6, 15, .4) 64%, transparent 100%);
}
.adapt-art__hand {
  position: absolute; inset: 0; transform-origin: var(--tip-x) var(--tip-y); transform: rotate(-10deg); /* levels the index finger with the chart */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%); mask-image: linear-gradient(to right, transparent 0%, #000 38%);
}
.adapt-art__hand img { display: block; width: 100%; height: 100%; }
/* same black-lift as the statue: the image's black becomes the page colour */
.adapt-art__hand::after { content: ""; position: absolute; inset: 0; background: var(--bg); mix-blend-mode: lighten; }
/* load order: the art arrives first (is-in from cockpit-art.js), the cards follow one by one */
.js .adapt-art { opacity: 0; transition: opacity .7s ease-out; }
.js .adapt-art.is-in { opacity: 1; }
.js .adapt-art__hand { translate: -36px 0; transition: translate 1.6s var(--ease-out); }
.js .adapt-art.is-in .adapt-art__hand { translate: 0 0; }
.js .cockpit .fan__card { opacity: 0; }
.cockpit .hero__stage.in .fan__card { opacity: 1; transition: opacity .6s ease-out var(--cd, .1s), transform .2s var(--ease-out); }
.cockpit .fan__card--c { --cd: .1s; } .cockpit .fan__card--l { --cd: .2s; } .cockpit .fan__card--r { --cd: .3s; }
/* desktop: the cards become real frosted glass, so the market glows through them as it flows behind */
@media (min-width: 1025px) {
  .cockpit .fan__card { background: rgba(5, 6, 15, .66); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); }
}

/* tablets + phones: the cards stack, so the hand gets its own lane under the market toggle */
@media (max-width: 1024px) {
  .cockpit { padding-bottom: calc(var(--section-y) + 120px); }
  .adapt-art { --anchor-x: 30vw; --anchor-y: calc(100% - 150px); }
  .adapt-art__rig { --hand-w: clamp(300px, 62vw, 560px); }
}
@media (max-width: 600px) {
  .cockpit { padding-bottom: calc(var(--section-y) + 110px); }
  .adapt-art { --anchor-x: 44vw; --anchor-y: calc(100% - 120px); }
  .adapt-art__rig { --hand-w: 82vw; }
}

/* responsive ------------------------------------------------------------ */
/* tablets + phones: statue becomes a portrait window at the top, copy rises
   over its faded shoulders, the chart becomes a band under the stats */
@media (max-width: 1024px) {
  .hero__media {
    left: 0; right: 0; bottom: auto; width: auto; height: min(64svh, 660px); translate: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 97%), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(to bottom, #000 40%, transparent 97%), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  }
  .hero__video { object-position: 50% 8%; }
  .hero__content { order: 1; justify-content: flex-start; padding-top: min(36svh, 330px); }
  .hero__content::before { top: auto; bottom: 0; transform: translateX(-50%); height: 72%; }
  .hero__chart {
    order: 2; position: relative; inset: auto; width: 100%; height: 170px; margin-top: 22px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  }
}
@media (max-width: 600px) {
  .hero { padding-top: 28px; }
  .hero__sub { font-size: 16px; }
  .hero__proof { flex-wrap: wrap; justify-content: center; }
  .odos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .odos > div:nth-child(2) { box-shadow: none; }
}