/* ============================================================
   Section Fireworks
   One shell per section, launched when you scroll down into it:
   the rocket rises from the section's lower edge, then bursts in
   that section's own colours. Replaces the old always-on rising
   sparkler/rocket loop that ran on a 2s interval.

   Driven by assets/js/fireworks.js, which sets the --fw-* values.
   ============================================================ */

.fw-stage {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 998; /* under the navbar (1000) so bursts pass behind it */
}

/* ---------- the shell on its way up ---------- */

.fw-shell {
    position: absolute;
    left: var(--fw-x);
    top: var(--fw-y);
    width: 7px;
    height: 26px;
    border-radius: 4px;
    background: linear-gradient(to top,
        rgba(255, 140, 66, 0) 0%,
        var(--fw-b, #FF9A00) 42%,
        var(--fw-a, #FFD166) 78%,
        #fff 100%);
    box-shadow: 0 0 18px 4px rgba(255, 190, 90, 0.8);
    animation: fwRise var(--fw-rise-dur, 850ms) cubic-bezier(0.16, 0.62, 0.3, 1) forwards;
    will-change: transform, opacity;
}

/* Nose cone, so it reads as a rocket rather than a dash */
.fw-shell::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-bottom: 10px solid var(--fw-a, #FFD166);
}

/* Flickering exhaust trail */
.fw-shell::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 4px;
    height: 64px;
    background: linear-gradient(to bottom,
        var(--fw-a, #FFD166) 0%,
        rgba(255, 140, 66, 0.35) 45%,
        rgba(255, 140, 66, 0) 100%);
    filter: blur(1.5px);
    transform-origin: top center;
    animation: fwFlicker 110ms steps(2, end) infinite;
}

@keyframes fwRise {
    0%   { transform: translate(-50%, 0) scaleY(0.5); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translate(-50%, var(--fw-rise, -420px)) scaleY(1.15); opacity: 0.85; }
}

@keyframes fwFlicker {
    0%, 100% { opacity: 0.95; transform: translateX(-50%) scaleY(1); }
    50%      { opacity: 0.55; transform: translateX(-50%) scaleY(0.72); }
}

/* ---------- the burst ---------- */

/* Core flash. Tinted rather than pure white so it also reads on light sections. */
.fw-flash {
    position: absolute;
    left: var(--fw-x);
    top: var(--fw-y);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle,
        #fff 0%,
        #fff 16%,
        var(--fw-a, #FFD166) 46%,
        rgba(255, 255, 255, 0) 76%);
    animation: fwFlash 560ms cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
    will-change: transform, opacity;
}

@keyframes fwFlash {
    0%   { transform: translate(-50%, -50%) scale(0.25); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(4.2); opacity: 0; }
}

/* Expanding shockwave ring */
.fw-ring {
    position: absolute;
    left: var(--fw-x);
    top: var(--fw-y);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2.5px solid var(--fw-b, #FF2E93);
    box-shadow: 0 0 0 1px rgba(24, 8, 34, 0.12);
    animation: fwRing 660ms cubic-bezier(0.2, 0.75, 0.3, 1) forwards;
    will-change: transform, opacity;
}

@keyframes fwRing {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(4.4); opacity: 0; }
}

/* Individual embers. The mid keyframe is the apex, so they arc instead of
   travelling in a straight line. */
.fw-spark {
    position: absolute;
    left: var(--fw-x);
    top: var(--fw-y);
    width: var(--fw-size, 6px);
    height: var(--fw-size, 6px);
    border-radius: 50%;
    background: var(--fw-c, #FFD166);
    box-shadow:
        0 0 14px 3px var(--fw-c, #FFD166),
        0 0 0 1.5px rgba(24, 8, 34, 0.20);
    animation: fwSpark var(--fw-dur, 1100ms) cubic-bezier(0.12, 0.66, 0.28, 1) var(--fw-delay, 0ms) forwards;
    will-change: transform, opacity;
}

@keyframes fwSpark {
    0% {
        transform: translate(-50%, -50%) scale(0.45);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    55% {
        transform: translate(calc(-50% + var(--fw-mx, 0px)), calc(-50% + var(--fw-my, 0px))) scale(0.9);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--fw-dx, 0px)), calc(-50% + var(--fw-dy, 0px))) scale(0.15);
        opacity: 0;
    }
}

/* Slower, longer-lived streamers that drift down after the main ring */
.fw-spark.is-streamer {
    box-shadow:
        0 0 18px 5px var(--fw-c, #FFD166),
        0 0 0 1.5px rgba(24, 8, 34, 0.20);
}

/* Nothing launches when the visitor has asked for less motion */
@media (prefers-reduced-motion: reduce) {
    .fw-stage {
        display: none;
    }
}