/* ==========================================================================
   FANGIN — Chapter transition: FEEL/CONVERT reveal → Selected Work
   Bridges the locked hero reveal and the locked Mowermerch takeover with a
   single continuously scroll-scrubbed sequence (assets/js/transition-scroll.js)
   — no static gap. Reuses the hero's own .reveal-line / .word-feel /
   .word-convert classes (defined in hero.css) so the opening frame is
   pixel-identical to where the hero left off; this file adds no rules to
   those classes and never touches hero.css or hero-scroll.js.

   Structure (see index.html):
     .transition-pin              <- pinned by ScrollTrigger
       .transition-backdrop        <- the section's own bone fill (see note
                                       below on why this isn't a plain
                                       background on .transition-pin
                                       itself) — fades away in the final
                                       act so the (locked) Mowermerch scene
                                       rising in behind it becomes visible
       .transition-scene
         .transition-type          <- duplicate of the reveal copy
           .t-fade                  <- the "black" supporting words —
                                       recede as the sequence plays
           [data-transition-word]   <- FEEL / CONVERT — drift apart, stay
                                       fully coloured, then in the final
                                       act move/fade out as Mowermerch
                                       rises
           .transition-rule          <- lives inside the middle line
                                       ("Designed to"); draws a horizontal
                                       rule + reveals the SELECTED WORK
                                       label in that same slot as the line
                                       recedes, then in the final act
                                       travels down toward the lower
                                       viewport as the visual mechanism
                                       that "hands off" to Mowermerch
     .transition-static-fallback  <- reduced-motion equivalent: a plain,
                                      always-visible divider, no animation

   Final act (added after the FEEL/CONVERT/rule reveal, which is otherwise
   unchanged): rather than holding at full formation and then handing off
   to a separately-pinned Mowermerch section (which read as a dead, blank
   beat — see initTransition() in transition-scroll.js for the full
   explanation), the SELECTED WORK line becomes the mechanism that
   introduces Mowermerch. As it travels down through the lower viewport,
   .transition-backdrop fades away to reveal the (locked, unmodified)
   Mowermerch scene already rising in behind it — its own real
   ScrollTrigger deliberately started early enough (again, see
   transition-scroll.js) that the rise is genuinely underway by the time
   the backdrop has thinned enough to show it, so there's continuous
   motion and never a blank frame between the two scenes.
   ========================================================================== */

.transition-pin {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  /* No background here — see .transition-backdrop below. No margin here
     by default — see the comment in initTransition()
     (assets/js/transition-scroll.js) for why the gap-closing negative
     margins are applied there instead of as static CSS: they must not
     apply in reduced-motion mode, where this section is plain in-flow
     content rather than a pinned trigger. */
  /* z-index is intentionally NOT set here as static CSS — see the
     stacking-fix comment in initTransition() (transition-scroll.js) for
     why it has to be applied imperatively, on both this element and its
     GSAP pin-spacer, instead. */
}

/* The section's own opaque fill, kept as a separate layer (rather than a
   background on .transition-pin itself) specifically so it can fade away
   on its own in the final act without taking the FEEL/CONVERT/rule
   content — which sits in .transition-scene, stacked above this — down
   with it. Comes first in DOM order (and .transition-scene second) so it
   paints behind that content with no z-index trickery needed. */
.transition-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-bone);
}

.transition-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--edge-gutter);
}

/* Mirrors .hero-reveal-inner's box exactly so the handoff frame lines up
   pixel-for-pixel with where the hero's own reveal left off. */
.transition-type {
  max-width: var(--max-content-width);
  width: 100%;
  margin: 0 auto;
}

.transition-type .reveal-line {
  position: relative;
}

.t-fade {
  display: inline-block;
  will-change: opacity, transform;
}

[data-transition-word] {
  display: inline-block;
  will-change: transform;
}

/* ---- The editorial rule, anchored inside the "Designed to" line's own
   box so it occupies exactly the space that line's text recedes from ---- */
.transition-rule {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.transition-rule-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--color-ink);
  opacity: 0.4;
  transform: scaleX(0);
  transform-origin: center;
}

.transition-rule-label {
  position: relative;
  z-index: 1;
  background: var(--color-bone);
  padding: 0 18px;
  color: var(--color-ink);
  opacity: 0;
}

/* ---- Reduced-motion / static fallback ----
   A short, plain divider — thin rule + label, always visible, no motion —
   rather than the dead space this chapter replaces. */
.transition-static-fallback {
  display: none;
  position: relative;
  height: 30vh;
  width: 100%;
  background: var(--color-bone);
  align-items: center;
  justify-content: center;
}

.transition-static-fallback.is-active {
  display: flex;
}

.transition-static-fallback .transition-rule-line {
  position: absolute;
  left: var(--edge-gutter);
  right: var(--edge-gutter);
  transform: none;
}

.transition-static-fallback .transition-rule-label {
  opacity: 0.7;
}

@media (max-width: 900px) {
  /* Desktop-first: the left/right drift and rule placement are tuned for
     wide viewports. Tablet/mobile treatment to be designed separately. */
  .transition-type {
    padding-right: 0;
  }
}