/* ================================================
   STACKO - Animations Stylesheet
   Keyframes & Animation Effects
   ================================================ */

/* -------------------- Fade Animations -------------------- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -------------------- Floating & Hover Animations -------------------- */
@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

@keyframes blockFloat {
    0%, 100% {
        transform: perspective(1000px) rotateX(20deg) rotateY(-30deg) translateY(0);
    }
    50% {
        transform: perspective(1000px) rotateX(20deg) rotateY(-30deg) translateY(-5px);
    }
}

@keyframes downloadFloat {
    0%, 100% {
        transform: translateX(-50%) perspective(1000px) rotateX(20deg) rotateY(-30deg) translateY(0);
    }
    50% {
        transform: translateX(-50%) perspective(1000px) rotateX(20deg) rotateY(-30deg) translateY(-8px);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 212, 255, 0.6);
    }
}

/* -------------------- Particle Animations -------------------- */
@keyframes snowfall {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 50px 180px, -30px 180px, 40px 180px, 60px 180px, -20px 180px;
    }
}

@keyframes rainfall {
    0% {
        background-position-y: 0;
    }
    100% {
        background-position-y: 20px;
    }
}

@keyframes fireflies {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes sakuraFall {
    0% {
        background-position: 0 0, 0 0, 0 0;
        transform: rotate(0deg);
    }
    100% {
        background-position: 50px 180px, -30px 180px, 40px 180px;
        transform: rotate(360deg);
    }
}

@keyframes leavesFall {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 60px 180px, -40px 180px, 50px 180px;
    }
}

@keyframes bubbleRise {
    0% {
        background-position: 0 180px, 0 180px, 0 180px;
    }
    100% {
        background-position: 30px 0, -20px 0, 40px 0;
    }
}

@keyframes emberRise {
    0% {
        background-position: 0 180px, 0 180px, 0 180px;
        opacity: 1;
    }
    100% {
        background-position: 20px 0, -30px 0, 40px 0;
        opacity: 0.3;
    }
}

@keyframes confettiFall {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0;
        transform: rotate(0deg);
    }
    100% {
        background-position: 30px 180px, -20px 180px, 40px 180px, -10px 180px;
        transform: rotate(360deg);
    }
}

@keyframes fireworkBurst {
    0% {
        background: radial-gradient(circle at 50% 50%, #FFD700 0%, transparent 5%);
    }
    25% {
        background: radial-gradient(circle at 50% 50%, transparent 0%, #FFD700 20%, #FF6B35 40%, transparent 60%);
    }
    50% {
        background: radial-gradient(circle at 50% 50%, transparent 20%, #FF1493 40%, #00D4FF 60%, transparent 80%);
    }
    100% {
        background: transparent;
    }
}

/* -------------------- Theme Background Animations -------------------- */
@keyframes aurora {
    0%, 100% {
        background: linear-gradient(180deg,
            #0A1520 0%,
            rgba(0, 255, 136, 0.1) 30%,
            rgba(0, 204, 255, 0.1) 50%,
            rgba(255, 0, 255, 0.1) 70%,
            #051A2A 100%
        );
    }
    50% {
        background: linear-gradient(180deg,
            #0A1520 0%,
            rgba(255, 0, 255, 0.15) 30%,
            rgba(0, 255, 136, 0.15) 50%,
            rgba(0, 204, 255, 0.1) 70%,
            #051A2A 100%
        );
    }
}

@keyframes lavaGlow {
    0%, 100% {
        background: linear-gradient(180deg,
            #1A0500 0%,
            rgba(255, 69, 0, 0.3) 50%,
            #2A0A00 100%
        );
    }
    50% {
        background: linear-gradient(180deg,
            #1A0500 0%,
            rgba(255, 140, 0, 0.4) 50%,
            #2A0A00 100%
        );
    }
}

@keyframes crystalShimmer {
    0%, 100% {
        filter: hue-rotate(0deg) brightness(1);
    }
    50% {
        filter: hue-rotate(30deg) brightness(1.2);
    }
}

/* -------------------- Demo Game Animations -------------------- */
@keyframes demoSlide {
    0%, 100% {
        left: 20%;
    }
    50% {
        left: 60%;
    }
}

@keyframes perfectPop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes blockDrop {
    0% {
        transform: perspective(500px) rotateX(15deg) rotateY(-20deg) translateY(-200px);
    }
    80% {
        transform: perspective(500px) rotateX(15deg) rotateY(-20deg) translateY(10px);
    }
    100% {
        transform: perspective(500px) rotateX(15deg) rotateY(-20deg) translateY(0);
    }
}

@keyframes perfectFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.8);
    }
    70% {
        box-shadow: 0 0 20px 10px rgba(255, 215, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

/* -------------------- Text Animations -------------------- */
@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

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

/* -------------------- Number Counter Animation -------------------- */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -------------------- Loading Animations -------------------- */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* -------------------- Theme-Specific Animations -------------------- */

/* Twinkle animation for stars */
@keyframes twinkle {
    0%, 100% {
        opacity: 0.4;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
    75% {
        opacity: 0.9;
    }
}

/* Heavy rainfall for thunderstorm */
@keyframes rainfallHeavy {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(50%);
    }
}

/* Lightning flash effect */
@keyframes lightningFlash {
    0%, 9%, 11%, 29%, 31%, 100% {
        opacity: 0;
    }
    10%, 30% {
        opacity: 1;
    }
}

@keyframes lightningBolt {
    0%, 100% {
        clip-path: polygon(45% 0%, 35% 40%, 50% 40%, 30% 100%, 70% 50%, 55% 50%, 65% 0%);
        opacity: 0;
    }
    10%, 12% {
        clip-path: polygon(45% 0%, 35% 40%, 50% 40%, 30% 100%, 70% 50%, 55% 50%, 65% 0%);
        opacity: 1;
    }
    50%, 52% {
        clip-path: polygon(55% 0%, 45% 35%, 60% 35%, 40% 100%, 80% 55%, 65% 55%, 75% 0%);
        opacity: 1;
    }
}

/* Star twinkling with glow */
@keyframes starTwinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
        filter: blur(0px);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
        filter: blur(0.5px);
    }
}

/* Meteor streak across sky - original */
@keyframes meteorStreak {
    0% {
        transform: translateX(100%) translateY(-100%) rotate(-45deg);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translateX(-200%) translateY(200%) rotate(-45deg);
        opacity: 0;
    }
}

/* Meteor fly animation - for theme cards */
@keyframes meteorFly {
    0% {
        transform: rotate(-45deg) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: rotate(-45deg) translateX(-150px);
        opacity: 0;
    }
}

/* Meteor glow trail */
@keyframes meteorGlow {
    0%, 100% {
        box-shadow: 0 0 10px 2px rgba(255, 215, 0, 0.8),
                    0 0 20px 5px rgba(255, 165, 0, 0.5),
                    0 0 30px 8px rgba(255, 99, 71, 0.3);
    }
    50% {
        box-shadow: 0 0 15px 4px rgba(255, 215, 0, 1),
                    0 0 30px 8px rgba(255, 165, 0, 0.7),
                    0 0 45px 12px rgba(255, 99, 71, 0.4);
    }
}

/* Snow with wobble effect */
@keyframes snowfallWobble {
    0% {
        background-position: 0 0, 10px 0, 20px 0, 30px 0, 5px 0;
        transform: translateX(0);
    }
    25% {
        transform: translateX(3px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(-3px);
    }
    100% {
        background-position: 50px 180px, -30px 180px, 40px 180px, 60px 180px, -20px 180px;
        transform: translateX(0);
    }
}

/* Galaxy deep space pulse */
@keyframes galaxyPulse {
    0%, 100% {
        background: linear-gradient(180deg,
            #0a0a1a 0%,
            #1a0a2e 50%,
            #050510 100%);
    }
    50% {
        background: linear-gradient(180deg,
            #0a0a1a 0%,
            #2a1a4e 50%,
            #0a0a20 100%);
    }
}

/* Screen flash for lightning */
@keyframes screenFlash {
    0%, 100% {
        background-color: transparent;
    }
    5%, 15% {
        background-color: rgba(255, 255, 255, 0.3);
    }
    10% {
        background-color: rgba(255, 255, 255, 0.6);
    }
}

@keyframes dotPulse {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* -------------------- Scroll Reveal Animation Classes -------------------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* -------------------- Staggered Animation Delays -------------------- */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* -------------------- Interactive Hover Effects -------------------- */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* -------------------- Button Press Effect -------------------- */
.btn-press {
    transition: transform 0.1s ease;
}

.btn-press:active {
    transform: scale(0.95);
}

/* -------------------- Ripple Effect -------------------- */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.ripple:active::after {
    width: 200%;
    height: 200%;
}

/* -------------------- Lightning Flash Effect -------------------- */
@keyframes lightning {
    0%, 9%, 11%, 100% {
        background: transparent;
    }
    10% {
        background: rgba(255, 255, 255, 0.2);
    }
}

.lightning-particles {
    animation: lightning 5s infinite;
}

/* -------------------- Matrix Code Rain -------------------- */
@keyframes codeRain {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 500px;
    }
}

.code-particles {
    background:
        linear-gradient(180deg,
            rgba(0, 255, 0, 0.8) 0%,
            rgba(0, 255, 0, 0.4) 50%,
            transparent 100%
        );
    background-size: 20px 100px;
    animation: codeRain 2s linear infinite;
}

/* -------------------- Nebula Drift -------------------- */
@keyframes nebulaDrift {
    0% {
        background-position: 0 0;
        filter: hue-rotate(0deg);
    }
    50% {
        filter: hue-rotate(30deg);
    }
    100% {
        background-position: 100px 50px;
        filter: hue-rotate(0deg);
    }
}

.nebula-particles {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(107, 78, 158, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(176, 106, 179, 0.3) 0%, transparent 50%);
    animation: nebulaDrift 10s ease-in-out infinite;
}

/* -------------------- Meteor Streak -------------------- */
@keyframes meteorStreak {
    0% {
        background-position: 200% -100%;
    }
    100% {
        background-position: -200% 200%;
    }
}

.meteor-particles {
    background:
        linear-gradient(135deg,
            transparent 40%,
            rgba(255, 255, 255, 0.8) 45%,
            rgba(255, 200, 100, 0.5) 50%,
            transparent 55%
        );
    background-size: 300% 300%;
    animation: meteorStreak 3s linear infinite;
}

/* -------------------- Smooth Scroll Behavior -------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}