/**
 * BOLANDILA Interactive Game Template
 * Animations CSS
 *
 * Role of this file:
 * - Defines screen transitions
 * - Defines item levitation
 * - Defines modal/banner animations
 * - Defines sparkles and reward effects
 * - Keeps animation behavior consistent across the game
 */

/*
|--------------------------------------------------------------------------
| Screen transitions
|--------------------------------------------------------------------------
*/

.screen-content.is-transitioning-out {
    animation: screenFadeOut var(--screen-fade-duration) ease forwards;
}

.screen-content.is-transitioning-in {
    animation: screenFadeIn var(--screen-fade-duration) ease forwards;
}

@keyframes screenFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.996);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes screenFadeOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-4px) scale(0.996);
    }
}

/*
|--------------------------------------------------------------------------
| Element entrance animations
|--------------------------------------------------------------------------
*/

.animate-in {
    animation: elementFadeIn var(--box-fade-duration) ease both;
}

.animate-in-up {
    animation: elementFadeInUp var(--box-fade-duration) ease both;
}

.animate-in-down {
    animation: elementFadeInDown var(--box-fade-duration) ease both;
}

.animate-scale-in {
    animation: elementScaleIn 340ms cubic-bezier(0.18, 0.89, 0.32, 1.12) both;
}

@keyframes elementFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes elementFadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes elementFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes elementScaleIn {
    from {
        opacity: 0;
        transform: scale(0.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/*
|--------------------------------------------------------------------------
| Text box / button stagger helpers
|--------------------------------------------------------------------------
*/

.stagger-1 {
    animation-delay: 60ms;
}

.stagger-2 {
    animation-delay: 120ms;
}

.stagger-3 {
    animation-delay: 180ms;
}

.stagger-4 {
    animation-delay: 240ms;
}

/*
|--------------------------------------------------------------------------
| Soft levitation
|--------------------------------------------------------------------------
*/

.soft-levitation {
    animation: softLevitation 2800ms ease-in-out infinite;
}

.soft-levitation:nth-child(2) {
    animation-delay: 240ms;
}

.soft-levitation:nth-child(3) {
    animation-delay: 480ms;
}

@keyframes softLevitation {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/*
|--------------------------------------------------------------------------
| Modal animations
|--------------------------------------------------------------------------
*/

.modal-layer.is-active .modal-backdrop {
    animation: modalBackdropIn 220ms ease both;
}

.modal-layer.is-active .modal-box {
    animation: modalBoxIn 300ms cubic-bezier(0.18, 0.89, 0.32, 1.12) both;
}

.modal-layer.is-closing .modal-backdrop {
    animation: modalBackdropOut 180ms ease both;
}

.modal-layer.is-closing .modal-box {
    animation: modalBoxOut 180ms ease both;
}

@keyframes modalBackdropIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalBackdropOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes modalBoxIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalBoxOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
}

/*
|--------------------------------------------------------------------------
| Banner animations
|--------------------------------------------------------------------------
*/

.banner-box {
    animation: bannerIn 320ms ease both;
}

.banner-box.is-closing {
    animation: bannerOut 200ms ease both;
}

@keyframes bannerIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bannerOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
}

/*
|--------------------------------------------------------------------------
| Item feedback
|--------------------------------------------------------------------------
*/

.game-item.is-wrong {
    animation: wrongShake 360ms ease both;
}

.game-item.is-correct {
    animation: correctPulse 520ms ease both;
}

@keyframes wrongShake {
    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }
}

@keyframes correctPulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    45% {
        transform: scale(1.06);
        filter: brightness(1.18) drop-shadow(0 0 20px rgba(246, 200, 76, 0.78));
    }

    100% {
        transform: scale(1);
        filter: brightness(1.08) drop-shadow(0 0 14px rgba(246, 200, 76, 0.54));
    }
}

/*
|--------------------------------------------------------------------------
| Button glow pulse
|--------------------------------------------------------------------------
*/

.game-button.is-glowing {
    animation: buttonGlow 1800ms ease-in-out infinite;
}

@keyframes buttonGlow {
    0%,
    100% {
        box-shadow: var(--button-primary-shadow);
    }

    50% {
        box-shadow:
            var(--button-primary-shadow),
            0 0 24px rgba(246, 200, 76, 0.46);
    }
}

/*
|--------------------------------------------------------------------------
| Reward reveal
|--------------------------------------------------------------------------
*/

.reward-stage {
    animation: rewardStageIn 520ms ease both;
}

.reward-image {
    animation: rewardImageReveal 900ms cubic-bezier(0.18, 0.89, 0.32, 1.12) both;
}

.reward-button-wrap {
    animation: rewardButtonIn 520ms ease both;
    animation-delay: 520ms;
}

@keyframes rewardStageIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes rewardImageReveal {
    0% {
        opacity: 0;
        transform: scale(0.92);
        filter:
            blur(10px)
            brightness(1.2)
            drop-shadow(0 0 0 rgba(246, 200, 76, 0));
    }

    55% {
        opacity: 1;
        transform: scale(1.025);
        filter:
            blur(0)
            brightness(1.16)
            drop-shadow(0 0 44px rgba(246, 200, 76, 0.52));
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter:
            blur(0)
            brightness(1)
            drop-shadow(0 0 28px rgba(246, 200, 76, 0.36));
    }
}

@keyframes rewardButtonIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
|--------------------------------------------------------------------------
| Sparkles
|--------------------------------------------------------------------------
*/

.sparkle {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 999px;

    background: var(--color-gold-light);
    box-shadow:
        0 0 8px rgba(255, 229, 138, 0.95),
        0 0 18px rgba(246, 200, 76, 0.46);

    opacity: 0;

    pointer-events: none;

    animation: sparkleBurst 850ms ease-out forwards;
}

.sparkle.is-white {
    background: #ffffff;
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.95),
        0 0 16px rgba(246, 200, 76, 0.38);
}

.sparkle.is-large {
    width: 7px;
    height: 7px;
}

@keyframes sparkleBurst {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.3) rotate(0deg);
    }

    12% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform:
            translate(var(--sparkle-x, 0), var(--sparkle-y, -30px))
            scale(1.15)
            rotate(120deg);
    }
}

/*
|--------------------------------------------------------------------------
| Cursor glow
|--------------------------------------------------------------------------
*/

.cursor-glow {
    position: absolute;
    z-index: 999;

    width: var(--cursor-glow-size);
    height: var(--cursor-glow-size);

    border-radius: 999px;

    background: var(--cursor-glow-background);

    transform: translate(-50%, -50%);
    pointer-events: none;

    opacity: 0;
    transition:
        opacity 160ms ease,
        transform 80ms linear;
}

.game-shell.has-cursor .cursor-glow {
    opacity: 1;
}

/*
|--------------------------------------------------------------------------
| Scale marker feedback
|--------------------------------------------------------------------------
*/

.scale-marker.is-moving {
    transform: translate(-50%, -50%) scale(1.08);
    filter: brightness(1.12);
}

.scale-marker.is-on-target {
    animation: scaleMarkerTargetPulse 900ms ease-in-out infinite;
}

@keyframes scaleMarkerTargetPulse {
    0%,
    100% {
        box-shadow: var(--scale-marker-shadow);
    }

    50% {
        box-shadow:
            var(--scale-marker-shadow),
            0 0 34px rgba(246, 200, 76, 0.92);
    }
}

/*
|--------------------------------------------------------------------------
| Success screen pulse
|--------------------------------------------------------------------------
*/

.success-pulse {
    animation: successPulse 1200ms ease-in-out infinite;
}

@keyframes successPulse {
    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.12);
    }
}

/*
|--------------------------------------------------------------------------
| Debugger animation
|--------------------------------------------------------------------------
*/

.debugger-panel {
    animation: debuggerIn 240ms ease both;
}

@keyframes debuggerIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    .soft-levitation,
    .game-button.is-glowing,
    .scale-marker.is-on-target,
    .success-pulse {
        animation: none !important;
    }

    .sparkle {
        display: none !important;
    }

    .reward-image,
    .reward-stage,
    .reward-button-wrap,
    .modal-box,
    .modal-backdrop,
    .banner-box,
    .debugger-panel {
        animation-duration: 0.001ms !important;
    }
}