/* ============================================================================
   BHAZAR — cinema.css  ·  Scroll-driven "change of scenery" transitions
   ----------------------------------------------------------------------------
   GOAL (NRG-style): each section reads as a SCENE that smoothly ARRIVES as it
   enters the viewport and gently DEPARTS as it leaves upward, so consecutive
   sections cross-transition like a cinematic change of scenery. NOT per-object
   gimmicks — the whole scene (its .container body + its .section-header) moves
   as one, with the header carrying slightly more depth (parallax feel).

   HOW: native CSS scroll-driven animations (animation-timeline: view()).
   Scroll-scrubbed, no JS, no scroll listeners, no jank. transform + opacity
   ONLY (GPU-composited, 60fps). No backdrop-filter, no skew, no shadow anim.

   ┌─────────────────────────────────────────────────────────────────────────┐
   │ HARD CONSTRAINTS (this project was burned by these — honored exactly):    │
   │                                                                           │
   │  1. Content must NEVER "start black / hidden". The BASE state (no          │
   │     scroll-timeline support, OR reduced-motion) is FULLY VISIBLE           │
   │     (opacity:1, transform:none). We add NOTHING outside the @supports      │
   │     block, so unsupported browsers render every section normally.          │
   │                                                                           │
   │  2. ALL scroll-driven rules are wrapped in                                │
   │     @supports (animation-timeline: view()).                               │
   │                                                                           │
   │  3. A @media (prefers-reduced-motion: reduce) block (INSIDE @supports)     │
   │     disables every animation-timeline + resets to the visible base.       │
   │                                                                           │
   │  4. Even WITH support, opacity NEVER drops below ~0.85 in the readable/    │
   │     centered range. A section only dims slightly at the far entry/exit     │
   │     EDGES (well off-center) — it is never black as you reach it. The       │
   │     keyframe at the readable midpoint is a full opacity:1 / transform:none │
   │     resting frame.                                                         │
   │                                                                           │
   │  5. transform / opacity ONLY. 60fps.                                       │
   │                                                                           │
   │  6. SCOPED OUT (these own their animations — never touched here):          │
   │     #hero / .scene--hero, #guilds (constellation), #services .doors.       │
   │     We target ONLY the content sections #founding #future #trust #sky      │
   │     plus the .glimpse guild-pill band.                                     │
   └─────────────────────────────────────────────────────────────────────────┘
   ========================================================================== */

/* ===========================================================================
   EVERYTHING below is gated behind @supports. If the browser cannot do
   scroll-driven animations, NONE of this applies and the page renders in its
   normal fully-visible state (site.css owns the base). This is constraint #1/#2.
   =========================================================================== */
@supports (animation-timeline: view()) {

  /* -- shared scrub keyframes ------------------------------------------------
     ARRIVE (entry): rise + slight scale-up + opacity-up as the scene enters.
     The DEPART tail (exit) lives in its own keyframes so we can drive entry and
     exit on two separate animation-timeline ranges per element.

     NOTE on min-opacity (constraint #4): the lowest opacity any of these ever
     reaches is 0.86, and that ONLY occurs at the extreme entry/exit edge while
     the scene is far off-centre. By the time a scene is anywhere near readable
     it is already at opacity:1 / transform:none. */

  /* SCENE BODY — gentle, tasteful arrival. */
  @keyframes bz-scene-arrive {
    from { opacity: 0.86; transform: translateY(34px) scale(0.988); }
    to   { opacity: 1;    transform: none; }
  }
  /* SCENE BODY — gentle departure as it leaves upward. Stays very readable. */
  @keyframes bz-scene-depart {
    from { opacity: 1;    transform: none; }
    to   { opacity: 0.9;  transform: translateY(-26px) scale(0.992); }
  }

  /* HEADER — slightly STRONGER reveal than the body for parallax depth feel
     (constraint #3). Larger travel + a touch more scale, but opacity floor is
     held at the same safe 0.86 so the title is never black on approach. */
  @keyframes bz-head-arrive {
    from { opacity: 0.86; transform: translateY(56px) scale(0.978); }
    to   { opacity: 1;    transform: none; }
  }
  @keyframes bz-head-depart {
    from { opacity: 1;    transform: none; }
    to   { opacity: 0.9;  transform: translateY(-40px) scale(0.99); }
  }

  /* -------------------------------------------------------------------------
     SCENE BODY  →  the section's .container.
     Scoped to ONLY the content sections; hero/guilds/services excluded by the
     explicit id list. We animate .container (not .section) so .section's
     position:relative stacking context stays untouched.

     Two animations on one timeline:
       · arrive over  entry 0%  → cover 35%   (settles flat while centred)
       · depart over  exit  0%  → exit  100%  (eases away as it leaves up)
     view() makes the timeline the element's own visibility through the
     scrollport, so each scene is scrubbed by itself — independent scenery.
     ------------------------------------------------------------------------- */
  #founding > .container,
  #future   > .container,
  #trust    > .container,
  #sky      > .container,
  .glimpse {
    animation:
      bz-scene-arrive linear both,
      bz-scene-depart linear both;
    animation-timeline: view(), view();
    animation-range:
      entry 0% cover 35%,
      exit 0% exit 100%;
    /* keep the scrubbed transforms on their own GPU layer */
    will-change: opacity, transform;
    transform-origin: 50% 100%;
  }

  /* -------------------------------------------------------------------------
     SCENE HEADER  →  the .section-header inside each targeted section.
     Stronger scrubbed reveal = parallax depth (constraint #3). Same two-range
     arrive/depart model. .section-header already carries [data-reveal] (a JS
     IO reveal). Scroll-driven animations sit ABOVE !important author rules in
     the cascade, so this layer cleanly takes over from .in-view{...!important}
     once supported — and when NOT supported, the JS reveal still runs normally.
     ------------------------------------------------------------------------- */
  #founding .section-header,
  #future   .section-header,
  #trust    .section-header,
  #sky      .section-header {
    animation:
      bz-head-arrive linear both,
      bz-head-depart linear both;
    animation-timeline: view(), view();
    animation-range:
      entry 0% cover 40%,
      exit 0% exit 100%;
    will-change: opacity, transform;
    transform-origin: 50% 100%;
  }

  /* -------------------------------------------------------------------------
     #sky uses a two-column .sky-grid; its header lives inside that grid and the
     coordinate card (.sky-stage) is a sibling. The header rule above already
     covers #sky .section-header. We DON'T animate .sky-stage here — it has its
     own [data-parallax] depth treatment in site.css — so we leave it alone to
     avoid double-transforming. (No rule needed; documented for the next agent.)
     ------------------------------------------------------------------------- */

  /* =========================================================================
     CONSTRAINT #3 SAFETY NET — reduced motion.
     Disable every scroll-driven scene animation and snap back to the fully
     visible base. Belt-and-braces: this lives INSIDE @supports (so it overrides
     the rules above) AND site.css has its own global reduced-motion block.
     ========================================================================= */
  @media (prefers-reduced-motion: reduce) {
    #founding > .container,
    #future   > .container,
    #trust    > .container,
    #sky      > .container,
    .glimpse,
    #founding .section-header,
    #future   .section-header,
    #trust    .section-header,
    #sky      .section-header {
      animation: none !important;
      animation-timeline: none !important;
      opacity: 1 !important;
      transform: none !important;
      will-change: auto;
    }
  }

  /* -------------------------------------------------------------------------
     SMALL SCREENS — soften the magnitudes. On phones the viewport is short,
     so a 56px header rise feels heavy and sections enter/leave fast. Keep the
     cinematic feel but reduce travel; opacity floor stays at the same safe
     level (never black). Still transform/opacity only.
     ------------------------------------------------------------------------- */
  @media (max-width: 768px) {
    @keyframes bz-scene-arrive {
      from { opacity: 0.88; transform: translateY(22px) scale(0.992); }
      to   { opacity: 1;    transform: none; }
    }
    @keyframes bz-scene-depart {
      from { opacity: 1;    transform: none; }
      to   { opacity: 0.92; transform: translateY(-16px) scale(0.995); }
    }
    @keyframes bz-head-arrive {
      from { opacity: 0.88; transform: translateY(32px) scale(0.986); }
      to   { opacity: 1;    transform: none; }
    }
    @keyframes bz-head-depart {
      from { opacity: 1;    transform: none; }
      to   { opacity: 0.92; transform: translateY(-22px) scale(0.993); }
    }
  }

} /* end @supports (animation-timeline: view()) */