/* ===================================================================
   Dancing banana visuals — corner-pop edition.

   The banana is hidden by default (opacity 0, no animation running).
   On a beat trigger, JS sets its corner position + a `data-from`
   direction, then applies one of three animation classes. Each
   animation starts off-screen on that side, pops into view with a
   little bounce + wobble, then retreats back off-screen.
   ================================================================ */

.dancing-banana {
    position: fixed;
    z-index: 70;
    top: 50%;
    left: 50%;
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    transform: translate(-50%, -50%) scale(0);
    transform-origin: center center;
    opacity: 0;
    will-change: transform, opacity;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.5))
            drop-shadow(0 0 18px rgba(246,200,19,.4));
    text-shadow: 0 0 22px rgba(246,200,19,.55);
}

/* Direction-based off-screen entry offsets. We translate further on
   the entry/exit frames to make the banana feel like it's poking in
   from outside the viewport's edge. */
.dancing-banana[data-from="left"]   { --enter-x: -120%; --enter-y:    0%; }
.dancing-banana[data-from="right"]  { --enter-x:  120%; --enter-y:    0%; }
.dancing-banana[data-from="top"]    { --enter-x:    0%; --enter-y: -130%; }
.dancing-banana[data-from="bottom"] { --enter-x:    0%; --enter-y:  130%; }
.dancing-banana {                     --enter-x: -100%; --enter-y:    0%; }

/* "Ba" pop-in: small bouncy peek that retreats back out the same edge */
.dancing-banana.is-peek {
    animation: bananaPeek 0.65s cubic-bezier(.2,1.8,.4,1) !important;
}
@keyframes bananaPeek {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--enter-x)), calc(-50% + var(--enter-y)))
                   scale(0.6) rotate(-10deg);
    }
    25% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.35) rotate(-22deg);
    }
    55% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15) rotate(14deg);
    }
    85% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1.05) rotate(-4deg);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--enter-x)), calc(-50% + var(--enter-y)))
                   scale(0.6) rotate(0);
    }
}

/* "Banana" pop-in: a beefier peek that grows more and lingers longer,
   but still pops in from the edge rather than centering full-screen */
.dancing-banana.is-big-peek {
    animation: bananaBigPeek 1.1s cubic-bezier(.2,1.7,.4,1) !important;
    z-index: 72;
}
@keyframes bananaBigPeek {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--enter-x)), calc(-50% + var(--enter-y)))
                   scale(0.7) rotate(0);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(2.4) rotate(-22deg);
    }
    40% {
        transform: translate(-50%, -50%) scale(2.2) rotate(18deg);
    }
    65% {
        transform: translate(-50%, -50%) scale(2.0) rotate(-8deg);
    }
    85% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.7) rotate(4deg);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--enter-x)), calc(-50% + var(--enter-y)))
                   scale(0.7) rotate(0);
    }
}

/* Tiny "pop" for the bridge "track, track, track" hits */
.dancing-banana.is-pop {
    animation: bananaTinyPop 0.32s cubic-bezier(.2,1.7,.4,1) !important;
}
@keyframes bananaTinyPop {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--enter-x)), calc(-50% + var(--enter-y)))
                   scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15) rotate(8deg);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--enter-x)), calc(-50% + var(--enter-y)))
                   scale(0.5);
    }
}

/* Reduced-motion preference: still pop in, but skip the bouncy
   overshoot/rotation. */
@media (prefers-reduced-motion: reduce) {
    .dancing-banana.is-peek,
    .dancing-banana.is-big-peek,
    .dancing-banana.is-pop {
        animation-duration: 0.4s !important;
        animation-timing-function: ease-out !important;
    }
}