/*
 * page-flow.css — v2026-06-13
 * TNAADO Media · continuous-page glow system
 *
 * PURPOSE: Make every page feel like ONE long image, not separate sections.
 * Glows bleed between sections, animations breathe out of phase down the page,
 * and a fixed red spine keeps the brand colour alive throughout.
 *
 * Load order: after tn-chrome-css, before page-specific CSS.
 * Never edit per-page — override via utility classes only.
 */

/* ============================================================
   1. RED SPINE — fixed vertical glow, full page height, centre-right
      Ensures red never fully disappears between sections.
      prefers-reduced-motion: keeps static version (no animation).
   ============================================================ */

body::before {
  content: '';
  position: fixed;
  top: 0;
  right: 25%;
  width: 2px;
  height: 100vh;
  background: linear-gradient(
    to bottom,
    transparent                    0%,
    rgba(200, 16, 46, 0.04)       20%,
    rgba(200, 16, 46, 0.06)       50%,
    rgba(200, 16, 46, 0.04)       80%,
    transparent                   100%
  );
  z-index: 0;
  pointer-events: none;
  animation: spineBreath 12s ease-in-out infinite alternate;
}

@keyframes spineBreath {
  from { opacity: 0.6; }
  to   { opacity: 1;   }
}

/* ============================================================
   2. ENHANCED EMBER BRIDGES
      Overrides the per-page .ember definition.
      Radial gradient (not linear) so the glow blooms outward.
      Negative margins pull it into both adjacent sections so
      Section A's glow bleeds INTO the ember and the ember
      bleeds INTO Section B — no hard edge between them.
   ============================================================ */

.ember {
  background: radial-gradient(
    ellipse 120% 80% at 50% 50%,
    rgba(200, 16, 46, 0.16)  0%,
    rgba(200, 16, 46, 0.06) 50%,
    transparent             100%
  );
  height: 200px;
  margin-top: -100px;
  margin-bottom: -100px;
  position: relative;
  z-index: 2;
  pointer-events: none;
  animation: emberBridge 10s ease-in-out infinite alternate;
  will-change: opacity;
}

/* ============================================================
   3. SECTION BOTTOM FADE
      Add .section-fade-bottom to any section with a bg photo
      or strong glow so it dissolves cleanly into the next section.
      The ::after is painted above the photo (z-index: 3) but
      below interactive content.
   ============================================================ */

.section-fade-bottom {
  position: relative;
  overflow: visible;
}

.section-fade-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #0a0a0a);
  z-index: 3;
  pointer-events: none;
}

/* Alias kept for backwards compatibility */
.has-photo {
  position: relative;
  overflow: visible;
}

.has-photo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #0a0a0a);
  z-index: 3;
  pointer-events: none;
}

/* ============================================================
   4. GLOW CONTINUITY UTILITIES — chained animation delays
      Apply to section glow elements so breathing cycles ripple
      DOWN the page as you scroll (wave of red light).
      Offset: 3.3 s per step → 6 steps = 16.5 s full cycle.
      Chain: .glow-chain-1 → .glow-chain-2 → … → .glow-chain-6
   ============================================================ */

.glow-chain-1 { animation-delay: 0s;    }
.glow-chain-2 { animation-delay: 3.3s;  }
.glow-chain-3 { animation-delay: 6.6s;  }
.glow-chain-4 { animation-delay: 9.9s;  }
.glow-chain-5 { animation-delay: 13.2s; }
.glow-chain-6 { animation-delay: 16.5s; }

/* Generic ambient breath — applied to overlay/glow elements that carry a
   glow-chain-N class but have no section-specific named animation.
   Sections with their own named keyframes (tnEyeGlowBreathe, tnDoorwayGlow)
   already define animation:, so they'll only inherit the delay from above. */
@keyframes chainBreath {
  from { opacity: 0.55; }
  to   { opacity: 1;    }
}

.hero-overlay.glow-chain-1 {
  animation: chainBreath 10s ease-in-out infinite alternate;
}

.dispatch-glow.glow-chain-3 {
  animation: chainBreath 10s ease-in-out infinite alternate;
}

.section-bg-overlay.glow-chain-4 {
  animation: chainBreath 10s ease-in-out infinite alternate;
}

.labs-overlay.glow-chain-5 {
  animation: chainBreath 10s ease-in-out infinite alternate;
}

/* ============================================================
   5. BOLT RESIDUAL
      After a lightning/dispatch bolt fires in a hero, the
      .bolt-residual element carries the slow-fading afterglow
      that BECOMES the ambient light for the next section.
      Position: absolute, bottom-anchored to the hero.
      The glow ellipse opens downward (Y 0%) so it bleeds OUT
      of the hero and into whatever section follows.
   ============================================================ */

.bolt-residual {
  position: absolute;
  bottom: -80px;
  left: 0;
  right: 0;
  height: 160px;
  background: radial-gradient(
    ellipse 60% 100% at 60% 0%,
    rgba(200, 16, 46, 0.12),
    transparent
  );
  z-index: 1;
  pointer-events: none;
  animation: residualFade 14.43s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes residualFade {
  0%,  85% { opacity: 0; }
  88%       { opacity: 1; }
  100%      { opacity: 0; }
}

/* ============================================================
   6. PREFERS-REDUCED-MOTION
      Kill all animation-based motion.
      Static glows, spine, and ember remain visible — only the
      movement is removed, not the colour.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .ember { animation: none; }
  body::before {
    animation: none;
    opacity: 0.8; /* static spine — always present */
  }

  .bolt-residual {
    animation: none;
    opacity: 0; /* residual is motion-only; hide it */
  }

  /* Kill chainBreath on all overlay elements */
  .hero-overlay.glow-chain-1,
  .dispatch-glow.glow-chain-3,
  .section-bg-overlay.glow-chain-4,
  .labs-overlay.glow-chain-5 {
    animation: none;
    opacity: 1;
  }

  /* glow-chain delays are meaningless without animation —
     reset so static glow is always at full opacity */
  .glow-chain-1,
  .glow-chain-2,
  .glow-chain-3,
  .glow-chain-4,
  .glow-chain-5,
  .glow-chain-6 {
    animation-delay: 0s;
  }
}

@keyframes emberBridge {
  from { opacity: .55; }
  to   { opacity: 1; }
}