/* ==========================================================================
   WIZKET — horizon.css  (About page · Vision / Mission / Approach)
   Three scenes over one sticky 3D backdrop:
     01 HORIZON — vision   ·   02 COSMOS — mission   ·   03 INFINITY — approach
   The copy panels scroll naturally (no scrubbed fades → nothing can flicker);
   the camera flies through the ridgeline and up into the light behind them.
   Layers (back → front): CSS sky · giant Anton words (synced to their panel)
   · WebGL · copy panels. The giant words sit *behind* the mountains.
   Orange: the three full stops and the label ticks. Nothing else.
   ========================================================================== */

.hz {
  --hz-pad: clamp(20px, 3.4vw, 48px);
  --hz-gap: 34vh;                       /* the 3D breathes between scenes */
  --hz-giant-top: 0.19;                 /* giant word: fraction of the screen from the top */
  position: relative;
  background: var(--bg);
}

/* the seam with the hero above: its floor ends on --bg, so fade the sky in from --bg */
.hz::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 42vh;
  z-index: 1;                           /* over the sticky 3D stage, under the copy panels */
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 35%, transparent 100%);
}

/* ---------- sticky backdrop ---------- */
.hz__stage {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;                        /* vh (not svh): stays put when mobile toolbars move */
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(70% 55% at 50% 62%, var(--petrol) 0%, transparent 70%),
    var(--bg);
  contain: strict;
}

.hz__giants {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hz-giant {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  text-align: center;
  font: 400 clamp(6rem, min(22vw, 44vh), 29rem)/0.86 var(--font-display);
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;                     /* mask for the character reveal */
  padding: 0.02em 0 0.04em;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 120vh, 0);  /* parked off-screen until JS places it */
}
.hz-giant__word { display: inline-block; }
.hz-c { display: inline-block; will-change: transform; }

.hz__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
}
.hz.is-gl .hz__canvas { opacity: 1; }

/* No WebGL: a drawn horizon so the composition still holds */
.hz--nogl .hz__stage::after {
  content: "";
  position: absolute;
  inset: 64% 0 0;
  z-index: 1;
  background: linear-gradient(to bottom, var(--steel), var(--bg) 70%);
  border-top: 1px solid var(--line2);
}

/* ---------- copy panels (normal flow, over the backdrop) ---------- */
.hz__panels {
  position: relative;
  z-index: 2;
  margin-top: -100vh;                   /* pull the panels up over the sticky stage */
  pointer-events: none;
}
.hz-panel {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(104px, 14vh, 136px) var(--hz-pad) clamp(34px, 7vh, 72px);
}
.hz-panel + .hz-panel { margin-top: var(--hz-gap); }

.hz-label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.hz-label__rule {
  position: relative;
  width: 36px;
  height: 1px;
  background: var(--line2);
}
.hz-label__rule::after {               /* the tick: orange, 3px */
  content: "";
  position: absolute;
  right: 0;
  top: -1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
}
.hz-label__n { color: var(--muted); letter-spacing: 0.18em; }

.hz-panel__foot {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 5vw, 96px);
}
.hz-panel__title {
  margin: 0;
  font: 400 clamp(2.4rem, min(4.9vw, 9vh), 6.2rem)/0.92 var(--font-display);
  letter-spacing: 0.006em;
  text-transform: uppercase;
  color: var(--text);
}
.hz-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}
.hz-line > span { display: block; text-wrap: balance; will-change: transform; }
.hz-dot { font-style: normal; color: var(--accent); }

.hz-panel__text {
  margin: 0 0 0.35em;
  justify-self: end;
  max-width: 36ch;
  font: 400 clamp(0.98rem, 1.15vw, 1.15rem)/1.6 var(--font-body);
  letter-spacing: 0.005em;
  color: var(--muted);
}

/* without JS the giant words have no panel to follow: show the first only */
html:not(.js) .hz-giant[data-hz-giant="0"] { transform: translate3d(0, 19vh, 0); }

/* ---------- laptop ---------- */
@media (max-width: 1180px) {
  .hz-panel__foot { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

/* ---------- tablet ---------- */
@media (max-width: 900px) {
  .hz { --hz-gap: 26vh; --hz-giant-top: 0.31; }
  .hz-giant { font-size: clamp(5rem, 22vw, 13rem); }
  .hz-panel__foot { grid-template-columns: 1fr; gap: 18px; }
  .hz-panel__title { font-size: clamp(2.4rem, 8.4vw, 4.6rem); }
  .hz-panel__text { justify-self: start; max-width: 42ch; }
}

/* ---------- phone: centred scene, the giant word is locked to its panel ----------
   label (top) · giant word · headline + line (centred, below the word).
   --hz-parallax: 1 → the giant word scrolls with its own copy, so it can never
   slide into the text of the panel above or below it. */
@media (max-width: 760px) {
  .hz { --hz-gap: 18vh; --hz-giant-top: 0.2; --hz-parallax: 1; }
  .hz-panel {
    grid-template-rows: auto 1fr;
    padding: 96px var(--hz-pad) 40px;
    text-align: center;
  }
  .hz-label { justify-content: center; font-size: 11px; letter-spacing: 0.2em; gap: 10px; }
  .hz-label__rule { width: 24px; }
  .hz-giant { font-size: min(21vw, 15vh); }
  .hz-panel__foot {
    align-self: start;
    margin-top: calc(23vh + min(21vw, 15vh) * 0.92 - 108px);   /* starts just under the giant word (row 2 begins ~108px down) */
    justify-items: center;
    gap: 16px;
  }
  .hz-panel__title { font-size: clamp(2.2rem, 10.4vw, 3.6rem); }
  .hz-line > span { text-wrap: balance; }
  .hz-panel__text { justify-self: center; max-width: 32ch; font-size: 0.98rem; }
}

/* short landscape */
@media (max-height: 640px) and (min-width: 901px) {
  .hz { --hz-giant-top: 0.16; }
  .hz-giant { font-size: clamp(5rem, 38vh, 17rem); }
  .hz-panel__title { font-size: clamp(2rem, 8.5vh, 4rem); }
}

/* highlighted word in a headline (future · purpose · discipline) */
.hz-hl { font-style: normal; color: var(--accent); }

/* ==========================================================================
   04 · THE CREW + 05 · LIFTOFF  (the flight carries on into space)
   ========================================================================== */
.hz-meta { justify-self: end; margin: 0 0 0.35em; max-width: 36ch; }
.hz-panel--fly { pointer-events: none; }

/* scroll is held while the launch plays out */
/* only <html>: overflow on <body> would make it the sticky container and the stage would jump away */
html.lz-lock { overflow: hidden; overscroll-behavior: none; }
html.lz-lock body { touch-action: none; }

.hz-panel--launch {
  grid-template-rows: auto 1fr auto;
  pointer-events: none;
}
.lz__copy { display: grid; align-content: start; }
.lz__pre, .lz__post { grid-area: 1 / 1; display: grid; justify-items: start; align-content: start; gap: 18px; }
.lz__title { font-size: clamp(2.2rem, min(4.4vw, 8vh), 5.2rem); }
.lz__text { justify-self: start; margin: 0; max-width: 34ch; }
.lz__label {
  margin: 0; display: flex; align-items: center; gap: 14px;
  font: 600 12px/1 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text); white-space: nowrap;
}
.lz__line { display: block; white-space: nowrap; }
.lz__title--post { margin: 0; font: 400 clamp(2.2rem, min(4.4vw, 8vh), 5.2rem)/0.92 var(--font-display); letter-spacing: 0.006em; text-transform: uppercase; color: var(--text); }
.lz__text--post { margin: 0; max-width: 34ch; font: 400 clamp(0.98rem, 1.15vw, 1.15rem)/1.6 var(--font-body); color: var(--muted); }
.lc { display: inline-block; will-change: transform; }

.lz__post { visibility: hidden; }
.hz-panel--launch.is-rebuilt .lz__post { visibility: visible; }
.hz-panel--launch.is-rebuilt .lz__pre, .hz-panel--launch.is-rebuilt .lz__act { visibility: hidden; }

.lz__end { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 6px; }
.lz__cta { height: 54px; padding: 0 30px; font-size: 15.5px; pointer-events: auto; }
.lz__again {
  padding: 8px 2px; border: 0; background: none; color: var(--muted); cursor: pointer; pointer-events: auto;
  font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.6s 0.4s, color 0.3s;
}
.hz-panel--launch.is-done .lz__again { opacity: 1; }
.lz__again:hover { color: var(--accent); }

/* press-and-hold button, over the moon below the rocket */
.lz__act { grid-row: 3; justify-self: center; display: grid; justify-items: center; gap: 12px; }
.lz__hold {
  --p: 0;
  position: relative;
  width: 104px; aspect-ratio: 1;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--text); color: var(--bg);
  cursor: pointer; pointer-events: auto;
  touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 18px 44px -16px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: transform 0.35s var(--ease-out), background-color 0.4s var(--ease-io), color 0.4s var(--ease-io);
}
.lz__hold:hover { transform: scale(1.05); }
.lz__hold.is-held { transform: scale(0.93); background: var(--accent); color: #fff; }
.lz__hold:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
.lz__hold::after {                       /* a soft ping so it reads as "press me" */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  animation: lz-ping 2.2s ease-out infinite;
}
.lz__hold.is-held::after { animation: none; }
@keyframes lz-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 80%, 100% { box-shadow: 0 0 0 22px transparent; } }
.lz__ring { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); transform: rotate(-90deg); pointer-events: none; }
.lz__ring circle { fill: none; stroke-width: 3; }
.lz__ring .bg { stroke: var(--line2); }
.lz__ring .fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 289.03; stroke-dashoffset: calc(289.03 * (1 - var(--p))); }
.lz__hold-in { position: relative; display: grid; place-items: center; gap: 3px; font: 700 12px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; }
.lz__hold-in svg { width: 26px; height: 26px; }
.lz__tip { margin: 0; font: 600 11px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-shadow: 0 1px 10px var(--bg); }

/* 3 · 2 · 1 and the flashes live on the sticky stage */
.lz-count {
  position: absolute; left: 50%; top: 44%; z-index: 3;
  margin: 0; transform: translate(-50%, -50%);
  font: 400 clamp(7rem, 24vw, 17rem)/1 var(--font-display); color: var(--accent);
  pointer-events: none; opacity: 0;
}
.lz-count.is-pop { animation: lz-pop 0.62s var(--ease-out) forwards; }
@keyframes lz-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}
.lz-flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: #fff; transition: opacity 0.2s ease-out; }

@media (max-width: 900px) {
  .hz-meta { justify-self: start; }
}
@media (max-width: 760px) {
  .hz-meta { justify-self: center; text-align: center; }
  .hz-panel--launch { padding-top: 92px; padding-bottom: 28px; }
  .lz__pre, .lz__post { justify-items: center; text-align: center; gap: 12px; }
  .lz__text, .lz__text--post { justify-self: center; font-size: 0.95rem; max-width: 30ch; }
  .lz__pre .lz__text, .lz__text--post { display: none; }   /* keeps the sun clear; the tip / the button say it */
  .lz__title, .lz__title--post { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .lz__label { font-size: 11px; letter-spacing: 0.2em; gap: 10px; justify-content: center; }
  .lz__end { justify-content: center; }
  .lz__hold { width: 90px; }
  .lz__cta { height: 50px; padding: 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .lz__hold::after { animation: none; }
}