/*
 * assets/css/hero-fx.css — the homepage hero look for other pages' heroes.
 *
 * Black, with one soft red glow rising from below, a faint red hint in the
 * top corner and a thin red line along the bottom edge. Added by cs_hero_fx()
 * (includes/hero_fx.php) to an existing hero element, which gets the class
 * "cs-fx-hero". The glow breathes very slowly (opacity only); paused while
 * the hero is off screen, still for reduced motion.
 */
.cs-fx-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #050505 !important;
    color: #fff;
}
/* The page's own decoration (grids, fades, coloured blobs) gives way to this one */
.cs-fx-hero::before,
.cs-fx-hero::after,
.cs-fx-hero > .hero-fade,
.cs-fx-hero > .hero-top-fade,
.cs-fx-hero > .profile-hero-grid,
.cs-fx-hero > .cs-hero-grid { display: none !important; }

.cs-fx {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.cs-fx-hint {                                      /* faint red, top right */
    position: absolute;
    right: -10%;
    top: -70%;
    width: min(560px, 90vw);
    height: min(560px, 90vw);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(185, 28, 28, .16), transparent);
}
.cs-fx-glow {                                      /* rising from below */
    position: absolute;
    left: 50%;
    bottom: -75%;
    width: min(1000px, 160vw);
    height: min(460px, 130%);
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(220, 38, 38, .38), rgba(153, 27, 27, .12) 55%, transparent);
    animation: cs-fx-breathe 8s ease-in-out infinite alternate;
}
@keyframes cs-fx-breathe {
    from { opacity: .7; }
    to   { opacity: 1; }
}
.cs-fx-edge {                                      /* thin red line along the bottom */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239, 68, 68, .6) 50%, transparent);
}
.cs-fx-hero.is-idle .cs-fx * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .cs-fx * { animation: none !important; }
}
@media print {
    .cs-fx { display: none; }
    .cs-fx-hero { background: none !important; color: inherit; }
}