/* ══════════════════════════════════════════════
   HOME: the hero and home-only sections (shared look lives in glacier.css)
   One bold thing (the ice-stream hero). Everything else is quieter:
   glacial blue-black instead of neutral black, panels lit from above
   like ice, and fewer competing glows.
══════════════════════════════════════════════ */


/* ── HERO ─────────────────────────────────── */
.hero-view {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(calc(100svh / var(--zu)) - var(--header-h));
  align-items: center; justify-content: flex-start;
  background:
    radial-gradient(55% 70% at 76% 58%, rgba(46,134,171,0.22), transparent 70%),
    radial-gradient(45% 40% at 12% 8%, rgba(168,216,234,0.07), transparent 70%),
    radial-gradient(60% 50% at 50% 120%, rgba(11,28,44,0.9), transparent 70%),
    var(--base);
}
.ice-layer {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.3s ease;
}
.ice-deep, .ice-glint { will-change: transform; }
/* the tilting plane: a little larger than the hero so its edges never show when it tips */
.ice-stage { position: absolute; inset: -6%; z-index: 0; pointer-events: none; }
/* one fade into the page below, instead of a mask on every layer */
.hero-view::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 12%; pointer-events: none; background: linear-gradient(180deg, transparent, var(--base)); }
/* the live stream arrives as one frozen frame over the still (all layers together), then starts to move */
/* timings overlap on purpose, so the light never drops between one layer leaving and the next arriving:
     under-pulse   0 to 13 s  a gentle swell, peak at about 2.9 s, ebbing over ten seconds
     live layers   0 to 6.5 s fade in over the still, as one frozen frame
     glints        1.2 to 7.7 s fade in (frozen at first), so the highlights are already there when the still leaves
     the still     1 to 8 s crossfades out under the live layers, so the overall light stays level
     motion        released from 2.6 s (hero.js), the faster layers later */
.hero-view.flow-on .ice-layer { opacity: 1; transition: opacity 1s cubic-bezier(.4,0,.6,1); }
.hero-view.flow-on .ice-glint { transition: opacity 1s cubic-bezier(.4,0,.2,1) 0.2s; }
.hero-view.flow-on .ice-deep { opacity: 0.9; }

/* a soft shadow of deep ice behind the words so they read over bright channels */
.hero-view::before {
  content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: radial-gradient(50% 62% at 24% 50%, rgba(5,8,13,0.72), rgba(5,8,13,0.2) 60%, transparent 80%);
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto; padding: clamp(28px, calc(6vw / var(--zu)), 96px) clamp(20px, calc(5vw / var(--zu)), 64px) clamp(110px, calc(16vh / var(--zu)), 160px);
  gap: clamp(14px, calc(2.2vh / var(--zu)), 26px);
}
.hero-logo { position: relative; }
.hero-logo-svg { width: clamp(300px, calc(64vw / var(--zu)), 900px); filter: drop-shadow(0 0 30px rgba(168,216,234,0.18)) drop-shadow(0 18px 40px rgba(0,0,0,0.6)); }
/* the one orchestrated moment: a single slow pass of light across the letters themselves (an SVG
   gradient inside the wordmark, so it lights only the glyphs, never a box around them). It starts
   once the wordmark has finished fading in. */
.hero-sub p { color: #9FB2C4; }
.hero-sub-2 { color: var(--frost) !important; }
.hero-pitch {
  max-width: 34em; margin: 2px 0 6px;
  font-family: var(--font-body); font-size: clamp(1.15rem, calc(1.7vw / var(--zu)), 1.45rem); line-height: 1.5; color: #C7D6E2;
  text-shadow: 0 1px 18px rgba(5,8,13,0.9);
  animation: heroIn .55s var(--hero-ease) .14s both;
}
.hero-ctas { justify-content: flex-start; margin-top: 4px; }
.hero-ctas .cta-btn { margin-top: 0; border-radius: 4px; }
.hero-ctas .cta-ghost { background: rgba(5,8,13,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* instrument strip along the bottom edge of the hero */
.hero-telemetry {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; gap: 10px clamp(20px, calc(4vw / var(--zu)), 56px); align-items: flex-end;
  padding: 14px clamp(20px, calc(5vw / var(--zu)), 64px) 18px;
  background: linear-gradient(180deg, transparent, rgba(5,8,13,0.72) 40%);
  border-top: 1px solid rgba(168,216,234,0.08);
  animation: heroIn .6s var(--hero-ease) .32s both;
}

/* ── PANELS: lit from above, like a slab of ice ── */
.race, .cmp, .proof-stats li, .cmp-table-wrap, .quick-access .service-card, .story-scene {
  border: 1px solid var(--panel-edge);
  border-top-color: var(--panel-lit);
  border-radius: 8px;
}
.cmp { border-left: 1px solid var(--panel-edge); }
.cmp-table-wrap { overflow: hidden; overflow-x: auto; }
.proof-stats li { border-radius: 6px; }

/* section headlines share the wordmark's voice */
.story-title, .proof-title { font-family: var(--font-mark); font-weight: 700; letter-spacing: 0.01em; color: var(--frost); font-size: clamp(1.35rem, calc(3vw / var(--zu)), 2.3rem); line-height: 1.15; }
.proof-intro { color: #9FB2C4; font-size: 1.08rem; }

/* section rhythm: more air, and a faint glacial glow behind each block */
.story, .proof, .quick-access { position: relative; }
.proof::before, .quick-access::before {
  content: ''; position: absolute; z-index: -1; left: 10%; right: 10%; top: 10%; height: 60%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(46,134,171,0.08), transparent 70%);
}

/* site sections: a light that follows the pointer, so the cards answer the hand */
.quick-access .service-card { border-top: 1px solid var(--panel-lit); transition: border-color .25s ease, transform .25s ease; }
.quick-access .service-card:hover { border-color: rgba(168,216,234,0.32); transform: translateY(-2px); }
.quick-access .sc-title { color: var(--frost); }

@media (max-width: 1080px) {
  .hero-view::before { background: radial-gradient(90% 55% at 50% 42%, rgba(5,8,13,0.8), rgba(5,8,13,0.3) 65%, transparent 85%); }
}
@media (max-width: 600px) {
  .hero-view { align-items: flex-start; }
  .hero-view::before { background: linear-gradient(180deg, rgba(5,8,13,0.8) 0%, rgba(5,8,13,0.6) 52%, transparent 68%), linear-gradient(90deg, rgba(5,8,13,0.4), transparent 80%); }
  .hero-inner { padding: 44px 20px 150px; align-items: flex-start; text-align: left; }
  .hero-sub, .hero-inner { text-align: left; }
  .hero-logo-svg { width: min(calc(88vw / var(--zu)), 420px); }
  .hero-telemetry { gap: 8px 18px; padding: 12px 20px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ice-layer { transition: none; }
  .quick-access .service-card { transition: none; }
}



/* ── FROST: the telemetry strip is a pane of frosted ice over the moving water (header and footer frost live in glacier.css) ── */
.hero-telemetry {
  -webkit-backdrop-filter: blur(10px) saturate(1.25) brightness(1.05);
  backdrop-filter: blur(10px) saturate(1.25) brightness(1.05);
  background: linear-gradient(180deg, rgba(168,216,234,0.06), rgba(168,216,234,0.015)), rgba(6,10,16,0.45);
  border-top: 1px solid rgba(168,216,234,0.14);
  box-shadow: inset 0 1px 0 rgba(234,246,251,0.06);
}
@media (max-width: 760px) {
  .hero-telemetry { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(168,216,234,0.08), rgba(168,216,234,0.03)), rgba(6,10,16,0.82); }
}

/* the still: shown instantly on load, and kept for anyone who does not get the live version */
.hero-poster {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/img/hero-ice-v3.webp") center / cover no-repeat;
  transition: opacity 0.3s ease;
}
@media (max-width: 760px) and (orientation: portrait) { .hero-poster { background-image: url("/img/hero-ice-portrait-v3.webp"); } }
.hero-view.flow-on .hero-poster { opacity: 0; transition: opacity 1.1s cubic-bezier(.4,0,.6,1) 0.1s; }   /* crossfades with the live layers, so the light stays level */

/* the hero is released in order, slowly: wordmark, tagline, pitch, buttons, instrument strip */
/* on phones and tablets the hero starts at the height the page framing gives it, so nothing jumps when the script lays pages out */
@media (max-width: 1080px) and (min-height: 520px) { .hero-view { min-height: calc(100svh - var(--hdr-live, var(--hdr-guess)) - 10px); } }
/* one short, tight sequence (about 0.8 s end to end); opacity and a few pixels of lift only, so it all runs on the compositor */
.hero-view { --hero-ease: cubic-bezier(.22, .8, .24, 1); }
.hero-view.section { animation: none; }   /* the still is there from the first paint; only the words arrive */
.hero-view .hero-logo { animation: heroIn .55s var(--hero-ease) 0s both; }
.hero-view .hero-sub { animation: heroIn .55s var(--hero-ease) .07s both; }
.hero-view .hero-ctas .cta-btn { animation: heroIn .55s var(--hero-ease) .21s both; }
.hero-view .hero-ctas .cta-btn + .cta-btn { animation-delay: .27s; }
@keyframes heroIn { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-view .hero-logo, .hero-view .hero-sub, .hero-view .hero-ctas .cta-btn, .hero-pitch, .hero-telemetry { animation: none; } }

/* the under-pulse: while the stream warms up out of sight, a slow swell of cold light rises from
   beneath the main channel. The stream fades in at its peak, and the swell ebbs as motion begins,
   so the hand-off from still to live happens inside the light instead of as a cut. */
.ice-stage::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background:
    radial-gradient(34% 42% at 64% 60%, rgba(168,216,234,0.11), transparent 70%),
    radial-gradient(60% 70% at 60% 58%, rgba(46,134,171,0.10), transparent 72%);
}
.hero-view.flow-warm .ice-stage::after { animation: under-pulse 4.2s cubic-bezier(.45,0,.4,1) both; }
@keyframes under-pulse {
  0%   { opacity: 0; }
  17%  { opacity: 0.42; }        /* peak, about 1.2 s in: the stream begins to fade in here; softer than before because it arrives sooner */
  36%  { opacity: 0.36; }        /* held while the live layers fill in */
  60%  { opacity: 0.22; }       /* easing off as the still crossfades away */
  82%  { opacity: 0.08; }
  100% { opacity: 0; }          /* gone once motion has settled, about 7 s in */
}
@media (prefers-reduced-motion: reduce) { .hero-view.flow-warm .ice-stage::after { animation: none; } }

/* ── the speed race: recessed ice tracks, a lit leading edge, and a mark when each lane is done ── */
.lane-track {
  position: relative; height: 16px; border-radius: 8px; overflow: visible; border: 1px solid rgba(168,216,234,0.10);
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(168,216,234,0.08) calc(10% - 1px) 10%), linear-gradient(180deg, rgba(5,8,13,0.9), rgba(12,20,29,0.9));
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(168,216,234,0.06);
}
.lane-fill { border-radius: 8px; }
.lane-iss .lane-fill { background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 55%), linear-gradient(90deg, #1E5F80, #2E86AB 40%, #A8D8EA); box-shadow: 0 0 16px rgba(168,216,234,0.35), inset 0 -2px 4px rgba(5,8,13,0.25); }
.lane-avg .lane-fill { background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 55%), repeating-linear-gradient(115deg, #4a5562 0 8px, #3c4651 8px 16px); background-size: auto, 32px 100%; animation: lane-churn 1.2s linear infinite; }
@keyframes lane-churn { to { background-position: 0 0, 32px 0; } }
.lane.done .lane-fill { animation: none; }
.lane-track::after {   /* the leading edge: a bright bead that rides the front of the fill */
  content: ''; position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0 30%, rgba(168,216,234,0.85) 45%, rgba(168,216,234,0) 72%); box-shadow: 0 0 14px 4px rgba(168,216,234,0.45);
  opacity: calc(min(1, var(--p, 0) * 40));
}
.lane-avg .lane-track::after { background: radial-gradient(circle, #DCE3EA 0 30%, rgba(160,170,182,0.7) 45%, rgba(160,170,182,0) 72%); box-shadow: 0 0 10px 2px rgba(160,170,182,0.25); }
.lane.done .lane-track::after { opacity: 0; transition: opacity .4s ease; }
.lane.done .lane-track::before {   /* done: a small check at the finish */
  content: ''; position: absolute; right: -6px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #EAF6FB, #8FC6DC); box-shadow: 0 0 12px rgba(168,216,234,0.6); animation: lane-done .5s cubic-bezier(.3,1.4,.5,1) both;
}
.lane-avg.done .lane-track::before { background: radial-gradient(circle at 35% 30%, #DCE3EA, #8A96A3); box-shadow: none; }
@keyframes lane-done { from { transform: scale(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lane-avg .lane-fill, .lane.done .lane-track::before { animation: none; } }