/* ============================================================
   CLIO INTRO -- one-time loading animation played before the homepage
   hero on a visitor's first load. Entirely gated by the
   `has-clio-intro` class added synchronously to <html> by an inline
   script in home.html's <head>, BEFORE the nav/hero markup is even
   parsed -- so there is never a flash of hidden-then-shown chrome.
   Repeat visits in the same tab (sessionStorage) and
   prefers-reduced-motion both skip adding that class, which leaves
   every selector below inert: the overlay stays display:none and the
   nav/hero render normally on first paint, at zero extra cost.

   Sequence, driven entirely by clio-intro.js via `data-stage` on
   #clio-intro: "curtain" (solid amber, full-page, nothing else visible)
   -> "curtain-exit" (curtain slides up and away) -> "loading" (curtain
   gone, revealing this overlay's own black background, Lottie animation
   fades in and plays) -> "exit" (animation done, whole overlay fades,
   nav/hero cascade in) -> "done" (removed). The Lottie file itself
   (see clio-intro.js) drops into #clio-intro-lottie -- this stylesheet
   only owns the overlay chrome (curtain, mark sizing/timing, nav/hero
   reveal cascade), not the Lottie animation's own motion.
   ============================================================ */

:root {
  --clio-curtain-duration: 0.7s;
  --clio-exit-duration: 0.8s;
}

.clio-intro {
  display: none;
}

html.has-clio-intro .clio-intro {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 900;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
  opacity: 1;
  transition: opacity var(--clio-exit-duration) var(--ease);
}

html.has-clio-intro .clio-intro[data-stage="exit"],
html.has-clio-intro .clio-intro[data-stage="done"] {
  opacity: 0;
}

html.has-clio-intro .clio-intro[data-stage="done"] {
  display: none;
}

/* The full-page curtain -- a real fixed-viewport panel, not part of the
   Lottie composition, so it can cover the whole page on its own before
   anything else appears. Sits ABOVE `.clio-intro__mark` (z-index) so it
   fully hides the animation underneath until it slides away right-to-left
   at "curtain-exit", uncovering this overlay's own black background with
   the animation then fading in on top of it (see "loading" below). */
.clio-intro__curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #e8a857;
  transform: translateX(0);
  transition: transform var(--clio-curtain-duration) var(--ease);
}

html.has-clio-intro .clio-intro[data-stage="curtain-exit"] .clio-intro__curtain,
html.has-clio-intro .clio-intro[data-stage="loading"] .clio-intro__curtain,
html.has-clio-intro .clio-intro[data-stage="exit"] .clio-intro__curtain,
html.has-clio-intro .clio-intro[data-stage="done"] .clio-intro__curtain {
  transform: translateX(-100%);
}

/* Sized to fill as much of the viewport as it can without ever
   overflowing either dimension -- whichever of "90% of the viewport
   width" or "the width that 90% of the viewport height works out to at
   this animation's own 800:600 ratio" is smaller wins, so it scales
   dynamically with the window instead of sitting in a small fixed box.
   Hidden (opacity 0) until "loading" -- clio-intro.js doesn't even start
   the Lottie animation until the curtain has fully cleared, so there's
   nothing to reveal here before then anyway. */
.clio-intro__mark {
  position: relative;
  z-index: 1;
  width: min(90vw, calc(90vh * 800 / 600));
  aspect-ratio: 800 / 600;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

html.has-clio-intro .clio-intro[data-stage="loading"] .clio-intro__mark,
html.has-clio-intro .clio-intro[data-stage="exit"] .clio-intro__mark {
  opacity: 1;
}

/* Scene.json (a Jitter.video export) has a "jitter.video" watermark
   baked permanently into its bottom-right corner as vector shapes, not
   something an opacity/visibility toggle in the JSON can remove --
   confirmed static across every frame at (677,555)-(785,585) of its
   native 800x600 canvas. Patched over with a panel sized in % (so it
   scales with the animation at any viewport) matching THIS overlay's
   own black background -- the mark only ever becomes visible once the
   amber curtain has already risen away and revealed that black behind it. */
.clio-intro__mark::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16%;
  height: 9%;
  background: var(--bg);
  pointer-events: none;
}

/* ---------------------------------------------------------- hero/nav handoff
   Hidden until the intro's exit stage flips `clio-intro-revealed` on
   <html>, at which point they fade/settle in on a short cascade --
   nav first, then heading, sub and CTA in that order -- so the
   animation dissolving overhead and the page assembling underneath
   read as one continuous move, not a loader-then-page cut. */
html.has-clio-intro #l-nav {
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

html.has-clio-intro .l-hero__kicker,
html.has-clio-intro .l-hero h1,
html.has-clio-intro .l-hero__sub,
html.has-clio-intro .l-hero__ctas {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

html.has-clio-intro .l-hero h1 { transition-delay: 0.08s; }
html.has-clio-intro .l-hero__sub { transition-delay: 0.16s; }
html.has-clio-intro .l-hero__ctas { transition-delay: 0.26s; }

html.has-clio-intro.clio-intro-revealed #l-nav {
  opacity: 1;
}

html.has-clio-intro.clio-intro-revealed .l-hero__kicker,
html.has-clio-intro.clio-intro-revealed .l-hero h1,
html.has-clio-intro.clio-intro-revealed .l-hero__sub,
html.has-clio-intro.clio-intro-revealed .l-hero__ctas {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------- accessibility
   Belt-and-suspenders: clio-intro.js already checks matchMedia before
   doing anything and the head script never adds `has-clio-intro` for
   reduced-motion users, so in the ordinary case this rule never even
   needs to fire. It stays as a hard fallback in case JS fails to run
   at all, per the reduced-motion requirement. */
@media (prefers-reduced-motion: reduce) {
  html.has-clio-intro .clio-intro {
    display: none !important;
  }
  html.has-clio-intro #l-nav,
  html.has-clio-intro .l-hero__kicker,
  html.has-clio-intro .l-hero h1,
  html.has-clio-intro .l-hero__sub,
  html.has-clio-intro .l-hero__ctas {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}