/* ===========================
   FIREFLY JAR
   Sits on mantle left of bookstack
   =========================== */

.firefly-jar {
    --jar-w: 105px;
    --jar-h: 165px;
    --jar-lift: 10px;
    --glass: rgba(140, 200, 220, 0.08);
    --glass-edge: rgba(180, 220, 235, 0.18);
    --shine: rgba(255, 255, 255, 0.65);
    --metal-1: #6d584a;
    --metal-2: #463529;
    --metal-3: #2f2318;
    --fly-warm: rgba(255, 235, 140, 0.98);
    --fly-cool: rgba(245, 255, 200, 0.95);

    position: relative;
    width: var(--jar-w);
    height: var(--jar-h);
    flex: 0 0 auto;

    margin-bottom: -10px;

    transform: rotate(-2.5deg) translateY(var(--jar-lift));
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));

    animation: jarBreath 6s ease-in-out infinite;
}

@keyframes jarBreath {

    0%,
    100% {
        transform: rotate(-2.5deg) translateY(var(--jar-lift));
    }

    50% {
        transform: rotate(-2.5deg) translateY(calc(var(--jar-lift) - 2px));
    }
}

.firefly-jar__glass {
    position: absolute;
    left: 50%;
    top: 22px;
    transform: translateX(-50%);

    width: calc(var(--jar-w) - 18px);
    height: calc(var(--jar-h) - 48px);
    border-radius: 20px 20px 24px 24px;

    background:
        radial-gradient(ellipse at 35% 15%, rgba(255, 255, 255, 0.28), transparent 45%),
        radial-gradient(ellipse at 75% 25%, rgba(255, 255, 255, 0.12), transparent 40%),
        radial-gradient(ellipse at 50% 85%, rgba(255, 235, 140, 0.06), transparent 55%),
        radial-gradient(circle at 45% 50%, rgba(160, 220, 240, 0.04), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        var(--glass);

    box-shadow:
        inset 0 0 0 1.5px var(--glass-edge),
        inset 2px 0 8px rgba(255, 255, 255, 0.15),
        inset -2px 0 8px rgba(0, 0, 0, 0.12),
        inset 0 12px 28px rgba(0, 0, 0, 0.22),
        inset 0 -18px 24px rgba(0, 0, 0, 0.15),
        0 0 0 0.5px rgba(255, 255, 255, 0.08);

    overflow: hidden;
}

/* main glass highlight (left edge) */
.firefly-jar__glass::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 8px;
    width: 22px;
    height: 65%;
    border-radius: 999px;
    background: linear-gradient(180deg,
            var(--shine) 0%,
            rgba(255, 255, 255, 0.35) 45%,
            rgba(255, 255, 255, 0.08) 80%,
            rgba(255, 255, 255, 0) 100%);
    opacity: 0.55;
    filter: blur(0.5px);
    pointer-events: none;
}

/* secondary highlight (right edge) + bottom reflection */
.firefly-jar__glass::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 6px;
    width: 14px;
    height: 50%;
    border-radius: 999px;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.25),
            rgba(255, 255, 255, 0.08) 60%,
            transparent);
    opacity: 0.45;
    filter: blur(0.3px);
    pointer-events: none;
}

.firefly-jar__lid {
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-50%);

    width: calc(var(--jar-w) - 22px);
    height: 26px;
    border-radius: 10px 10px 12px 12px;

    background:
        radial-gradient(ellipse at 50% 5%, rgba(255, 245, 220, 0.18), transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 35%),
        linear-gradient(180deg, var(--metal-1) 0%, var(--metal-2) 60%, var(--metal-3) 100%);

    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.55),
        0 3px 6px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 240, 210, 0.12),
        inset 0 -4px 8px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 230, 200, 0.06);
}

/* Top ridge/rim */
.firefly-jar__lid::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 3px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 245, 220, 0.25), rgba(255, 255, 255, 0.08));
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* Air holes */
.firefly-jar__lid::after {
    content: "· · · ·";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    font-size: 8px;
    letter-spacing: 5px;
    color: rgba(0, 0, 0, 0.45);
    text-shadow: 0 1px 0 rgba(255, 240, 200, 0.08);
    font-weight: bold;
}

.firefly-jar__base {
    position: absolute;
    left: 50%;
    bottom: calc(4px + var(--jar-lift));
    /* stays in place while jar floats */
    transform: translateX(-50%);

    width: calc(var(--jar-w) - 24px);
    height: 18px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.45)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
    opacity: 0.65;
    filter: blur(1px);
}

.firefly-jar__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    background:
        /* Multiple glow layers for depth */
        radial-gradient(ellipse at 35% 38%,
            rgba(255, 235, 140, 0.32) 0%,
            transparent 35%),
        radial-gradient(ellipse at 65% 55%,
            rgba(255, 220, 120, 0.28) 0%,
            transparent 40%),
        radial-gradient(ellipse at 48% 70%,
            rgba(255, 210, 110, 0.22) 0%,
            transparent 38%),
        radial-gradient(circle at 50% 48%,
            rgba(255, 240, 150, 0.35) 0%,
            rgba(255, 230, 130, 0.22) 28%,
            rgba(255, 220, 110, 0.12) 55%,
            transparent 72%);
    filter: blur(14px);
    opacity: 0.85;
    pointer-events: none;
    animation: fireflyJarGlow 4s ease-in-out infinite;
}

@keyframes fireflyJarGlow {

    0%,
    100% {
        opacity: 0.75;
        transform: translate(-50%, -50%) scale(0.94) rotate(0deg);
        filter: blur(14px) hue-rotate(0deg);
    }

    33% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(1.08) rotate(1deg);
        filter: blur(16px) hue-rotate(5deg);
    }

    66% {
        opacity: 0.82;
        transform: translate(-50%, -50%) scale(1.02) rotate(-1deg);
        filter: blur(15px) hue-rotate(3deg);
    }
}

/* Warm golden tint to glass in firefly mode */
.firefly-jar:not(.glitter-mode) .firefly-jar__glass {
    background:
        radial-gradient(ellipse at 35% 15%, rgba(255, 245, 220, 0.08), transparent 45%),
        radial-gradient(ellipse at 75% 25%, rgba(255, 235, 200, 0.06), transparent 40%),
        radial-gradient(ellipse at 50% 85%, rgba(255, 235, 140, 0.08), transparent 55%),
        radial-gradient(circle at 45% 50%, rgba(255, 240, 180, 0.04), transparent 70%),
        linear-gradient(180deg, rgba(255, 245, 210, 0.05), rgba(255, 235, 190, 0.03)),
        var(--glass);

    box-shadow:
        inset 0 0 0 1.5px var(--glass-edge),
        inset 2px 0 8px rgba(255, 245, 200, 0.12),
        inset -2px 0 8px rgba(0, 0, 0, 0.12),
        inset 0 12px 28px rgba(0, 0, 0, 0.22),
        inset 0 -18px 24px rgba(0, 0, 0, 0.15),
        0 0 0 0.5px rgba(255, 240, 200, 0.06),
        0 0 15px rgba(255, 230, 140, 0.08);
}

/* Distant firefly ambiance - tiny background glows */
.firefly-jar:not(.glitter-mode) .firefly-jar__glass::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background:
        /* Tiny distant fireflies in background */
        radial-gradient(circle at 28% 28%, rgba(255, 240, 160, 0.45) 0%, transparent 2%),
        radial-gradient(circle at 65% 20%, rgba(255, 230, 140, 0.4) 0%, transparent 1.8%),
        radial-gradient(circle at 82% 38%, rgba(245, 220, 130, 0.35) 0%, transparent 1.5%),
        radial-gradient(circle at 18% 55%, rgba(255, 235, 150, 0.4) 0%, transparent 1.7%),
        radial-gradient(circle at 48% 65%, rgba(240, 255, 170, 0.35) 0%, transparent 1.6%),
        radial-gradient(circle at 75% 72%, rgba(255, 225, 135, 0.38) 0%, transparent 1.9%),
        /* Extra depth particles */
        radial-gradient(circle at 38% 85%, rgba(255, 230, 145, 0.3) 0%, transparent 1.3%),
        radial-gradient(circle at 88% 58%, rgba(250, 240, 160, 0.32) 0%, transparent 1.4%),
        radial-gradient(circle at 15% 35%, rgba(245, 235, 155, 0.28) 0%, transparent 1.2%);
    opacity: 0.7;
    animation: distantFirefliesGlow 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes distantFirefliesGlow {

    0%,
    100% {
        opacity: 0.5;
    }

    25% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.6;
    }

    75% {
        opacity: 0.85;
    }
}

/* ========== FIREFLIES  ========== */
.firefly-jar__fly {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 3px currentColor);
}

/* Subtle afterglow trail effect for fireflies */
.firefly-jar:not(.glitter-mode) .firefly-jar__fly::before {
    content: "";
    position: absolute;
    inset: -50%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
            currentColor,
            transparent 60%);
    opacity: 0.15;
    filter: blur(2px);
    animation: afterglowPulse 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes afterglowPulse {

    0%,
    100% {
        opacity: 0.08;
        transform: scale(0.8);
    }

    50% {
        opacity: 0.22;
        transform: scale(1.2);
    }
}

/* Firefly Type 1: Brightest */
.firefly-jar__fly.f2,
.firefly-jar__fly.f5 {
    width: 9px;
    height: 9px;
    background: radial-gradient(circle at 40% 40%,
            rgba(255, 250, 200, 1) 0%,
            rgba(255, 240, 160, 0.95) 35%,
            rgba(255, 230, 140, 0.85) 70%,
            transparent);

    box-shadow:
        0 0 10px rgba(255, 245, 180, 0.95),
        0 0 20px rgba(255, 235, 140, 0.7),
        0 0 35px rgba(255, 230, 120, 0.45),
        0 0 50px rgba(255, 225, 100, 0.25);

    animation:
        organicFloat 6s ease-in-out infinite,
        brilliantPulse 2.2s ease-in-out infinite;
}

/* Firefly Type 2: Medium-bright, warm tones */
.firefly-jar__fly.f1,
.firefly-jar__fly.f7 {
    width: 7px;
    height: 7px;
    background: radial-gradient(circle at 35% 35%,
            rgba(255, 215, 140, 1) 0%,
            rgba(255, 200, 120, 0.95) 40%,
            rgba(245, 185, 100, 0.8) 75%,
            transparent);

    box-shadow:
        0 0 8px rgba(255, 210, 130, 0.9),
        0 0 16px rgba(255, 195, 110, 0.65),
        0 0 28px rgba(245, 180, 95, 0.4);

    animation:
        organicFloat 5.5s ease-in-out infinite,
        amberPulse 2.6s ease-in-out infinite;
}

/* Firefly Type 3: Softer, cooler */
.firefly-jar__fly.f3,
.firefly-jar__fly.f4,
.firefly-jar__fly.f6 {
    width: 6px;
    height: 6px;
    background: radial-gradient(circle at 30% 30%,
            rgba(240, 255, 180, 1) 0%,
            rgba(230, 250, 160, 0.95) 35%,
            rgba(220, 240, 140, 0.85) 70%,
            transparent);

    box-shadow:
        0 0 7px rgba(235, 250, 170, 0.85),
        0 0 14px rgba(225, 245, 150, 0.6),
        0 0 24px rgba(215, 240, 130, 0.35);

    animation:
        organicFloat 5s ease-in-out infinite,
        gentlePulse 3s ease-in-out infinite;
}

/* Firefly Type 4: Smallest, rarest flash */
.firefly-jar__fly.f8 {
    width: 5px;
    height: 5px;
    background: radial-gradient(circle at 35% 35%,
            rgba(255, 230, 160, 1) 0%,
            rgba(255, 215, 140, 0.9) 45%,
            rgba(250, 200, 120, 0.75) 80%,
            transparent);

    box-shadow:
        0 0 6px rgba(255, 225, 150, 0.9),
        0 0 12px rgba(255, 210, 130, 0.6),
        0 0 20px rgba(250, 195, 110, 0.35);

    animation:
        organicFloat 4.5s ease-in-out infinite,
        emberFlash 1.8s ease-in-out infinite;
}

/* Organic floating - smooth figure-8 and lazy curves */
@keyframes organicFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(calc(var(--dx, 0px) * 0.4), calc(var(--dy, -10px) * 0.6));
    }

    50% {
        transform: translate(calc(var(--dx, 0px) * 0.8), calc(var(--dy, -10px) * 0.2));
    }

    75% {
        transform: translate(calc(var(--dx, 0px) * 0.3), calc(var(--dy, -10px) * 0.9));
    }
}

@keyframes brilliantPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.8);
        filter: blur(0px) brightness(1);
    }

    20% {
        opacity: 1;
        transform: scale(1.2);
        filter: blur(0.5px) brightness(1.3);
    }

    40% {
        opacity: 0.6;
        transform: scale(0.9);
        filter: blur(0.2px) brightness(1.1);
    }

    60% {
        opacity: 0.95;
        transform: scale(1.1);
        filter: blur(0.4px) brightness(1.25);
    }

    80% {
        opacity: 0.5;
        transform: scale(0.85);
        filter: blur(0.1px) brightness(1);
    }
}

/* warm steady glow */
@keyframes amberPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.85);
        filter: blur(0px);
    }

    35% {
        opacity: 0.9;
        transform: scale(1.05);
        filter: blur(0.3px);
    }

    70% {
        opacity: 0.65;
        transform: scale(0.95);
        filter: blur(0.15px);
    }
}

/* soft yellow-green */
@keyframes gentlePulse {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.8);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.08);
        filter: blur(0.3px);
    }
}

/* quick rare bursts */
@keyframes emberFlash {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(0.7);
    }

    15% {
        opacity: 1;
        transform: scale(1.3);
        filter: blur(0.4px) brightness(1.2);
    }

    30% {
        opacity: 0.3;
        transform: scale(0.75);
    }

    65% {
        opacity: 0.9;
        transform: scale(1.15);
        filter: blur(0.3px) brightness(1.15);
    }

    85% {
        opacity: 0.25;
        transform: scale(0.7);
    }
}

/* Individual firefly placements with organic drift patterns */
.firefly-jar__fly.f1 {
    left: 18%;
    top: 32%;
    --dx: 14px;
    --dy: -18px;
    animation-duration: 5.8s, 2.8s;
    animation-delay: -1.2s, -0.4s;
}

.firefly-jar__fly.f2 {
    left: 58%;
    top: 22%;
    --dx: -16px;
    --dy: 12px;
    animation-duration: 6.5s, 2.4s;
    animation-delay: -2.1s, -0.9s;
}

.firefly-jar__fly.f3 {
    left: 42%;
    top: 45%;
    --dx: 18px;
    --dy: -10px;
    animation-duration: 5.2s, 3.2s;
    animation-delay: -0.7s, -1.5s;
}

.firefly-jar__fly.f4 {
    left: 25%;
    top: 62%;
    --dx: -13px;
    --dy: 16px;
    animation-duration: 5.5s, 3.1s;
    animation-delay: -3.2s, -0.8s;
}

.firefly-jar__fly.f5 {
    left: 70%;
    top: 55%;
    --dx: 11px;
    --dy: -15px;
    animation-duration: 6.2s, 2.3s;
    animation-delay: -1.8s, -1.2s;
}

.firefly-jar__fly.f6 {
    left: 35%;
    top: 75%;
    --dx: 15px;
    --dy: 13px;
    animation-duration: 5.0s, 3.3s;
    animation-delay: -2.5s, -0.5s;
}

.firefly-jar__fly.f7 {
    left: 12%;
    top: 48%;
    --dx: 10px;
    --dy: 17px;
    animation-duration: 5.7s, 2.7s;
    animation-delay: -0.3s, -2.0s;
}

.firefly-jar__fly.f8 {
    left: 78%;
    top: 38%;
    --dx: -17px;
    --dy: -12px;
    animation-duration: 4.8s, 1.9s;
    animation-delay: -1.6s, -0.6s;
}

/* ========== RESPONSIVE TWEAKS ========== */
@media (max-width: 768px) {
    .firefly-jar {
        --jar-w: 88px;
        --jar-h: 145px;
        transform: rotate(-1.5deg) translateY(var(--jar-lift));
    }

    .firefly-jar__fly {
        width: 6px;
        height: 6px;
    }

    .firefly-jar__fly.f2,
    .firefly-jar__fly.f5,
    .firefly-jar__fly.f8 {
        width: 7px;
        height: 7px;
    }
}

/* ========== SHAKE ANIMATION ========== */
.firefly-jar.jar-shake {
    animation: jarShake 0.6s ease-in-out !important;
}

@keyframes jarShake {

    0%,
    100% {
        transform: rotate(-2.5deg) translateY(var(--jar-lift)) translateX(0);
    }

    10% {
        transform: rotate(-4deg) translateY(var(--jar-lift)) translateX(-3px);
    }

    20% {
        transform: rotate(-1deg) translateY(var(--jar-lift)) translateX(3px);
    }

    30% {
        transform: rotate(-4.5deg) translateY(var(--jar-lift)) translateX(-3px);
    }

    40% {
        transform: rotate(-0.5deg) translateY(var(--jar-lift)) translateX(3px);
    }

    50% {
        transform: rotate(-3.5deg) translateY(var(--jar-lift)) translateX(-2px);
    }

    60% {
        transform: rotate(-1.5deg) translateY(var(--jar-lift)) translateX(2px);
    }

    70% {
        transform: rotate(-3deg) translateY(var(--jar-lift)) translateX(-1px);
    }

    80% {
        transform: rotate(-2deg) translateY(var(--jar-lift)) translateX(1px);
    }

    90% {
        transform: rotate(-2.8deg) translateY(var(--jar-lift)) translateX(-0.5px);
    }
}

/* ========== GALAXY MODE ========== */

.firefly-jar.glitter-mode .firefly-jar__glass {
    background:
        radial-gradient(ellipse at 35% 15%, rgba(200, 220, 255, 0.12), transparent 45%),
        radial-gradient(ellipse at 75% 25%, rgba(210, 180, 255, 0.08), transparent 40%),
        radial-gradient(ellipse at 50% 85%, rgba(180, 200, 240, 0.06), transparent 55%),
        radial-gradient(circle at 45% 50%, rgba(160, 190, 230, 0.04), transparent 70%),
        linear-gradient(180deg, rgba(200, 220, 255, 0.08), rgba(180, 200, 240, 0.04)),
        var(--glass);

    box-shadow:
        inset 0 0 0 1.5px rgba(200, 220, 255, 0.22),
        inset 2px 0 8px rgba(200, 230, 255, 0.18),
        inset -2px 0 8px rgba(210, 180, 255, 0.15),
        inset 0 12px 28px rgba(180, 200, 240, 0.18),
        inset 0 -18px 24px rgba(190, 180, 230, 0.12),
        0 0 0 0.5px rgba(220, 230, 255, 0.12),
        0 0 20px rgba(200, 220, 255, 0.15);
}

.firefly-jar.glitter-mode .firefly-jar__fly {
    mix-blend-mode: screen;
    filter: brightness(1.2);
}

/* Star Type 1: white diamond stars (2 stars) */
.firefly-jar.glitter-mode .firefly-jar__fly.f1,
.firefly-jar.glitter-mode .firefly-jar__fly.f5 {
    width: 4px !important;
    height: 4px !important;
    background: radial-gradient(circle at 35% 35%,
            rgba(255, 255, 255, 1),
            rgba(245, 250, 255, 0.95) 30%,
            rgba(240, 245, 255, 0.85) 70%,
            transparent);

    box-shadow:
        0 0 6px rgba(255, 255, 255, 1),
        0 0 12px rgba(245, 250, 255, 0.8),
        0 0 20px rgba(240, 250, 255, 0.5),
        0 0 30px rgba(230, 245, 255, 0.3);

    animation:
        galaxyFloat 4.5s ease-in-out infinite,
        diamondTwinkle 1.2s ease-in-out infinite !important;
}

/* Star Type 2: Cool blue stars (2 stars) */
.firefly-jar.glitter-mode .firefly-jar__fly.f2,
.firefly-jar.glitter-mode .firefly-jar__fly.f6 {
    width: 3px !important;
    height: 3px !important;
    background: radial-gradient(circle at 40% 40%,
            rgba(200, 230, 255, 1),
            rgba(180, 220, 255, 0.9) 40%,
            rgba(160, 210, 255, 0.7) 80%,
            transparent);

    box-shadow:
        0 0 5px rgba(200, 230, 255, 0.95),
        0 0 10px rgba(180, 220, 255, 0.7),
        0 0 16px rgba(160, 210, 255, 0.4);

    animation:
        galaxyFloat 3.8s ease-in-out infinite,
        blueTwinkle 1.4s ease-in-out infinite !important;
}

/* Star Type 3: Purple nebula stars (2 stars) */
.firefly-jar.glitter-mode .firefly-jar__fly.f3,
.firefly-jar.glitter-mode .firefly-jar__fly.f7 {
    width: 2.5px !important;
    height: 2.5px !important;
    background: radial-gradient(circle at 30% 30%,
            rgba(230, 200, 255, 1),
            rgba(210, 180, 255, 0.9) 35%,
            rgba(190, 160, 255, 0.75) 75%,
            transparent);

    box-shadow:
        0 0 4px rgba(230, 200, 255, 0.9),
        0 0 9px rgba(210, 180, 255, 0.65),
        0 0 14px rgba(190, 160, 255, 0.4),
        0 0 20px rgba(170, 140, 255, 0.25);

    animation:
        galaxyFloat 4.2s ease-in-out infinite,
        purpleTwinkle 1.6s ease-in-out infinite !important;
}

/* Star Type 4: Golden & pink cosmic dust (2 stars) */
.firefly-jar.glitter-mode .firefly-jar__fly.f4,
.firefly-jar.glitter-mode .firefly-jar__fly.f8 {
    width: 2px !important;
    height: 2px !important;
    background: radial-gradient(circle at 35% 35%,
            rgba(255, 240, 220, 1),
            rgba(255, 220, 200, 0.9) 40%,
            rgba(255, 200, 210, 0.8) 70%,
            transparent);

    box-shadow:
        0 0 3px rgba(255, 240, 220, 0.95),
        0 0 7px rgba(255, 220, 200, 0.7),
        0 0 12px rgba(255, 200, 210, 0.45);

    animation:
        galaxyFloat 3.5s ease-in-out infinite,
        goldenTwinkle 1.8s ease-in-out infinite !important;
}

/* Repositioned for galaxy depth effect */
.firefly-jar.glitter-mode .firefly-jar__fly.f1 {
    left: 25%;
    top: 20%;
}

.firefly-jar.glitter-mode .firefly-jar__fly.f2 {
    left: 68%;
    top: 25%;
}

.firefly-jar.glitter-mode .firefly-jar__fly.f3 {
    left: 42%;
    top: 35%;
}

.firefly-jar.glitter-mode .firefly-jar__fly.f4 {
    left: 78%;
    top: 42%;
}

.firefly-jar.glitter-mode .firefly-jar__fly.f5 {
    left: 50%;
    top: 55%;
}

.firefly-jar.glitter-mode .firefly-jar__fly.f6 {
    left: 18%;
    top: 60%;
}

.firefly-jar.glitter-mode .firefly-jar__fly.f7 {
    left: 62%;
    top: 68%;
}

.firefly-jar.glitter-mode .firefly-jar__fly.f8 {
    left: 35%;
    top: 78%;
}

/* Base galaxy float */
@keyframes galaxyFloat {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(1.5px, -2px) rotate(90deg);
    }

    50% {
        transform: translate(-1px, 1.5px) rotate(180deg);
    }

    75% {
        transform: translate(2px, 0.5px) rotate(270deg);
    }
}

/* Diamond star twinkle - sharp bright pulses */
@keyframes diamondTwinkle {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.8);
        filter: brightness(1);
    }

    15% {
        opacity: 1;
        transform: scale(1.4);
        filter: brightness(1.5);
    }

    30% {
        opacity: 0.6;
        transform: scale(0.9);
        filter: brightness(1.1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.2);
        filter: brightness(1.3);
    }

    65% {
        opacity: 0.4;
        transform: scale(0.75);
        filter: brightness(0.9);
    }
}

/* Blue star twinkle - gentle pulsing */
@keyframes blueTwinkle {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.75);
    }

    40% {
        opacity: 0.95;
        transform: scale(1.25);
    }

    70% {
        opacity: 0.6;
        transform: scale(0.9);
    }
}

/* Purple nebula twinkle - slow mystical pulse */
@keyframes purpleTwinkle {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.7);
        filter: blur(0px);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.15);
        filter: blur(0.3px);
    }
}

/* Golden cosmic dust - rapid shimmer */
@keyframes goldenTwinkle {

    0%,
    100% {
        opacity: 0.25;
        transform: scale(0.65);
    }

    20% {
        opacity: 0.9;
        transform: scale(1.3);
    }

    40% {
        opacity: 0.4;
        transform: scale(0.8);
    }

    60% {
        opacity: 0.95;
        transform: scale(1.25);
    }

    80% {
        opacity: 0.35;
        transform: scale(0.7);
    }
}

/* Multi-layered nebula glow in galaxy mode */
.firefly-jar.glitter-mode .firefly-jar__glow {
    background:
        radial-gradient(ellipse at 35% 30%,
            rgba(200, 220, 255, 0.25) 0%,
            transparent 40%),
        radial-gradient(ellipse at 65% 50%,
            rgba(210, 180, 255, 0.22) 0%,
            transparent 45%),
        radial-gradient(ellipse at 45% 70%,
            rgba(255, 220, 240, 0.18) 0%,
            transparent 50%),
        radial-gradient(circle at 50% 45%,
            rgba(230, 240, 255, 0.28) 0%,
            rgba(220, 230, 255, 0.18) 30%,
            rgba(210, 220, 255, 0.08) 60%,
            transparent 75%);
    filter: blur(16px);
    animation: nebulaGlow 5s ease-in-out infinite;
}

@keyframes nebulaGlow {

    0%,
    100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.95) rotate(0deg);
    }

    33% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(1.08) rotate(2deg);
    }

    66% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.02) rotate(-2deg);
    }
}

/* Override glass highlight in galaxy mode and add micro stars */
.firefly-jar.glitter-mode .firefly-jar__glass::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background:
        /* Micro background stars - tiny twinkling dots */
        radial-gradient(circle at 22% 38%, rgba(255, 255, 255, 0.85) 0%, transparent 1.5%),
        radial-gradient(circle at 58% 25%, rgba(200, 230, 255, 0.75) 0%, transparent 1%),
        radial-gradient(circle at 72% 55%, rgba(230, 200, 255, 0.7) 0%, transparent 1.2%),
        radial-gradient(circle at 15% 70%, rgba(255, 240, 220, 0.7) 0%, transparent 1%),
        radial-gradient(circle at 85% 68%, rgba(245, 250, 255, 0.8) 0%, transparent 1.3%),
        radial-gradient(circle at 45% 82%, rgba(210, 180, 255, 0.75) 0%, transparent 1.1%),
        /* Additional depth stars */
        radial-gradient(circle at 30% 15%, rgba(255, 255, 255, 0.6) 0%, transparent 0.8%),
        radial-gradient(circle at 88% 32%, rgba(200, 220, 255, 0.65) 0%, transparent 0.9%),
        radial-gradient(circle at 12% 48%, rgba(220, 190, 255, 0.6) 0%, transparent 0.7%),
        radial-gradient(circle at 52% 90%, rgba(255, 230, 240, 0.7) 0%, transparent 1%);
    opacity: 0.8;
    filter: blur(0px);
    animation: microStarsTwinkle 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes microStarsTwinkle {

    0%,
    100% {
        opacity: 0.4;
    }

    25% {
        opacity: 0.85;
    }

    50% {
        opacity: 0.55;
    }

    75% {
        opacity: 0.95;
    }
}

@media (prefers-reduced-motion: reduce) {

    .firefly-jar,
    .firefly-jar *,
    .firefly-jar::before,
    .firefly-jar::after {
        animation: none !important;
    }

    .firefly-jar__fly {
        opacity: 0.8;
    }

    .firefly-jar.jar-shake {
        animation: none !important;
    }
}