/* Part of the APK.audio project — http://APK.audio — made by Anthony Kuzub */
/* MIT Licence. Free, for everyone, for ever. Full text in LICENSE at the root. */
/* Cannon Animation & Lazy Loader:
   A person walks up to a cannon, puts his goggles on, braces to be hit by
   a cannonball, and jumps out of the way right as lazy loading finishes. */

.cannon-loader-stage {
    position: relative;
    width: 540px;
    max-width: 95vw;
    height: 220px;
    margin: 0 auto;
    background: radial-gradient(ellipse at center bottom, rgba(244, 144, 44, 0.08) 0%, rgba(18, 18, 18, 0) 70%);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.cannon-loader-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* ------------------------------------------------------------- 1. THE WALKER (0% to 28%) */
.person-walker {
    animation: cannonWalkIn 7.5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    transform-origin: 330px 180px;
}

@keyframes cannonWalkIn {
    0% {
        transform: translateX(-160px);
    }
    26% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(0px);
    }
}

/* Leg walk cycle */
.leg-left {
    transform-origin: 324px 152px;
    animation: cannonLeftLegWalk 7.5s linear infinite;
}
.leg-right {
    transform-origin: 336px 152px;
    animation: cannonRightLegWalk 7.5s linear infinite;
}

@keyframes cannonLeftLegWalk {
    0%, 6.5%, 13%, 19.5% { transform: rotate(-22deg); }
    3.25%, 9.75%, 16.25%, 22.75% { transform: rotate(22deg); }
    26%, 44% { transform: rotate(0deg); }
    /* Brace: widen/squat */
    45%, 58% { transform: rotate(-8deg); }
    /* Jump: tuck up */
    64%, 73% { transform: rotate(45deg); }
    /* Land & reset */
    76% { transform: rotate(-5deg); }
    80%, 100% { transform: rotate(0deg); }
}

@keyframes cannonRightLegWalk {
    0%, 6.5%, 13%, 19.5% { transform: rotate(22deg); }
    3.25%, 9.75%, 16.25%, 22.75% { transform: rotate(-22deg); }
    26%, 44% { transform: rotate(0deg); }
    /* Brace: widen/squat */
    45%, 58% { transform: rotate(8deg); }
    /* Jump: tuck up */
    64%, 73% { transform: rotate(-45deg); }
    /* Land & reset */
    76% { transform: rotate(5deg); }
    80%, 100% { transform: rotate(0deg); }
}

/* Arm walk cycle & actions */
.arm-left {
    transform-origin: 322px 131px;
    animation: cannonLeftArm 7.5s ease-in-out infinite;
}

@keyframes cannonLeftArm {
    0%, 6.5%, 13%, 19.5% { transform: rotate(20deg); }
    3.25%, 9.75%, 16.25%, 22.75% { transform: rotate(-20deg); }
    26%, 43% { transform: rotate(0deg); }
    /* Brace fists */
    44%, 58% { transform: rotate(-35deg) scale(1.05); }
    /* Jump dodge flail */
    64%, 73% { transform: rotate(-60deg); }
    76%, 100% { transform: rotate(0deg); }
}

/* Right arm: swings during walk, then reaches up to pull goggles down (28% to 42%) */
.arm-right {
    transform-origin: 338px 131px;
    animation: cannonRightArmGoggles 7.5s ease-in-out infinite;
}

@keyframes cannonRightArmGoggles {
    0%, 6.5%, 13%, 19.5% { transform: rotate(-20deg); }
    3.25%, 9.75%, 16.25%, 22.75% { transform: rotate(20deg); }
    26% { transform: rotate(0deg); }
    /* Reaching up to forehead */
    30% { transform: rotate(-105deg); }
    36% { transform: rotate(-95deg); }
    /* Pulling goggles down over eyes */
    40% { transform: rotate(-80deg); }
    43% { transform: rotate(0deg); }
    /* Brace stance */
    44%, 58% { transform: rotate(35deg) scale(1.05); }
    /* Jump dodge fling */
    64%, 73% { transform: rotate(60deg); }
    76%, 100% { transform: rotate(0deg); }
}

/* ------------------------------------------------------------- 2. GOGGLES DOWN (30% to 42%) */
.goggles-group {
    transform-origin: 330px 106px;
    animation: cannonGogglesSlide 7.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes cannonGogglesSlide {
    0%, 34% {
        transform: translateY(0px);
    }
    39%, 92% {
        transform: translateY(9px); /* Slides firmly over eyes */
    }
    97%, 100% {
        transform: translateY(0px); /* Resets for next loop */
    }
}

.lens {
    animation: cannonLensGlint 7.5s ease-in-out infinite;
}

@keyframes cannonLensGlint {
    0%, 38% { fill: #00e5ff; filter: none; }
    39%, 43% { fill: #ffffff; filter: drop-shadow(0 0 6px #00e5ff); }
    44%, 100% { fill: #00e5ff; filter: drop-shadow(0 0 2px rgba(0, 229, 255, 0.6)); }
}

/* ------------------------------------------------------------- 3. BRACING & SWEAT (44% to 58%) */
.person-torso-head {
    transform-origin: 330px 180px;
    animation: cannonTenseTremble 7.5s ease-in-out infinite;
}

@keyframes cannonTenseTremble {
    0%, 43% { transform: translate(0, 0); }
    44% { transform: translate(0, 4px); } /* crouch into brace */
    45%, 47%, 49%, 51%, 53%, 55%, 57% { transform: translate(-1px, 4px); }
    46%, 48%, 50%, 52%, 54%, 56% { transform: translate(1px, 4px); }
    58% { transform: translate(0, 4px); }
    64%, 100% { transform: translate(0, 0); }
}

.sweat-drop {
    opacity: 0;
    animation: cannonSweatDrop 7.5s ease-out infinite;
}

@keyframes cannonSweatDrop {
    0%, 46% { opacity: 0; transform: translateY(-4px); }
    48%, 57% { opacity: 1; transform: translateY(0px); }
    58%, 100% { opacity: 0; transform: translateY(6px); }
}

/* ------------------------------------------------------------- 4. CANNON FUSE & BLAST (48% to 62%) */
.cannon-fuse-spark {
    opacity: 0;
    transform-origin: 68px 116px;
    animation: cannonFuseSizzle 7.5s steps(2, start) infinite;
}

@keyframes cannonFuseSizzle {
    0%, 45% { opacity: 0; transform: scale(0.5); }
    46%, 57% { opacity: 1; transform: scale(1.3) rotate(15deg); }
    47%, 56% { opacity: 0.8; transform: scale(0.9) rotate(-20deg); }
    58%, 100% { opacity: 0; }
}

.cannon-barrel {
    transform-origin: 50px 148px;
    animation: cannonBarrelRecoil 7.5s cubic-bezier(0.1, 0.9, 0.2, 1) infinite;
}

@keyframes cannonBarrelRecoil {
    0%, 57.5% { transform: translateX(0px) rotate(0deg); }
    58% { transform: translateX(-22px) rotate(-3deg); } /* Recoil */
    62% { transform: translateX(-8px) rotate(-1deg); }
    68%, 100% { transform: translateX(0px) rotate(0deg); }
}

.cannon-blast {
    opacity: 0;
    transform-origin: 140px 140px;
    animation: cannonBlastFlash 7.5s ease-out infinite;
}

@keyframes cannonBlastFlash {
    0%, 57.8% { opacity: 0; transform: scale(0.3); }
    58% { opacity: 1; transform: scale(1.4); }
    60% { opacity: 0.7; transform: scale(1.7); }
    64% { opacity: 0; transform: scale(2.2); }
    100% { opacity: 0; }
}

/* ------------------------------------------------------------- 5. CANNONBALL FLYING */
.cannon-ball-group {
    opacity: 0;
    animation: cannonBallFly 7.5s cubic-bezier(0.2, 0.1, 0.25, 1) infinite;
}

@keyframes cannonBallFly {
    0%, 57.9% {
        opacity: 0;
        transform: translateX(0px);
    }
    58% {
        opacity: 1;
        transform: translateX(0px);
    }
    68% {
        opacity: 1;
        transform: translateX(390px); /* Zooms clean across screen past character */
    }
    70%, 100% {
        opacity: 0;
        transform: translateX(440px);
    }
}

/* ------------------------------------------------------------- 6. JUMP OUT OF THE WAY! (64% to 75%) */
.person-jumper {
    transform-origin: 330px 180px;
    animation: cannonJumpDodge 7.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) infinite;
}

@keyframes cannonJumpDodge {
    0%, 63% {
        transform: translateY(0px) rotate(0deg);
    }
    /* Leap high into air right before impact! */
    65% {
        transform: translateY(-82px) rotate(-12deg);
    }
    67.5% {
        transform: translateY(-90px) rotate(4deg);
    }
    71% {
        transform: translateY(-75px) rotate(8deg);
    }
    /* Landing with knee-cushion */
    75% {
        transform: translateY(4px) rotate(0deg);
    }
    78% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(0px);
    }
}

.person-shadow {
    transform-origin: 330px 182px;
    animation: cannonShadowJump 7.5s ease-in-out infinite;
}

@keyframes cannonShadowJump {
    0%, 63% { transform: scale(1); opacity: 0.45; }
    65%, 71% { transform: scale(0.35); opacity: 0.12; }
    75% { transform: scale(1.15); opacity: 0.55; }
    78%, 100% { transform: scale(1); opacity: 0.45; }
}

.dust-puff {
    opacity: 0;
    transform-origin: 330px 180px;
    animation: cannonDustLanding 7.5s ease-out infinite;
}

@keyframes cannonDustLanding {
    0%, 74.5% { opacity: 0; transform: scale(0.3); }
    75% { opacity: 0.85; transform: scale(1); }
    78% { opacity: 0; transform: scale(1.6); }
    100% { opacity: 0; }
}

/* ------------------------------------------------------------- OVERLAY & WRAPPER */
.cannon-lazy-overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 18, 18, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 9999;
    color: var(--text-main, #ffffff);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.cannon-lazy-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cannon-lazy-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent, #f4902c);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cannon-lazy-subtext {
    font-size: 12px;
    color: var(--text-muted, #9e9e9e);
}