/* ═══════════════════════════════════════════════════════════════
   HOME FX — decorative effects layer for the home page (public/js/home-fx.js)
   Additive only; everything degrades to the plain page without JS or under
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */
#page-home .hero { position: relative; }
.hfx-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; mix-blend-mode: screen; opacity: 0.9; }
.hfx-spot {
    position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.4s;
    background: radial-gradient(360px circle at var(--x, 50%) var(--y, 30%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}
#page-home .hero-content { position: relative; z-index: 2; }
#page-home .hero-cta .btn { transition: transform 0.18s cubic-bezier(.2,1.4,.3,1), background 0.2s, box-shadow 0.2s; will-change: transform; }
#page-home .hero-cta .btn-primary { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); animation: hfxPulse 2.6s ease-out infinite; }
@keyframes hfxPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } }

/* Headline: subtle breathing glow (the sweeping sheen rendered as a block over gradient text, so it is gone) */
.hfx-shimmer { animation: hfxBreathe 4s ease-in-out infinite; }
@keyframes hfxBreathe { 0%,100% { filter: drop-shadow(0 0 0 rgba(139,92,246,0)); } 50% { filter: drop-shadow(0 0 18px rgba(139,92,246,0.45)); } }
.hfx-glow { text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 44px color-mix(in srgb, var(--accent) 25%, transparent); animation: hfxGlow 3s ease-in-out infinite; }
@keyframes hfxGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }

/* Scroll reveal */
.hfx-reveal { opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity 0.6s ease var(--d, 0ms), transform 0.7s cubic-bezier(.2,1.2,.3,1) var(--d, 0ms); }
.hfx-reveal.is-in { opacity: 1; transform: none; }

/* Stream card tilt */
#page-home .stream-card { transition: transform 0.15s ease-out, box-shadow 0.25s; }
#page-home .stream-card.hfx-tilting { box-shadow: 0 24px 50px rgba(0,0,0,0.45), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); z-index: 2; }

/* Live section header dot + Star section shimmer accent */
#page-home .section-header h2 .live-dot { animation: hfxLive 1.4s ease-in-out infinite; }
@keyframes hfxLive { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(231,76,60,0)); } 50% { transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(231,76,60,0.9)); } }

@media (prefers-reduced-motion: reduce) {
    .hfx-sparks, .hfx-spot { display: none; }
    .hfx-shimmer, .hfx-glow, #page-home .hero-cta .btn-primary, #page-home .section-header h2 .live-dot { animation: none !important; }
    .hfx-reveal { opacity: 1; transform: none; transition: none; }
}

.rs-lite .hfx-sparks, .rs-lite .hfx-spot { display: none; }
.rs-lite .hfx-shimmer, .rs-lite .hfx-glow, .rs-lite #page-home .hero-cta .btn-primary, .rs-lite #page-home .section-header h2 .live-dot { animation: none !important; text-shadow: none; }
.rs-lite #page-home .stream-card { transition: none; }

/* ── Mobile / lite: the home page's own heavy effects (pre-existing) ──────────────
   The CTA banner's conic border animates a registered custom property through a masked
   conic-gradient (re-rasterised every frame), the ambient blobs and hero aurora run large
   blur filters with blend modes, the collage is a 3D-tilted stack of floating thumbnails.
   All of it flickers on low-end Android GPUs, so on phones they become static. */
@media (max-width: 820px), (pointer: coarse) {
    .home-cta-banner::before { animation: none !important; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 15%, transparent) 50%, color-mix(in srgb, var(--accent) 55%, transparent)); opacity: 0.6; }
    .cta-ambient { animation: none !important; filter: none !important; transform: none !important; opacity: 0.7; }
    .cta-embers, .cta-robot-glow, .cta-owner-shine { display: none !important; }
    .cta-btn-glow { animation: none !important; box-shadow: none !important; }
    .cta-hero-grad { animation: none !important; }
    .hero-aurora, .hero-aurora::before, .hero-aurora::after { filter: none !important; mix-blend-mode: normal !important; animation: none !important; transform: none !important; opacity: 0.22; }
    .hero-collage { display: none !important; }
    .hero-bg-layer, .hero-bg-layer.active { animation: none !important; transform: none !important; transition: opacity 0.4s ease; }
    .hero-scrim { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    .navbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--glass-strong); }
    .stream-card, .stream-card:hover { transform: none !important; }
}
.rs-lite .home-cta-banner::before { animation: none !important; }
.rs-lite .cta-ambient { animation: none !important; filter: none !important; }
.rs-lite .cta-embers, .rs-lite .cta-robot-glow, .rs-lite .cta-owner-shine, .rs-lite .hero-collage { display: none !important; }
.rs-lite .hero-aurora, .rs-lite .hero-aurora::before, .rs-lite .hero-aurora::after { filter: none !important; mix-blend-mode: normal !important; animation: none !important; }