/*
 * page-flow.css — TNAADO Continuous Page Flow System
 * service.tnaado.ca (tnaado-service-next)
 *
 * Six components that make the page read as ONE long design panel:
 *   1. Glow Bridges (.ember)
 *   2. Section Bottom Fades (.has-photo::after, .has-video::after)
 *   3. Chained Animation Delays (.glow-chain-N) — 20s cycle for 6-section pages
 *   4. Lightning Residual (.bolt-residual)
 *   5. The Red Spine (body::before)
 *   6. Reduced-motion overrides
 *
 * Color reference: #0a0a0a bg, #c8102e accent red.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. GLOW BRIDGES
   .ember divs sit between every section. They bleed 100 px into each
   neighbour via negative margins so the red bleeds across the boundary.
───────────────────────────────────────────────────────────────────────────── */
.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;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. SECTION BOTTOM FADES
   Any section that carries a background photo or video gets a ::after that
   dissolves to pure #0a0a0a at its exact bottom edge — matching the top of
   whatever follows it so the join is invisible.
───────────────────────────────────────────────────────────────────────────── */
.has-photo,
.has-video {
  position: relative;
}

.has-photo::after,
.has-video::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;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. CHAINED ANIMATION DELAYS — SERVICE SITE (6-section pages)
   Spread across a 20s cycle so the breathing ripples DOWN the page like a
   slow wave of red light rather than all pulsing in sync.

   Usage: add class glow-chain-1 … glow-chain-6 to any element that already
   has a breathing / pulse animation (e.g. a radial glow overlay).
   The delay alone shifts its phase; no animation-name change is needed.

   Spacing: 20s ÷ 6 ≈ 3.33s per step.
───────────────────────────────────────────────────────────────────────────── */
.glow-chain-1 { animation-delay: 0s; }
.glow-chain-2 { animation-delay: 3.33s; }
.glow-chain-3 { animation-delay: 6.66s; }
.glow-chain-4 { animation-delay: 9.99s; }
.glow-chain-5 { animation-delay: 13.32s; }
.glow-chain-6 { animation-delay: 16.65s; }

/* ─────────────────────────────────────────────────────────────────────────────
   4. LIGHTNING RESIDUAL
   After a dispatch-style bolt fires in the hero, this element holds the
   slow-fading ember that becomes the ambient light for the next section.
   Place a <div class="bolt-residual" aria-hidden="true"></div> as the last
   child of any hero or bolt-carrying section.
───────────────────────────────────────────────────────────────────────────── */
.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;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. THE RED SPINE
   A fixed 2 px vertical column at ~75% from the left (25% from right) that
   runs the FULL page height. Opacity .03–.06 so it is subliminal — the eye
   never loses the red between sections even in all-black voids.
   The spineBreath animation gently pulses between 60% and 100% opacity of
   that already-low base so it never becomes distracting.
───────────────────────────────────────────────────────────────────────────── */
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;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6b. SECTION GLOW OVERLAY
   Subtle red radial used in plain (no-photo) sections to keep the red chain
   alive across dark-background panels. Gets its phase from glow-chain-N.
   Also used in video/photo sections as a supplemental glow layer.
───────────────────────────────────────────────────────────────────────────── */
.section-glow-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 60% at 50% 80%,
    rgba(200, 16, 46, 0.08) 0%,
    rgba(200, 16, 46, 0.03) 50%,
    transparent 100%
  );
  opacity: 0.7;
}

/* When inside a section that needs relative positioning */
.sv-section {
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .section-glow-overlay {
    animation: sectionGlowBreathe 20s ease-in-out infinite;
  }

  @keyframes sectionGlowBreathe {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.06); }
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6c. SECTION-FADE-BOTTOM explicit class
   Uses ::before (not ::after) so it survives even when the element defines
   its own ::after (e.g. .portfolio-hero, .sv-close). The fade gradient
   dissolves the bottom edge of any video/photo section into pure #0a0a0a.
───────────────────────────────────────────────────────────────────────────── */
.section-fade-bottom {
  position: relative;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   6. REDUCED-MOTION OVERRIDES
   Keep all structural visuals (gradients, the spine itself, glow bridges)
   but kill every animation so users who need it get zero motion.
   The spine, residual, and chain delays are kept as static colours.
───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ember { animation: none; }
  body::before {
    animation: none;
    opacity: 0.8; /* static — enough to tether the red across sections */
  }

  .bolt-residual {
    animation: none;
    opacity: 0; /* hide the bolt flash entirely; static glow is still in .ember */
  }

  /* Freeze all glow-chain elements at their starting opacity — no pulsing */
  .glow-chain-1,
  .glow-chain-2,
  .glow-chain-3,
  .glow-chain-4,
  .glow-chain-5,
  .glow-chain-6 {
    animation: none;
  }

  .section-glow-overlay {
    animation: none;
    opacity: 0.6; /* static tint — keeps the red present without movement */
  }
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   7. MOBILE VIDEO KILL
   Background videos are decorative only. On mobile (<= 767 px) we hide them
   entirely and show the poster background-color instead, saving the entire
   video payload (~2–8 MB per page) on cellular connections.
   The dark-poster.jpg (set via the poster attribute on each <video>) still
   provides a dark base; the section background-color (#0a0a0a) fills the rest.
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .section-bg-video {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. LAZY IMAGE LOADING — non-hero background photos
   All .section-bg-photo elements below the fold carry loading="lazy" in HTML.
   This CSS rule is a declarative hint companion — no behavioral change.
───────────────────────────────────────────────────────────────────────────── */
.section-bg-photo[loading="lazy"] {
  will-change: auto;
}