/*
 * QueenK story butterflies.
 *
 * Environment/story effect only.
 * Never captures pointer input.
 */

.story-overlay-layer {
    position: fixed;
    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}

.story-butterflies {
    position: absolute;
    inset: 0;

    overflow: hidden;
}

.story-butterfly {
    --butterfly-x: 50%;
    --butterfly-y: 30%;
    --butterfly-scale: 1;
    --butterfly-delay: 0s;
    --butterfly-duration: 8s;
    --butterfly-drift: 40px;

    position: absolute;

    left: var(--butterfly-x);
    top: var(--butterfly-y);

    width: 22px;
    height: 16px;

    transform:
        translate(-50%, -50%)
        scale(var(--butterfly-scale));

    animation:
        queenk-butterfly-flight
        var(--butterfly-duration)
        ease-in-out
        var(--butterfly-delay)
        infinite;

    filter:
        drop-shadow(
            0 0 7px
            rgba(203, 121, 255, 0.55)
        );
}

.story-butterfly::before,
.story-butterfly::after {
    content: "";

    position: absolute;

    top: 1px;

    width: 11px;
    height: 14px;

    background:
        radial-gradient(
            circle at 45% 42%,
            rgba(255, 214, 255, 0.95) 0%,
            rgba(200, 119, 255, 0.95) 34%,
            rgba(114, 69, 213, 0.92) 70%,
            rgba(65, 38, 130, 0.92) 100%
        );

    animation:
        queenk-butterfly-wing
        0.42s
        ease-in-out
        infinite alternate;
}

.story-butterfly::before {
    right: 50%;

    border-radius:
        90% 45% 80% 35%;

    transform-origin:
        right center;

    transform:
        rotate(-18deg);
}

.story-butterfly::after {
    left: 50%;

    border-radius:
        45% 90% 35% 80%;

    transform-origin:
        left center;

    transform:
        rotate(18deg);
}

.story-butterfly__body {
    position: absolute;

    left: 50%;
    top: 4px;

    z-index: 2;

    width: 3px;
    height: 10px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #f5d8ff,
            #5c347e
        );

    transform:
        translateX(-50%);
}

@keyframes queenk-butterfly-wing {
    from {
        scale: 1 1;
    }

    to {
        scale: 0.28 1;
    }
}

@keyframes queenk-butterfly-flight {
    0% {
        translate:
            0
            0;

        rotate: -8deg;
    }

    25% {
        translate:
            calc(
                var(--butterfly-drift)
                * -0.35
            )
            -18px;

        rotate: 7deg;
    }

    50% {
        translate:
            var(--butterfly-drift)
            10px;

        rotate: 12deg;
    }

    75% {
        translate:
            calc(
                var(--butterfly-drift)
                * 0.25
            )
            -24px;

        rotate: -5deg;
    }

    100% {
        translate:
            0
            0;

        rotate: -8deg;
    }
}


/*
 * Keep the centre puzzle-reading area calmer.
 *
 * Most butterflies are intentionally positioned
 * toward the path / forest side of the scene.
 */


@media (max-width: 720px) {
    .story-butterfly {
        transform:
            translate(-50%, -50%)
            scale(
                calc(
                    var(--butterfly-scale)
                    * 0.82
                )
            );
    }
}


@media (prefers-reduced-motion: reduce) {
    .story-butterfly {
        animation: none;
    }

    .story-butterfly::before,
    .story-butterfly::after {
        animation: none;
    }
}