/* animations.css - Additional Custom Animations for Game Effects */

/* PERF: pause all CSS animations while the tab is hidden/backgrounded (no effect
   while the tab is in the foreground, i.e. while actually playing) */
body.tab-hidden * {
    animation-play-state: paused !important;
}

/* ===== TILE EXPLOSION ANIMATION ===== */
@keyframes tileExplode {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }
}

/* Shuffle: style.css — shufflePullToCenter, shuffleCenterJiggle, .shuffling */

/* ===== WORD DISPLAY ANIMATIONS ===== */
@keyframes glowSweep {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes rainbowShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ===== SPARKLE EFFECTS ===== */
@keyframes sparkleFloat {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-30px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0);
    }
}

/* ===== SCREEN SHAKE ===== */
@keyframes screenShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* ===== BORDER GLOW ===== */
@keyframes borderGlow {
    0% {
        opacity: 0;
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 30px rgba(255, 215, 0, 1), inset 0 0 30px rgba(255, 215, 0, 0.5);
    }
    100% {
        opacity: 0;
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
}

/* Enhanced border glow with gradient */
@keyframes borderGlowEnhanced {
    0% {
        opacity: 0;
        box-shadow: 0 0 0 rgba(255, 240, 90, 0);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 20px 8px rgba(255, 240, 90, 0.8), inset 0 0 20px 6px rgba(255, 240, 90, 0.4);
    }
    100% {
        opacity: 0;
        box-shadow: 0 0 0 rgba(255, 240, 90, 0);
    }
}

/* Border shine sweep */
@keyframes borderShine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* ===== ELECTRIC FLASH ===== */
@keyframes electricFlash {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* ===== GLASS SHATTER ===== */
@keyframes glassShatter {
    0% {
        stroke-dasharray: 0, 1000;
        stroke-dashoffset: 0;
        opacity: 1;
    }
    100% {
        stroke-dasharray: 1000, 0;
        stroke-dashoffset: 1000;
        opacity: 0;
    }
}

/* ===== PERSISTENT SHIMMER (10+ letter words) ===== */
.persistent-shimmer {
    animation: shimmerEffect 3s ease-in-out infinite;
}

@keyframes shimmerEffect {
    0%, 100% {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4),
                    0 0 30px rgba(255, 215, 0, 0.6),
                    inset 0 0 20px rgba(255, 215, 0, 0.3);
    }
}

/* ===== SCORE POPUP ===== */
@keyframes scorePopup {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
        color: #ffd700;
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    }
    100% {
        transform: scale(1);
    }
}

/* ===== RIPPLE EFFECT ===== */
.ripple {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    animation: rippleExpand 1.5s ease-out infinite;
}

@keyframes rippleExpand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(20);
        opacity: 0;
    }
}

/* ===== GRADIENT BACKGROUND SHIFT ===== */
@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* ===== BUG FIX 2: SWAP MODE ANIMATIONS ===== */
/* Phase 1: All tiles pulse when swap mode active */
@keyframes swapModePulse {
    0%, 100% { 
        transform: scale(1.05);
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    }
    50% { 
        transform: scale(0.95);
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.2);
    }
}

/* Apply pulsing animation to tiles in swap mode */
.grid-tile.swap-mode-pulse {
    animation: swapModePulse 1s ease-in-out infinite;
}

/* Phase 2: Individual tile morphs when letter is changed */
@keyframes swapMorph {
    0% {
        transform: scale(1.05);
        opacity: 1;
    }
    50% {
        transform: scale(0.95);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Apply morph animation to swapping tile */
.grid-tile.swapping {
    animation: swapMorph 0.5s ease-in-out forwards;
}

/* ===== ABILITY BUTTON GLOW (when affordable) ===== */
@keyframes abilityGlow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
    }
}

/* ===== GEM COLLECT ANIMATION ===== */
@keyframes gemCollect {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--target-x), var(--target-y)) scale(0.3) rotate(720deg);
        opacity: 0.8;
    }
}

/* ===== CONFETTI FALL ===== */
@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0.6;
    }
}

/* ===== PULSE ANIMATION FOR SELECTED PATH ===== */
@keyframes selectedPathPulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

/* ===== TILE ENTER FROM DIFFERENT DIRECTIONS ===== */
@keyframes tileEnterFromTop {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.5);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tileEnterFromBottom {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.5);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tileEnterFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px) scale(0.5);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes tileEnterFromRight {
    from {
        opacity: 0;
        transform: translateX(50px) scale(0.5);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ===== WORD ACCEPTANCE FLASH ===== */
@keyframes acceptFlash {
    0%, 100% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(16, 185, 129, 0.3);
    }
}

/* ===== WORD REJECTION SHAKE ===== */
@keyframes rejectShake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

/* ===== FLOATING ANIMATION ===== */
@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-100px);
    }
}

/* ===== BOUNCE IN ===== */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* ===== ZOOM OUT ===== */
@keyframes zoomOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* ===== STAR SPARKLE EFFECT ===== */
@keyframes starSparkle {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(
            calc(-50% + var(--distance) * cos(var(--angle))),
            calc(-50% + var(--distance) * sin(var(--angle)))
        ) scale(0) rotate(360deg);
    }
}

/* ===== CONFETTI ROTATION ===== */
@keyframes confettiRotate {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

/* ===== ELECTRIC BOLT ===== */
@keyframes electricBolt {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) scaleY(0);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) scaleY(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) scaleY(0.5);
    }
}

/* ===== CRACK EXPAND ===== */
@keyframes crackExpand {
    0% {
        stroke-dashoffset: var(--length, 1000);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* ===== STARDUST RISE ===== */
@keyframes stardustRise {
    0% {
        opacity: 0;
        transform: translateY(0) scale(1);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-100vh) scale(0.3);
    }
}

/* ===== RAINBOW SHIFT (FIXED BUG #3 - Non-infinite, stays at end state) ===== */
@keyframes rainbowShift {
    0% {
        background-position: 0% 50%;
        opacity: 1;
    }
    95% {
        background-position: 200% 50%;
        opacity: 1;
    }
    100% {
        background-position: 200% 50%;
        opacity: 0;
    }
}

/* ===== CRACK SHIMMER FOR REALITY SHATTER ===== */
@keyframes crackShimmer {
    0%, 100% { 
        background-position: -100% 0; 
        opacity: 0.1; 
    }
    50% { 
        background-position: 200% 0; 
        opacity: 0.3; 
    }
}

/* ===== TILE PARALLAX HOVER EFFECT ===== */
.tile-parallax {
    transition: all 0.2s ease-out;
    transform-style: preserve-3d;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ===== TIER 11-13 NEW ANIMATIONS ===== */

/* Chromatic aberration */
@keyframes chromaticShift {
    0%, 100% { filter: none; }
    25% { filter: drop-shadow(3px 0 0 #ff0000) drop-shadow(-3px 0 0 #00ffff); }
    50% { filter: drop-shadow(-3px 0 0 #ff0000) drop-shadow(3px 0 0 #00ffff); }
    75% { filter: drop-shadow(0 3px 0 #00ff00) drop-shadow(0 -3px 0 #ff00ff); }
}

/* Time dilation pulse */
@keyframes timeDilation {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
}

/* Rainbow wave sweep */
@keyframes rainbowWaveSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Kaleidoscope rotation */
@keyframes kaleidoscope {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Prismatic ring expansion */
@keyframes prismaticExpand {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* Matrix rain fall */
@keyframes matrixFall {
    0% { transform: translateY(-100%); opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

/* Aurora wave */
@keyframes auroraWave {
    0%, 100% { transform: translateX(0) skewX(0deg); background-position: 0% 50%; }
    50% { transform: translateX(20px) skewX(5deg); background-position: 100% 50%; }
}

/* ===== SHIMMER PULSE FOR CRACK PARTICLES ===== */
@keyframes shimmerPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* ===== ADVANCED FEATURE ANIMATIONS ===== */

/* Fade in animation for definition panel */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* FEATURE 4: Tile refresh animation */
@keyframes tileRefresh {
    0% {
        transform: scale(1) rotateY(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(0.8) rotateY(90deg);
        opacity: 0.5;
    }
    100% {
        transform: scale(1) rotateY(0deg);
        opacity: 1;
    }
}

/* Glass piece shimmer */
@keyframes glassPieceShimmer {
    0%, 100% { box-shadow: inset 0 0 20px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.3); }
    50% { box-shadow: inset 0 0 30px rgba(255,255,255,0.8), 0 0 20px rgba(255,255,255,0.6); }
}

/* Ability button parallax glow */
@keyframes abilityButtonGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); }
}

@media (max-width: 768px) {
    /* 1. FORCE THE ENTIRE ANIMATION TREE ONTO THE GPU HARDWARE ACCELERATOR */
    .played-word-center-overlay--tier-9 {
        will-change: transform, opacity !important;
        backface-visibility: hidden !important;
        perspective: 1000px !important;
    }

    /* 2. ACCELERATE INDIVIDUAL LIGHTNING ELEMENT LAYERS */
    .played-word-center-overlay--tier-9 div,
    .played-word-center-overlay--tier-9 svg {
        transform: translate3d(0, 0, 0) !important;
        will-change: opacity !important;
    }

    /* 3. ONLY ELIMINATE HEAVY BOX-SHADOWS ON CONTAINER DIVS */
    .played-word-center-overlay--tier-9 div {
        box-shadow: none !important;
        text-shadow: none !important;
        background: transparent !important;
    }

    /* 4. ABSOLUTE VISUAL RESTORATION RULE:
       Do NOT apply 'filter: none', 'stroke', or 'stroke-width' overrides here.
       Allow all underlying SVGs, paths, gradients, and native filter glows to 
       render exactly as they do on the perfect desktop/PC version. */
}