.donut-light {
    --firefly-core: #fffaf0;
    --firefly-wing: rgba(236, 250, 255, 0.72);
    --firefly-wing-edge: rgba(255, 255, 255, 0.95);
    --firefly-spark: rgba(255, 255, 255, 0.86);
    --spark-opacity-soft: 0.32;
    --flutter-duration: 168ms;
    --flight-roll: 0rad;
    isolation: isolate;
}

.donut-light:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.95);
    outline-offset: 7px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12), 0 0 22px 4px var(--light-color);
}

.donut-light::before {
    z-index: 3;
}

.donut-light::after {
    z-index: 1;
}

.donut-light[data-flight="following"]::after,
.donut-light[data-flight="returning"]::after,
.donut-light[data-flight="hopping"]::after {
    opacity: 0;
}

.donut-light[data-flight="following"]::before,
.donut-light[data-flight="returning"]::before,
.donut-light[data-flight="hopping"]::before {
    inset: 19px;
    background:
        radial-gradient(circle at 38% 34%, #fff 0 16%, transparent 18%),
        radial-gradient(circle, var(--firefly-core) 0 45%, var(--light-color) 62%, transparent 74%);
    box-shadow:
        0 0 5px 2px rgba(255, 255, 255, 0.52),
        0 0 18px 5px var(--light-color),
        0 0 36px 7px var(--light-color);
    animation: firefly-breathe 3.2s ease-in-out infinite;
}

.firefly-body,
.firefly-wing,
.firefly-wing::before,
.firefly-wing::after,
.firefly-spark {
    pointer-events: none;
}

.firefly-body {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 6px;
    height: 6px;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--flight-roll)) scale(0.58);
    transform-origin: 50% 50%;
    border-radius: 50%;
    filter:
        drop-shadow(0 0 5px var(--firefly-core))
        drop-shadow(0 0 13px var(--light-color));
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.donut-light[data-flight="following"] .firefly-body,
.donut-light[data-flight="returning"] .firefly-body,
.donut-light[data-flight="hopping"] .firefly-body {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--flight-roll)) scale(0.58);
}

.firefly-body::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 2;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #fff 0 16%, transparent 18%),
        radial-gradient(circle, #fffef6 0 43%, var(--light-color) 68%, transparent 76%);
    box-shadow:
        0 0 5px 2px rgba(255, 255, 255, 0.58),
        0 0 12px 3px var(--light-color);
}

.firefly-wing {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 13px;
    height: 14px;
    transform-origin: 50% 72%;
    opacity: 0.82;
    mix-blend-mode: screen;
}

.firefly-wing::before,
.firefly-wing::after {
    content: "";
    position: absolute;
    border: 1px solid var(--firefly-wing-edge);
    background:
        radial-gradient(ellipse at 42% 20%, rgba(255, 255, 255, 0.92) 0 10%, transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.78), var(--firefly-wing) 42%, rgba(122, 221, 255, 0.16));
    box-shadow:
        inset 0 0 8px rgba(255, 255, 255, 0.54),
        0 0 10px rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(0.5px);
}

.firefly-wing::before {
    width: 8px;
    height: 13px;
    border-radius: 88% 48% 78% 38%;
}

.firefly-wing::after {
    width: 6px;
    height: 9px;
    border-radius: 82% 42% 78% 38%;
    opacity: 0.72;
}

.firefly-wing--left {
    transform: translate(-13px, -11px) rotate(-30deg) skewY(6deg);
    animation: firefly-left-wing var(--flutter-duration) ease-in-out infinite alternate;
}

.firefly-wing--left::before {
    right: 1px;
    top: 0;
    transform: rotate(-8deg);
}

.firefly-wing--left::after {
    right: 4px;
    top: 7px;
    transform: rotate(-39deg);
}

.firefly-wing--right {
    transform: translate(0, -11px) rotate(30deg) skewY(-6deg);
    animation: firefly-right-wing var(--flutter-duration) ease-in-out infinite alternate;
}

.firefly-wing--right::before {
    left: 1px;
    top: 0;
    transform: scaleX(-1) rotate(-8deg);
}

.firefly-wing--right::after {
    left: 4px;
    top: 7px;
    transform: scaleX(-1) rotate(-39deg);
}

.firefly-spark {
    position: absolute;
    left: calc(50% + var(--spark-x, 0px));
    top: calc(50% + var(--spark-y, 0px));
    z-index: 0;
    width: 2px;
    height: 2px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--spark-scale, 0.7));
    border-radius: 50%;
    background: var(--firefly-spark);
    box-shadow:
        0 0 4px 1px #fff,
        0 0 7px 1px var(--light-color);
    transition:
        left 260ms ease-out,
        top 260ms ease-out,
        opacity 220ms ease,
        transform 220ms ease;
}

.donut-light[data-flight="following"] .firefly-spark,
.donut-light[data-flight="returning"] .firefly-spark,
.donut-light[data-flight="hopping"] .firefly-spark {
    opacity: calc(var(--spark-opacity, 0) * var(--spark-opacity-soft));
    animation: firefly-spark-drift 1.9s ease-in-out infinite;
}

.donut-light[data-dragging] .firefly-wing,
.donut-light[data-flight="docked"] .firefly-wing,
.donut-lights[data-paused] .donut-light::before,
.donut-lights[data-paused] .firefly-wing,
.donut-lights[data-paused] .firefly-spark {
    animation-play-state: paused;
}

@keyframes firefly-breathe {
    0%, 100% {
        transform: scale(1);
        filter: saturate(1);
    }

    45% {
        transform: scale(1.08);
        filter: saturate(1.08);
    }
}

@keyframes firefly-left-wing {
    from {
        transform: translate(-12px, -10px) rotate(-38deg) skewY(7deg) scaleX(0.72);
    }

    to {
        transform: translate(-13px, -11px) rotate(-14deg) skewY(2deg) scaleX(1);
    }
}

@keyframes firefly-right-wing {
    from {
        transform: translate(-1px, -10px) rotate(38deg) skewY(-7deg) scaleX(0.72);
    }

    to {
        transform: translate(0, -11px) rotate(14deg) skewY(-2deg) scaleX(1);
    }
}

.donut-lights[data-ambient] .donut-light {
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
}

.donut-lights[data-ambient] .donut-light:not([data-flight="hopping"])::before {
    inset: 20px;
    background: #fffdf6;
    box-shadow:
        0 0 7px 2px rgba(255, 255, 255, 0.5),
        0 0 28px 8px var(--light-color),
        0 0 68px 18px var(--light-color);
    opacity: 0.58;
    animation: none;
    transition: none;
}

.donut-lights[data-ambient] .donut-light::after,
.donut-lights[data-ambient] .donut-light:not([data-flight="hopping"]) .firefly-body,
.donut-lights[data-ambient] .donut-light:not([data-flight="hopping"]) .firefly-wing,
.donut-lights[data-ambient] .donut-light:not([data-flight="hopping"]) .firefly-spark {
    display: none;
}

@keyframes firefly-spark-drift {
    0%, 100% {
        transform: translate(-50%, -50%) scale(var(--spark-scale, 0.7));
        filter: blur(0);
    }

    50% {
        transform: translate(-50%, -62%) scale(var(--spark-scale, 0.7));
        filter: blur(0.4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .donut-light,
    .donut-light::before,
    .donut-light::after,
    .firefly-body,
    .firefly-wing,
    .firefly-wing::before,
    .firefly-wing::after,
    .firefly-spark {
        animation: none !important;
        transition: none !important;
    }

    .donut-light[data-flight="following"]::before,
    .donut-light[data-flight="returning"]::before,
    .donut-light[data-flight="hopping"]::before {
        transform: none;
    }

    .donut-light[data-flight="following"] .firefly-spark,
    .donut-light[data-flight="returning"] .firefly-spark,
    .donut-light[data-flight="hopping"] .firefly-spark {
        opacity: 0;
    }
}