/* =============================================================
   hero-sequence.css
   Scroll-canvas "fly-in" intro for Agenthusiast.
   Pure browser-native. No external dependencies, no CDNs.

   Layering inside the sticky stage (low to high z):
     0  background (#050505, matches frame 0)
     1  no-js / reduced-motion poster image
     1  canvas (frame scrubber)
     2  white fade-to-bg overlay
     5  scroll cue
    10  loading screen
   ============================================================= */

/* --- Skip link ---
   First focusable element on the page. Sits OUTSIDE .nav so it is never
   affected by the dark-intro nav hide toggle. Off-screen until focused. --- */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 1000;
  background: var(--bg, #ffffff);
  color: var(--ink, #15172b);
  border: 1px solid var(--border, #e6e8f2);
  border-radius: 8px;
  padding: 10px 16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--accent, #5b4bdb);
  outline-offset: 2px;
}

/* --- Visually hidden SEO heading ---
   The hero frames have baked-in text, so there is no visible H1.
   This carries the document semantic heading for crawlers and
   screen readers without competing with the artwork.
   Pairs the legacy clip with the modern clip-path for engines that have
   dropped legacy clip support. --- */
.hero-seq-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  word-break: keep-all;
  border: 0;
}

/* --- Tall scroll wrapper: provides the scroll distance for scrubbing.
   350vh over 121 frames gives a comfortable, cinematic scrub pace. --- */
.hero-seq-wrapper {
  position: relative;
  height: 350vh;
  background: #050505;
}

/* --- Sticky stage: pins to the viewport while the wrapper scrolls past.
   svh keeps it stable against mobile URL-bar resize, with vh fallback. --- */
.hero-seq-stage {
  position: sticky;
  top: 0;
  width: 100%;
  /* svh with vh fallback */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #050505;
}

/* --- Canvas: covers the stage, decorative (aria-hidden).
   will-change: transform promotes the canvas to its own GPU compositor
   layer so per-frame blits are composited off the main thread, reducing
   dropped frames during fast scrolling on lower-end devices. --- */
.hero-seq-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  will-change: transform;
  transform: translateZ(0);
}

/* --- White overlay: fades in near the warp peak so the user "arrives"
   in the light content below instead of a hard cut. Tracks --bg. --- */
.hero-seq-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg, #ffffff);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  z-index: 2;
}

/* --- Loading screen --- */
.hero-seq-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #050505;
  color: rgba(200, 203, 224, 0.7);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 10;
  transition: opacity 0.55s ease;
}
.hero-seq-loader.fade-out {
  opacity: 0;
  pointer-events: none;
}
.hero-seq-progress-track {
  width: 180px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-top: 20px;
  overflow: hidden;
}
.hero-seq-progress-bar {
  height: 100%;
  width: 0%;
  background: rgba(91, 75, 219, 0.85); /* --accent indigo */
  border-radius: 2px;
  transition: width 0.12s linear;
}

/* --- Hero headline font (Orbitron) ---
   Self-hosted (no CDN). Orbitron is a geometric "robot"/sci-fi face used for
   the cursor-following headline. Variable woff2 covers the 700-900 range. --- */
@font-face {
  font-family: "Agenthusiast Robot";
  src: url("/fonts/orbitron-latin.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* --- Hero headline overlay ---
   The new video frames carry no baked-in title, so the old "THE AGENTIC ERA
   STARTS HERE" headline is recreated here as real text over the canvas. It sits
   in the dark negative space on the RIGHT, in a robot/sci-fi font, and follows
   the cursor (parallax) via hero-sequence.js. Opacity is scroll-driven (full at
   the top, gone by ~16% as the camera pushes in); the transform is owned by the
   mouse handler, with a CSS transition so it glides toward the cursor. The
   semantic page heading remains the visually-hidden .hero-seq-h1 above, so this
   is decorative (aria-hidden). --- */
.hero-seq-headline {
  position: absolute;
  left: 5%;
  top: 50%;
  /* translateY(-50%) centers vertically; the mouse handler rewrites transform
     including this offset, and the transition makes it chase the cursor. */
  transform: translateY(-50%);
  transition: transform 0.28s ease-out;
  width: min(48%, 660px);
  margin: 0;
  text-align: left;
  font-family: "Agenthusiast Robot", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.14;
  letter-spacing: 0.04em;
  font-size: clamp(1.4rem, 4.2vw, 3.4rem);
  color: #eef4ff;
  /* 3D extrusion (stacked layers straight down) + a soft offset drop shadow so
     the text reads as a solid object floating above the scene, plus a faint
     blue glow to match the brand. */
  text-shadow:
    0 1px 0 #3a6cc0,
    0 2px 0 #315ea8,
    0 3px 0 #285090,
    0 4px 0 #204278,
    0 5px 0 #193561,
    0 6px 2px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(74, 150, 255, 0.45),
    0 18px 30px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  user-select: none;
  will-change: opacity, transform;
  z-index: 3;
}
.hero-seq-headline .line { display: block; }
.hero-seq-headline .accent {
  /* Brand blue, matching the logo mark and the primary buttons. */
  background: linear-gradient(100deg, #2f6bff 0%, #4ea8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* No-JS / reduced-motion (poster path): the JS fade never runs, so hide the
   headline and let the static poster stand on its own. */
html:not(.hero-seq-js-ready) .hero-seq-headline { display: none; }

/* --- "Scroll to explore" cue --- */
.hero-seq-cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.52);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s ease;
  z-index: 5;
  user-select: none;
}
.hero-seq-cue.hidden {
  opacity: 0;
}
.hero-seq-cue-arrow {
  width: 20px;
  height: 20px;
  border-right: 2px solid rgba(255, 255, 255, 0.42);
  border-bottom: 2px solid rgba(255, 255, 255, 0.42);
  transform: rotate(45deg);
  animation: hero-seq-bounce 1.65s ease-in-out infinite;
}
@keyframes hero-seq-bounce {
  0%, 100% { transform: rotate(45deg) translateY(0px);   opacity: 0.55; }
  50%       { transform: rotate(45deg) translateY(5px);   opacity: 1;    }
}

/* --- Nav hide / reveal via body class ---
   The transition is scoped to the hero feature contexts only, so it never
   leaks onto the bare .nav site-wide and never raises specificity in a way
   that would block styles.css from controlling the nav later. The nav is
   visible by default (styles.css sets no opacity/visibility on it), so the
   only rule we need is the explicit HIDE during the dark intro. --- */
body.hero-seq-active .nav,
body:not(.hero-seq-active) .nav {
  transition: opacity 0.38s ease, visibility 0.38s ease;
}
body.hero-seq-active .nav {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  /* Out of flow during the intro so the sticky nav's ~71px slot doesn't show
     as a dark strip above the hero at scroll 0. It returns to sticky when the
     nav reveals (deep in the autoplay warp, where the reflow is masked). */
  position: fixed;
  left: 0;
  right: 0;
}

/* --- No-JS fallback ---
   JS (the inline head script, then hero-sequence.js) adds .hero-seq-js-ready
   to <html>. Without it (no-js, or reduced-motion which deliberately skips the
   flag), collapse the wrapper and show the poster. --- */
html:not(.hero-seq-js-ready) .hero-seq-wrapper {
  height: auto;
}
html:not(.hero-seq-js-ready) .hero-seq-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
}
html:not(.hero-seq-js-ready) .hero-seq-canvas  { display: none; }
html:not(.hero-seq-js-ready) .hero-seq-loader  { display: none; }
html:not(.hero-seq-js-ready) .hero-seq-overlay { display: none; }
html:not(.hero-seq-js-ready) .hero-seq-cue     { display: none; }

/* Poster: hidden by default, shown when no-js / reduced-motion / error */
.hero-seq-nojs-poster {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 1;
}
html:not(.hero-seq-js-ready) .hero-seq-nojs-poster {
  display: block;
}

/* --- prefers-reduced-motion ---
   The scroll-scrub runs for everyone (it responds to the user's own scrolling,
   not autoplay), so we do NOT disable it here. We only drop purely decorative
   auto-animation: the continuously bouncing cue arrow. The nav still hides
   during the dark intro and reveals on arrival, same as the default path. --- */
@media (prefers-reduced-motion: reduce) {
  .hero-seq-cue-arrow { animation: none; }
}