/* ============================================
   INFINITE EINSTEIN - Animations
   ============================================ */

/* ─── Keyframes ─── */

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
        box-shadow: 0 0 20px rgba(255, 209, 102, 0.5);
    }
}

@keyframes correct-pop {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes shake {

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

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

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

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

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

@keyframes block-appear {
    0% {
        transform: scale(0) rotate(-10deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes feedback-pop {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes star-pop {
    0% {
        transform: scale(0) rotate(-30deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.3) rotate(10deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes medal-reveal {
    0% {
        transform: scale(0) translateY(50px);
        opacity: 0;
    }

    60% {
        transform: scale(1.1) translateY(-10px);
    }

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

@keyframes confetti-fall {
    0% {
        transform: translateY(-10vh) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0;
    }
}

@keyframes fire-pulse {
    0% {
        box-shadow: 0 0 5px rgba(255, 87, 34, 0.3);
    }

    100% {
        box-shadow: 0 0 20px rgba(255, 87, 34, 0.6);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

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

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.15);
    }

    70% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes slide-up {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

@keyframes slide-down {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

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

@keyframes slide-right {
    from {
        transform: translateX(-30px);
        opacity: 0;
    }

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

@keyframes glow-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(255, 107, 53, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
    }
}

@keyframes title-shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

@keyframes character-idle {

    0%,
    100% {
        transform: translateY(0) scaleX(1);
    }

    25% {
        transform: translateY(-5px) scaleX(1.02);
    }

    75% {
        transform: translateY(-2px) scaleX(0.98);
    }
}

@keyframes obstacle-appear {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes score-fly {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px) scale(1.5);
        opacity: 0;
    }
}

@keyframes sparkle {

    0%,
    100% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes tile-flip {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(90deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

@keyframes combo-burst {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
        text-shadow: 0 0 20px currentColor;
    }

    100% {
        transform: scale(1);
    }
}

@keyframes progress-stripe {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 40px 0;
    }
}

/* ─── Animation Classes ─── */
.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-bounce-in {
    animation: bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.animate-slide-up {
    animation: slide-up 0.5s ease both;
}

.animate-slide-down {
    animation: slide-down 0.5s ease both;
}

.animate-slide-right {
    animation: slide-right 0.5s ease both;
}

.animate-glow-ring {
    animation: glow-ring 2s ease infinite;
}

.animate-spin-slow {
    animation: spin-slow 10s linear infinite;
}

.animate-character-idle {
    animation: character-idle 2s ease-in-out infinite;
}

/* Staggered children animations */
.stagger-children>* {
    animation: slide-up 0.4s ease both;
}

.stagger-children>*:nth-child(1) {
    animation-delay: 0.05s;
}

.stagger-children>*:nth-child(2) {
    animation-delay: 0.1s;
}

.stagger-children>*:nth-child(3) {
    animation-delay: 0.15s;
}

.stagger-children>*:nth-child(4) {
    animation-delay: 0.2s;
}

.stagger-children>*:nth-child(5) {
    animation-delay: 0.25s;
}

.stagger-children>*:nth-child(6) {
    animation-delay: 0.3s;
}

.stagger-children>*:nth-child(7) {
    animation-delay: 0.35s;
}

.stagger-children>*:nth-child(8) {
    animation-delay: 0.4s;
}

.stagger-children>*:nth-child(9) {
    animation-delay: 0.45s;
}

.stagger-children>*:nth-child(10) {
    animation-delay: 0.5s;
}

/* Score fly-up effect */
.score-popup {
    position: absolute;
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-accent);
    pointer-events: none;
    animation: score-fly 1s ease both;
    z-index: 50;
}

/* Sparkle effect */
.sparkle {
    position: absolute;
    pointer-events: none;
    z-index: 50;
}

.sparkle::before,
.sparkle::after {
    content: '✨';
    position: absolute;
    font-size: 20px;
    animation: sparkle 1s ease both;
}

.sparkle::after {
    animation-delay: 0.3s;
    left: 20px;
    top: -10px;
}

/* ─── Screen Transitions ─── */
.screen-enter {
    animation: slide-up 0.5s ease both;
}

.screen-exit {
    animation: slide-up 0.3s ease reverse both;
}

/* ─── Splash Screen Specific ─── */
.splash-title {
    animation: bounce-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

.splash-subtitle {
    animation: slide-up 0.6s ease 0.6s both;
}

.splash-btn {
    animation: slide-up 0.6s ease 0.9s both;
}

.splash-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.splash-particle {
    position: absolute;
    font-size: 24px;
    opacity: 0.15;
    animation: float 4s ease-in-out infinite;
}

/* ─── Loading Dots ─── */
.loading-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.loading-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary-light);
    animation: bounce-in 0.6s ease infinite alternate;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* ─── Celebration Overlay ─── */
.celebration-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.celebration-emoji {
    font-size: 80px;
    animation: feedback-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}