/* ============================================================================
   GARAGE GALS . CINEMATIC FX LAYER
   ----------------------------------------------------------------------------
   A focused, on-brand "make it pop" layer for the dark sections. Three parts:
     1. fx-layer        a behind-content stage that hosts the canvas + light.
     2. fx-aurora       drifting blurred red/amber light blobs (pure CSS, GPU).
     3. fx-beams        slow rotating volumetric light sweeps (pure CSS).
     4. fx-embers       a <canvas> ember field (driven by js/fx.js).
     5. fx-burst        a fixed full-screen canvas for celebration particle bursts.
     6. headline glow   a breathing aura behind the hero headline.
   Everything sits BEHIND content (z-index 0/1) and is pointer-events: none.
   All motion is disabled under prefers-reduced-motion at the bottom of the file.
   ============================================================================ */

/* ---- The stage ----------------------------------------------------------- */
.fx-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}
/* keep real content above the stage */
.hero__content,
.final-cta .container,
.section-head,
.tone-ink .container { position: relative; z-index: 2; }

.fx-embers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* ---- Aurora . drifting blurred light blobs ------------------------------- */
.fx-aurora {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  filter: blur(2px);
}
.fx-aurora__blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0.55;
  will-change: transform, opacity;
  filter: blur(60px);
}
.fx-aurora__blob--1 {
  width: 46vmax; height: 46vmax;
  top: -14%; left: -6%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 75, 58, 0.55), rgba(230, 58, 45, 0.18) 45%, transparent 70%);
  animation: fx-drift-1 26s ease-in-out infinite;
}
.fx-aurora__blob--2 {
  width: 38vmax; height: 38vmax;
  bottom: -16%; right: -8%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 177, 85, 0.40), rgba(255, 110, 60, 0.16) 45%, transparent 70%);
  animation: fx-drift-2 32s ease-in-out infinite;
}
.fx-aurora__blob--3 {
  width: 30vmax; height: 30vmax;
  top: 28%; left: 44%;
  background: radial-gradient(circle at 50% 50%, rgba(139, 0, 0, 0.55), rgba(230, 58, 45, 0.12) 50%, transparent 72%);
  animation: fx-drift-3 38s ease-in-out infinite;
  opacity: 0.4;
}

@keyframes fx-drift-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.5; }
  33%      { transform: translate3d(8vmax, 5vmax, 0) scale(1.12); opacity: 0.66; }
  66%      { transform: translate3d(-4vmax, 9vmax, 0) scale(0.96); opacity: 0.42; }
}
@keyframes fx-drift-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.42; }
  40%      { transform: translate3d(-9vmax, -6vmax, 0) scale(1.16); opacity: 0.6; }
  70%      { transform: translate3d(-3vmax, -10vmax, 0) scale(0.94); opacity: 0.38; }
}
@keyframes fx-drift-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.34; }
  50%      { transform: translate3d(-7vmax, 4vmax, 0) scale(1.2); opacity: 0.5; }
}

/* ---- Light beams . slow volumetric sweeps -------------------------------- */
.fx-beams {
  position: absolute;
  inset: -30% -10%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%);
}
.fx-beams::before,
.fx-beams::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 160%; height: 160%;
  transform-origin: center;
  will-change: transform;
}
.fx-beams::before {
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(255, 110, 60, 0.10) 14deg, transparent 30deg,
    transparent 180deg, rgba(255, 75, 58, 0.08) 196deg, transparent 214deg);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: fx-beam-spin 60s linear infinite;
}
.fx-beams::after {
  background: conic-gradient(from 90deg at 50% 50%,
    transparent 0deg, rgba(255, 177, 85, 0.07) 10deg, transparent 26deg,
    transparent 200deg, rgba(230, 58, 45, 0.07) 214deg, transparent 232deg);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: fx-beam-spin 90s linear infinite reverse;
}
@keyframes fx-beam-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---- Animated grain (subtle living noise) -------------------------------- */
.fx-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: fx-grain-shift 0.6s steps(4) infinite;
}
@keyframes fx-grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-4%, 3%); }
  50%  { transform: translate(3%, -2%); }
  75%  { transform: translate(-2%, -4%); }
  100% { transform: translate(0, 0); }
}

/* ---- Headline aura . breathing glow behind the hero h1 ------------------- */
.hero__title { position: relative; }
.hero__title::before {
  content: "";
  position: absolute;
  inset: -18% -8%;
  z-index: -1;
  background: radial-gradient(60% 70% at 50% 60%, rgba(255, 75, 58, 0.22), transparent 70%);
  filter: blur(26px);
  opacity: 0;
  animation: fx-headline-breathe 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fx-headline-breathe {
  0%, 100% { opacity: 0.35; transform: scale(0.96); }
  50%      { opacity: 0.85; transform: scale(1.05); }
}

/* a one-pass shimmer that sweeps the red part of the headline on load */
.hero__title .ink-red,
.hero__title em {
  background-image: linear-gradient(100deg,
    currentColor 0%, currentColor 38%, #ffd0c7 50%, currentColor 62%, currentColor 100%);
  background-size: 250% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: fx-title-sheen 4.5s ease-in-out 1.2s 1 forwards;
}
@keyframes fx-title-sheen {
  to { background-position: -40% 0; }
}

/* ---- Celebration burst canvas (full-screen, on top, transient) ----------- */
.fx-burst {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-toast);
  pointer-events: none;
  opacity: 1;
}

/* ---- Scroll progress ember (rides the scroll-progress bar) ---------------- */
.scroll-progress { box-shadow: 0 0 10px rgba(255,75,58,0.6), 0 0 22px rgba(230,58,45,0.4); }

/* ---- Cursor "ember trail" dots (fine pointers, JS-driven) ----------------- */
.fx-trail {
  position: fixed;
  top: 0; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,150,0.95), rgba(255,75,58,0.5) 60%, transparent 75%);
  pointer-events: none;
  z-index: var(--z-cursor);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  opacity: 0;
}
@media (hover: none), (pointer: coarse) { .fx-trail { display: none; } }

/* ---- Reveal helpers used by the FX scroll engine ------------------------- */
.fx-rise { opacity: 0; transform: translateY(2.4rem) scale(0.99); transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo); }
.fx-rise.fx-in { opacity: 1; transform: none; }

/* ============================================================================
   REDUCED MOTION + LOW-POWER : calm everything down
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .fx-embers,
  .fx-beams,
  .fx-grain,
  .fx-trail { display: none !important; }
  .fx-aurora__blob { animation: none !important; opacity: 0.4 !important; }
  .hero__title::before { animation: none !important; opacity: 0.5 !important; }
  .hero__title .ink-red,
  .hero__title em { animation: none !important; background: none !important; -webkit-text-fill-color: currentColor; }
}
@media (prefers-reduced-transparency: reduce) {
  .fx-aurora, .fx-beams { opacity: 0.3; }
}

/* ============================================================================
   STATIC BACKGROUND (no motion)
   Freeze the aurora into a permanent, full, rich gradient and remove every
   moving layer: the rotating light beams ("lines"), the animated grain, and
   the rising ember particles. The click-burst (.fx-burst) is untouched.
   ============================================================================ */
.fx-aurora__blob { animation: none !important; }
.fx-beams,
.fx-grain,
.fx-embers { display: none !important; }