/* ==========================================================================
   BIG SKY FPV 2.0 — "Pilot's Monitor" expanding hero
   Reel starts framed as an FPV operator's monitor with telemetry HUD;
   scroll expands it to full-bleed, HUD fades, headline settles, page releases.
   Scrub is driven by scroll position (reversible), transform/clip-path only.
   ========================================================================== */

.xhero { position: relative; height: 280vh; }         /* pin distance = expand runway */
.xhero__stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
  /* transparent: the site-wide fabric layer stays visible around the monitor */
  background: transparent;
}

/* --- rotating aircraft background (behind the monitor, fades as it expands) -- */
.xhero__bg {
  position: absolute; inset: 0;
  opacity: calc(0.45 * (1 - var(--p, 0) * 1.35));      /* gone by ~75% expansion */
  -webkit-mask-image: radial-gradient(110% 110% at 50% 50%, #000 55%, transparent 96%);
          mask-image: radial-gradient(110% 110% at 50% 50%, #000 55%, transparent 96%);
  pointer-events: none;
}
.xhero__bg canvas { width: 100%; height: 100%; }

/* --- the monitor (video wrapper) — JS drives --p from 0→1 ----------------- */
.xhero__monitor {
  position: absolute; inset: 0;
  /* interpolated by JS via clip-path; starts as centered inset window */
  clip-path: inset(calc(28% - 28% * var(--p, 0)) calc(30% - 30% * var(--p, 0)) round calc(4px - 4px * var(--p, 0)));
  will-change: clip-path;
}
.xhero__monitor video, .xhero__monitor img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1.12 - 0.12 * var(--p, 0)));   /* slight settle as it opens */
  will-change: transform;
}
.xhero__monitor::after {                                /* scrim grows with expansion for headline contrast */
  content: ""; position: absolute; inset: 0;
  background: var(--scrim-hero);
  opacity: var(--p, 0);
}

/* --- HUD layer (fades out as monitor expands) ------------------------------ */
.xhero__hud {
  position: absolute; inset: 0; pointer-events: none;
  opacity: calc(1 - var(--p, 0) * 1.6);                /* gone by ~60% expansion */
  font-family: var(--font-mono); font-size: var(--mono-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-secondary);
}
.xhero__hud-corner { position: absolute; width: 22px; height: 22px; border: 1px solid var(--accent); opacity: 0.9; }
.xhero__hud-corner--tl { top: 26%; left: 28.5%; border-right: 0; border-bottom: 0; }
.xhero__hud-corner--tr { top: 26%; right: 28.5%; border-left: 0; border-bottom: 0; }
.xhero__hud-corner--bl { bottom: 26%; left: 28.5%; border-right: 0; border-top: 0; }
.xhero__hud-corner--br { bottom: 26%; right: 28.5%; border-left: 0; border-top: 0; }
.xhero__hud-label { position: absolute; display: flex; gap: var(--space-1); align-items: center; }
.xhero__hud-label--rec { top: 22.5%; left: 28.5%; }
.xhero__hud-label--rec::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #E5484D; animation: rec-blink 1.6s steps(1) infinite;
}
@keyframes rec-blink { 50% { opacity: 0.25; } }
.xhero__hud-label--feed { top: 22.5%; right: 28.5%; }
.xhero__hud-label--geo { bottom: 22.5%; left: 28.5%; }
.xhero__hud-label--sig { bottom: 22.5%; right: 28.5%; }
.xhero__hud-hint {
  position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
  color: var(--text-tertiary); display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.xhero__hud-hint::after {
  content: ""; width: 1px; height: 40px;
  background: linear-gradient(var(--accent), transparent);
}

/* --- headline (arrives as expansion completes) ------------------------------ */
.xhero__copy {
  position: absolute; left: 0; right: 0; bottom: 10%;
  opacity: calc((var(--p, 0) - 0.72) / 0.28);          /* fades in over the last 28% */
  transform: translateY(calc(24px * (1 - var(--p, 0))));
  pointer-events: none;
}
.xhero__copy .container { pointer-events: auto; }
.xhero__copy .hero__title { font-size: var(--display-xl); letter-spacing: -0.02em; }

/* --- mobile: shorter runway, tighter start frame ------------------------------ */
@media (max-width: 768px) {
  .xhero { height: 200vh; }
  .xhero__monitor { clip-path: inset(calc(22% - 22% * var(--p, 0)) calc(10% - 10% * var(--p, 0)) round calc(4px - 4px * var(--p, 0))); }
  .xhero__hud-corner, .xhero__hud-label--geo, .xhero__hud-label--sig { display: none; }
  .xhero__hud-label--rec { top: 18%; left: 12%; }
  .xhero__hud-label--feed { top: 18%; right: 12%; }
}

/* --- reduced motion: no pin, no expand — full-bleed classic hero --------------- */
@media (prefers-reduced-motion: reduce) {
  .xhero { height: 100svh; }
  .xhero__monitor { clip-path: none !important; }
  .xhero__monitor video { display: none; }             /* poster img shown instead */
  .xhero__monitor img { transform: none; }
  .xhero__hud { display: none; }
  .xhero__copy { opacity: 1; transform: none; }
}