/* perf.css — runtime FPS + interaction optimizations layered on top of the
   existing styles (loaded last so it wins). Paired with perf-anim-gate.js. */

/* 1) Pause decorative CSS animations in off-screen sections. They aren't
   visible, so this reclaims frame budget across the whole page with zero
   visual change. (GSAP/JS transforms are unaffected — only CSS animations.) */
section[id][data-anim-paused] *,
section[id][data-anim-paused] *::before,
section[id][data-anim-paused] *::after {
    animation-play-state: paused !important;
}

/* 2) Now Listening (#listening / #concept-06) — the dominant cost was the four
   40rem blob-field elements blurred at 42–48px (blur cost scales with radius²)
   plus 160 infinitely-pulsing waveform bars. Cap the blur hard and animate only
   a third of the bars; the section still reads as a living waveform. */
#listening .blob-field span {
    filter: blur(20px) saturate(1.12) !important;
}
#listening .wave-line span:not(:nth-child(3n)) {
    animation: none !important;
}

/* 3) FAQ backdrop-filter blur is softened directly in faq-variations.css. */

/* 4) Cohen tribute — the ambient glow blurred at 60px over 60vw×60vh is a heavy
   per-frame raster while the face-morph animates. Halve it. */
#cohen .cohen-glow {
    filter: blur(30px) !important;
}

/* 4b) Phones: make the Now-Listening blobs STATIC (the drift isn't worth the
   per-frame blur re-raster on mobile GPUs) and animate only ~25% of the bars.
   Keeps the colour wash + a living waveform, at a fraction of the cost. */
@media (max-width: 768px) {
    #listening .blob-field span {
        animation: none !important;
        filter: blur(16px) saturate(1.12) !important;
    }
    #listening .wave-line span:not(:nth-child(4n)) {
        animation: none !important;
    }
}

/* 5) Tap targets — expand the hit area of tiny controls to ~44px (WCAG 2.5.5)
   without changing their visual size, via a transparent ::after overlay. */
.cf-dot { position: relative; }
.cf-dot::after {
    content: "";
    position: absolute;
    inset: -17px;
}

/* ============================================================
   Kill the Dante "angel" (Beatrice) flash on entering #about.
   .about-dante-angel is GSAP-driven (fromTo autoAlpha 0.05 → 1 on
   scroll), but main.min.js + GSAP load deferred — so before the
   tween's "from" state is applied she paints at the CSS default
   (opacity 1) in her landed spot for a beat, appearing ahead of the
   rest of the section. Hide her from first paint; GSAP writes inline
   opacity once it inits (inline wins, so the scroll animation is
   unaffected). Reduced-motion users — for whom the GSAP block is
   skipped — get her statically visible in her landed position.
   ============================================================ */
#about .about-dante-angel { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    #about .about-dante-angel { opacity: 1; }
}