/**
 * Cupcake 2048 Motion System
 * 
 * Implements merge pulses, slide transitions, and milestone feedback.
 * Uses shared duration and easing tokens from tokens.css.
 */

/* 1. Base Tile Transitions (Slides) */
.tile {
    transition: transform var(--motion-duration-base) var(--motion-ease-standard);
}

/* 2. New Tile Appear (Pop-in) */
@keyframes cupcake-appear {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.tile-new .tile-inner {
    animation: cupcake-appear var(--motion-duration-base) var(--motion-ease-standard) backwards;
}

/* 3. Merge Feedback (Pulse + Opacity Shift) */
@keyframes cupcake-merge-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.9;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.tile-merged .tile-inner {
    z-index: 20;
    animation: cupcake-merge-pulse var(--motion-duration-base) var(--motion-ease-standard);
}

/* 4. Milestone / New-Tier Feedback */
/* Applied to tiles when a significant tier is reached (e.g. 1024, 2048) */
@keyframes cupcake-milestone-glow {
    0% { box-shadow: 0 0 0 0 var(--color-brand); }
    50% { box-shadow: 0 0 20px 10px var(--color-brand); }
    100% { box-shadow: 0 0 0 0 var(--color-brand); }
}

.tile-milestone .tile-inner {
    animation: cupcake-milestone-glow var(--motion-duration-slow) var(--motion-ease-standard) infinite;
}

/* 5. Reduced Motion Safety */
@media (prefers-reduced-motion: reduce) {
    .tile {
        transition: none !important;
    }
    
    .tile-new .tile-inner,
    .tile-merged .tile-inner,
    .tile-milestone .tile-inner {
        animation: none !important;
        opacity: 1 !important;
        transform: scale(1) !important;
    }
    
    /* Simple fade for new tiles if needed */
    @keyframes simple-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .tile-new .tile-inner {
        animation: simple-fade var(--motion-duration-base) linear !important;
    }
}