/* ============================================================
   PAGE HEADER ATMOSPHERE — shared across all subpages (v6)
   ------------------------------------------------------------
   Brings the index hero's "lit" feeling to every other page:
     • a deep warm bronze halo bloom behind the H1, breathing
       slowly so the whole page-head feels like the inside of a
       lit lantern
     • a generous scatter of fireflies, drifting, glowing,
       slowly pulsing, free-roaming the entire header
     • the H1 STRIKES like the index hero — words rise from
       below, blurred and bright, then settle on a gentle
       continuous bronze breath instead of staccato beats.
     • a flash overlay washes the title band during the strike.

   Applies to BOTH .page-header (default subpages) and
   .m-page-header (mission's bespoke namespace). The JS injects
   the same child class names on either parent: .page-header-halo,
   .page-header-flash, .page-header-sparks.
   ============================================================ */

.page-header,
.m-page-header { position: relative; }

/* ---- THE HALO — focused behind the H1, not the whole page --
   Sits low-left under the title (where the H1 lives in the
   page-header grid), small enough to read as "the words are
   illuminated" rather than "the paper is on fire." Warm, not
   torched: closer to candle than ember. */
.page-header > .page-header-halo,
.m-page-header > .page-header-halo {
  position: absolute;
  /* ~ where the H1 sits: left third, vertically centered on the title block */
  top: 58%;
  left: 22%;
  width: 720px;
  height: 360px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(
      ellipse 60% 55% at 50% 50%,
      rgba(255, 210, 130, 0.32) 0%,
      rgba(240, 170, 80,  0.18) 28%,
      rgba(200, 130, 55,  0.08) 52%,
      rgba(160, 95,  40,  0.02) 72%,
      transparent 88%
    );
  filter: blur(42px);
  opacity: 0.85;
  animation:
    __ph-halo-bloom    1600ms 100ms ease-out both,
    __ph-halo-breathe  6400ms 1700ms cubic-bezier(.45,.05,.55,.95) infinite;
}

@keyframes __ph-halo-bloom {
  from { opacity: 0.45; transform: translate(-50%, -50%) scale(0.92); }
  to   { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
}
@keyframes __ph-halo-breathe {
  0%, 100% { opacity: 0.74; transform: translate(-50%, -50%) scale(1);     filter: blur(42px) brightness(0.96); }
  50%      { opacity: 1.00; transform: translate(-50%, -50%) scale(1.05);  filter: blur(42px) brightness(1.14); }
}

/* A second, tighter halo — the candle directly behind the
   words. Smaller and warmer, breathing on its own cadence. */
.page-header > .page-header-halo::after,
.m-page-header > .page-header-halo::after {
  content: '';
  position: absolute;
  /* tight ellipse over the H1 itself */
  inset: 28% 32%;
  background: radial-gradient(
    ellipse 60% 55% at 50% 50%,
    rgba(255, 198, 110, 0.32) 0%,
    rgba(225, 145, 60,  0.14) 38%,
    transparent 72%
  );
  filter: blur(22px);
  opacity: 0.75;
  animation: __ph-halo-breathe-inner 5200ms 2400ms cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes __ph-halo-breathe-inner {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50%      { opacity: 0.92; transform: scale(1.05); }
}

/* Mobile: collapse the offset — H1 is centered on small screens */
@media (max-width: 900px) {
  .page-header > .page-header-halo,
  .m-page-header > .page-header-halo {
    top: 50%;
    left: 50%;
    width: 90%;
    height: 320px;
  }
}

/* ---- THE FIREFLY HOST ------------------------------------- */
.page-header > .page-header-sparks,
.m-page-header > .page-header-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

/* Lift the page-header content above the atmosphere */
.page-header > .page-header-inner,
.m-page-header > .m-page-header-inner {
  position: relative;
  z-index: 3;
}

/* ---- A SINGLE FIREFLY -------------------------------------
   Now bigger, warmer, with a deep amber outer halo. The
   transform anim moves it across waypoints; a SECOND animation
   on opacity makes it visibly twinkle/breathe so even a still
   firefly looks alive. */
.page-header .__ph-firefly,
.m-page-header .__ph-firefly {
  position: absolute;
  top: 0; left: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  /* Solid bright cream core, fading clean to transparent — no
     coloured rim. Body reads as a small, intense point of light. */
  background: radial-gradient(
    circle,
    #ffffff 0%,
    #FFFBE8 30%,
    #FFE9B4 55%,
    rgba(255, 224, 150, 0.7) 78%,
    rgba(255, 220, 150, 0) 100%
  );
  /* Generous layered cream/gold halo — bright enough to stand out
     against the warm paper, but stays in cream/gold so no visible
     disc-edge forms. */
  box-shadow:
    0 0 8px 3px    rgba(255, 252, 230, 1),
    0 0 18px 6px   rgba(255, 244, 200, 1),
    0 0 36px 11px  rgba(255, 230, 165, 0.9),
    0 0 64px 18px  rgba(255, 220, 150, 0.6),
    0 0 110px 28px rgba(255, 215, 140, 0.32);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation:
    __ph-firefly-drift  var(--dur,    22s) ease-in-out infinite,
    __ph-firefly-glow   var(--gdur,   3.6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s), var(--gdelay, 0s);
  will-change: transform, opacity;
}

/* Slow wandering across 6 waypoints — gentle, never linear */
@keyframes __ph-firefly-drift {
  0%   { transform: translate(calc(var(--x0, 0px) - 50%), calc(var(--y0, 0px) - 50%)) scale(0.85); }
  18%  { transform: translate(calc(var(--x1, 0px) - 50%), calc(var(--y1, 0px) - 50%)) scale(1.10); }
  35%  { transform: translate(calc(var(--x2, 0px) - 50%), calc(var(--y2, 0px) - 50%)) scale(1.18); }
  52%  { transform: translate(calc(var(--x3, 0px) - 50%), calc(var(--y3, 0px) - 50%)) scale(1.02); }
  70%  { transform: translate(calc(var(--x4, 0px) - 50%), calc(var(--y4, 0px) - 50%)) scale(1.06); }
  88%  { transform: translate(calc(var(--x5, 0px) - 50%), calc(var(--y5, 0px) - 50%)) scale(0.78); }
  100% { transform: translate(calc(var(--x0, 0px) - 50%), calc(var(--y0, 0px) - 50%)) scale(0.45); }
}

/* Independent, faster glow pulse — the firefly's "breath" */
@keyframes __ph-firefly-glow {
  0%, 100% { opacity: 0.95; }
  35%      { opacity: 1.00; }
  60%      { opacity: 0.78; }
  80%      { opacity: 1.00; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-header > .page-header-halo,
  .m-page-header > .page-header-halo {
    animation: none;
    opacity: 0.85;
  }
  .page-header > .page-header-halo::after,
  .m-page-header > .page-header-halo::after {
    animation: none;
  }
  .page-header .__ph-firefly,
  .m-page-header .__ph-firefly {
    animation: none;
    opacity: 0.6;
  }
  .page-header h1,
  .m-page-header h1 {
    animation: none !important;
  }
  .page-header > .page-header-flash,
  .m-page-header > .page-header-flash { display: none; }
}

/* ============================================================
   THE TITLE STRIKE — rise + smooth bronze breath
   ------------------------------------------------------------
   Before: 4 staccato brightness beats. Now: one continuous
   ease as the bronze halo settles into a quiet pulse.
   ============================================================ */
.page-header h1,
.m-page-header h1 {
  animation: __ph-title-strike 2400ms cubic-bezier(.22,.61,.36,1) both;
  will-change: transform, opacity, filter;
  transform-origin: 50% 60%;
}

/* Single continuous appearance — only TWO keyframes so the browser
   interpolates filter/opacity/transform on a smooth curve and the
   eye sees one motion, not steps. The perpetual bronze breath
   (handled by the ::after halo) takes over after the strike. */
@keyframes __ph-title-strike {
  0% {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* After the strike completes the H1 keeps a slow bronze breath
   in perpetuity — not a brightness flicker, just a soft halo
   inhale/exhale on the same 6.4s cadence as the page halo. */
.page-header h1::after,
.m-page-header h1::after {
  content: '';
  position: absolute;
  inset: -32px -48px;
  pointer-events: none;
  z-index: -1;
  border-radius: 18px;
  background: radial-gradient(
    ellipse 70% 90% at 50% 50%,
    rgba(255, 214, 130, 0.42) 0%,
    rgba(245, 168, 70,  0.22) 32%,
    rgba(220, 130, 40,  0.08) 60%,
    transparent 78%
  );
  filter: blur(28px);
  opacity: 0;
  animation: __ph-h1-breathe 6400ms 900ms cubic-bezier(.45,.05,.55,.95) infinite;
}
.page-header h1,
.m-page-header h1 { position: relative; }

@keyframes __ph-h1-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

/* ============================================================
   THE STRIKE FLASH — quieter, more focused
   ============================================================ */
.page-header > .page-header-flash,
.m-page-header > .page-header-flash {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 78%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse 700px 280px at 26% 58%,
    rgba(255,250,220,0.55) 0%,
    rgba(255,229,168,0.28) 28%,
    rgba(255,200,120,0.10) 52%,
    transparent 78%);
  opacity: 0;
  animation: __ph-title-flash 1100ms cubic-bezier(.25,.1,.25,1) both;
}
@keyframes __ph-title-flash {
  0%   { opacity: 0; }
  25%  { opacity: 0.38; }
  100% { opacity: 0; }
}