/*
 * Firefly effect for episode 310 "The Firefly".
 *
 * This file is APPEARANCE ONLY. The flight path and the blink timing are
 * generated fresh on every page load in /js/firefly.js (random each visit,
 * consistent size, fluid curved motion). The old CSS-keyframe version baked a
 * single fixed path + per-waypoint scale into this file — see git history.
 */

.firefly {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin: 0;
    pointer-events: none;
    z-index: 1000;

    /* firefly.js rides the element's centre along a generated offset-path. */
    offset-anchor: 50% 50%;
    offset-rotate: 0deg;
    will-change: offset-distance, transform;
}

/* The bug's body: a small dark dot, always faintly visible so the firefly can
   be tracked between blinks. It also anchors the bright glow with a dark centre
   so the flash reads against a pale/white page background, not just the dark hero. */
.firefly::before {
    content: "";
    position: absolute;
    inset: 28%;                 /* ~4.5px dot centred in the 10px box */
    border-radius: 50%;
    background: rgba(38, 44, 12, 0.6);
}

/* The glowing abdomen: a saturated yellow-green so it stays obvious on BOTH the
   dark hero and the pale sky/white background further down (a pale near-white
   glow washes out on white; a saturated one keeps its contrast). Off by default;
   firefly.js toggles .is-glowing to blink it. The base rule below is the SLOW
   fade-OUT; the .is-glowing rule is the QUICK flash-ON — asymmetric, like a real
   firefly. */
.firefly::after {
    content: "";
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    background: #f2ff57;
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(190, 255, 120, 0);
    transition: opacity 1.5s ease-out, box-shadow 1.5s ease-out;
}

.firefly.is-glowing::after {
    opacity: 1;
    /* Three layers: a tight high-opacity core bloom for punch on light
       backgrounds, then two softer saturated-green halos for the classic glow. */
    box-shadow:
        0 0 7px 2px rgba(240, 255, 110, 0.98),
        0 0 18px 6px rgba(198, 255, 88, 0.9),
        0 0 44px 16px rgba(140, 222, 66, 0.62);
    transition: opacity 0.3s ease-in, box-shadow 0.3s ease-in;
}

/* Gentler glow ramp for visitors who prefer reduced motion (firefly.js also
   parks the bug in one spot instead of flying it around). */
@media (prefers-reduced-motion: reduce) {
    .firefly::after {
        transition-duration: 2.6s;
    }
    .firefly.is-glowing::after {
        transition-duration: 1s;
    }
}