/**
 * BALDA Game - Premium Animations
 * Централизованный файл анимаций для живого интерфейса
 * v1.0.0
 */

/* =====================================================
   CSS Custom Properties для анимаций
   ===================================================== */
:root {
    /* Timing functions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
    --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1);
    
    /* Durations */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 800ms;
    
    /* Stagger delays */
    --stagger-1: 0ms;
    --stagger-2: 50ms;
    --stagger-3: 100ms;
    --stagger-4: 150ms;
    --stagger-5: 200ms;
    --stagger-6: 250ms;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================
   ENTRANCE ANIMATIONS
   ===================================================== */

/* Fade In Up - основная входная анимация для карточек */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp var(--duration-normal) var(--ease-out-expo) forwards;
    opacity: 0;
}

/* Staggered cards */
.animate-stagger-1 { animation-delay: var(--stagger-1); }
.animate-stagger-2 { animation-delay: var(--stagger-2); }
.animate-stagger-3 { animation-delay: var(--stagger-3); }
.animate-stagger-4 { animation-delay: var(--stagger-4); }
.animate-stagger-5 { animation-delay: var(--stagger-5); }
.animate-stagger-6 { animation-delay: var(--stagger-6); }

/* Scale In - для модальных окон и важных элементов */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scaleIn {
    animation: scaleIn var(--duration-normal) var(--ease-out-back) forwards;
}

/* Slide In Left - для боковых элементов */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slideInLeft {
    animation: slideInLeft var(--duration-normal) var(--ease-out-expo) forwards;
}

/* Slide In Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slideInRight {
    animation: slideInRight var(--duration-normal) var(--ease-out-expo) forwards;
}

/* Pop In - для кнопок и иконок */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-popIn {
    animation: popIn var(--duration-slow) var(--ease-spring) forwards;
    opacity: 0;
}

/* =====================================================
   CONTINUOUS ANIMATIONS
   ===================================================== */

/* Pulse Glow - для кнопки "Играть" */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(255, 165, 0, 0.4),
            0 0 40px rgba(255, 165, 0, 0.2),
            0 18px 40px rgba(0, 0, 0, 0.35);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(255, 165, 0, 0.6),
            0 0 60px rgba(255, 165, 0, 0.3),
            0 20px 45px rgba(0, 0, 0, 0.4);
        transform: translate(-50%, -50%) scale(1.02);
    }
}

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

/* Gentle Float - для декоративных элементов */
@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.animate-float {
    animation: gentleFloat 3s ease-in-out infinite;
}

/* Shimmer - для редких предметов */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.animate-shimmer {
    position: relative;
    overflow: hidden;
}

.animate-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
    pointer-events: none;
}

/* Sparkle - для легендарных предметов */
@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

.animate-sparkle {
    position: relative;
}

.animate-sparkle::before,
.animate-sparkle::after {
    content: '✦';
    position: absolute;
    color: gold;
    font-size: 12px;
    pointer-events: none;
}

.animate-sparkle::before {
    top: -5px;
    right: -5px;
    animation: sparkle 2s ease-in-out infinite;
}

.animate-sparkle::after {
    bottom: -5px;
    left: -5px;
    animation: sparkle 2s ease-in-out infinite 1s;
}

/* Heartbeat - для ежедневных наград */
@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.1);
    }
    20% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.05);
    }
    40% {
        transform: scale(1);
    }
}

.animate-heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

/* Bounce - для уведомлений */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-5px);
    }
}

.animate-bounce {
    animation: bounce 1s ease-in-out;
}

/* Wiggle - для привлечения внимания */
@keyframes wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

.animate-wiggle {
    animation: wiggle 0.5s ease-in-out;
}

/* =====================================================
   HOVER MICRO-INTERACTIONS
   ===================================================== */

/* Lift effect for cards */
.hover-lift {
    transition: transform var(--duration-fast) var(--ease-out-expo),
                box-shadow var(--duration-fast) var(--ease-out-expo);
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.hover-lift:active {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Glow effect for buttons */
.hover-glow {
    transition: box-shadow var(--duration-normal) var(--ease-out-expo),
                transform var(--duration-fast) var(--ease-out-expo);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}

/* Scale effect */
.hover-scale {
    transition: transform var(--duration-fast) var(--ease-out-back);
}

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

.hover-scale:active {
    transform: scale(0.98);
}

/* =====================================================
   RIPPLE EFFECT
   ===================================================== */

.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::before {
    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: none;
}

.ripple:active::before {
    width: 200%;
    height: 200%;
    transition: width 0.4s ease-out, height 0.4s ease-out;
}

/* =====================================================
   SKELETON LOADERS
   ===================================================== */

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

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(200, 200, 200, 0.2) 25%,
        rgba(200, 200, 200, 0.4) 50%,
        rgba(200, 200, 200, 0.2) 75%
    );
    background-size: 200% 100%;
    animation: skeletonPulse 1.5s ease-in-out infinite;
    border-radius: 8px;
}

.skeleton-card {
    height: 180px;
    border-radius: 16px;
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

/* =====================================================
   PAGE TRANSITIONS
   ===================================================== */

.page-enter {
    animation: pageEnter var(--duration-slow) var(--ease-out-expo) forwards;
}

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

.page-exit {
    animation: pageExit var(--duration-fast) ease-in forwards;
}

@keyframes pageExit {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* =====================================================
   CONFETTI EFFECT (for purchases)
   ===================================================== */

@keyframes confettiFall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    top: 0;
    z-index: 9999;
    pointer-events: none;
    animation: confettiFall 3s linear forwards;
}

/* =====================================================
   SUCCESS/ERROR STATES
   ===================================================== */

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

.animate-success {
    animation: successPop 0.5s var(--ease-out-back) forwards;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    20%, 60% {
        transform: translateX(-8px);
    }
    40%, 80% {
        transform: translateX(8px);
    }
}

.animate-error {
    animation: shake 0.4s ease-in-out;
}

/* =====================================================
   FLOATING PARTICLES (for menu background)
   ===================================================== */

@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.4;
    }
    25% {
        transform: translateY(-20px) translateX(10px) rotate(90deg);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-40px) translateX(-10px) rotate(180deg);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-20px) translateX(15px) rotate(270deg);
        opacity: 0.7;
    }
}

.floating-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    animation: floatParticle 8s ease-in-out infinite;
}

.floating-particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.floating-particle:nth-child(2) { left: 80%; top: 30%; animation-delay: 1s; }
.floating-particle:nth-child(3) { left: 30%; top: 60%; animation-delay: 2s; }
.floating-particle:nth-child(4) { left: 70%; top: 70%; animation-delay: 3s; }
.floating-particle:nth-child(5) { left: 50%; top: 40%; animation-delay: 4s; }

/* =====================================================
   LOADING DOTS
   ===================================================== */

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

.loading-dots {
    display: inline-flex;
    gap: 4px;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 50%;
    animation: loadingDots 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0.32s; }

/* =====================================================
   ICON ANIMATIONS
   ===================================================== */

/* Coin flip animation */
@keyframes coinFlip {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

.animate-coinFlip {
    animation: coinFlip 0.6s ease-in-out;
}

/* Counter increment animation */
@keyframes countUp {
    from {
        transform: translateY(20%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-countUp {
    animation: countUp 0.3s ease-out;
}

/* =====================================================
   RARITY GLOWS
   ===================================================== */

.rarity-common {
    /* No special effect */
}

.rarity-rare {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}

.rarity-epic {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.4);
}

.rarity-legendary {
    box-shadow: 0 0 25px rgba(234, 179, 8, 0.5);
    animation: legendaryPulse 2s ease-in-out infinite;
}

@keyframes legendaryPulse {
    0%, 100% {
        box-shadow: 0 0 25px rgba(234, 179, 8, 0.5);
    }
    50% {
        box-shadow: 0 0 35px rgba(234, 179, 8, 0.7);
    }
}

/* =====================================================
   UTILITY CLASSES
   ===================================================== */

.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-400 { animation-delay: 400ms; }
.animate-delay-500 { animation-delay: 500ms; }

.animate-duration-fast { animation-duration: var(--duration-fast); }
.animate-duration-normal { animation-duration: var(--duration-normal); }
.animate-duration-slow { animation-duration: var(--duration-slow); }

/* Ensures animations only run once on page load */
.animate-once {
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

/* =====================================================
   CHEST ANIMATIONS (Daily Reward)
   ===================================================== */

/* Chest shake when ready */
@keyframes chestShake {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-4px) rotate(-2deg);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(4px) rotate(2deg);
    }
}

/* Chest glow pulse when ready */
@keyframes chestGlowReady {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(255, 200, 50, 0.7))
                drop-shadow(0 0 30px rgba(255, 165, 0, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(255, 200, 50, 1))
                drop-shadow(0 0 50px rgba(255, 165, 0, 0.8));
        transform: scale(1.05);
    }
}

/* Combined ready animation: shake + glow */
.chest-ready {
    animation: chestShake 0.6s ease-in-out infinite,
               chestGlowReady 1.5s ease-in-out infinite;
}

/* Chest claimed state - subtle idle */
.chest-claimed {
    filter: grayscale(0.3) brightness(0.85);
    transform: scale(0.95);
}

/* Chest opening animation */
@keyframes chestOpen {
    0% {
        transform: scale(1) rotate(0deg);
    }
    20% {
        transform: scale(1.1) rotate(-5deg);
    }
    40% {
        transform: scale(1.15) rotate(5deg);
    }
    60% {
        transform: scale(1.2) rotate(0deg);
    }
    80% {
        transform: scale(1.3);
        filter: brightness(2);
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.chest-opening {
    animation: chestOpen 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Explosion burst for chest opening */
@keyframes burstOut {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.burst-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, rgba(255, 165, 0, 0.4) 50%, transparent 70%);
    animation: burstOut 0.6s ease-out forwards;
    pointer-events: none;
}

/* Sparkles flying out */
@keyframes sparklyFly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx, 100px), var(--ty, -100px)) scale(0);
        opacity: 0;
    }
}

.sparkle-fly {
    position: absolute;
    font-size: 24px;
    animation: sparklyFly 1s ease-out forwards;
    pointer-events: none;
}

/* Confetti particle */
@keyframes confettiFly {
    0% {
        transform: translateY(0) rotateZ(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(300px) rotateZ(720deg);
        opacity: 0;
    }
}

.confetti-particle {
    position: fixed;
    width: 10px;
    height: 10px;
    animation: confettiFly 2s ease-out forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Reward reveal animation */
@keyframes rewardReveal {
    0% {
        transform: scale(0) rotateY(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotateY(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotateY(360deg);
        opacity: 1;
    }
}

.reward-item-reveal {
    animation: rewardReveal 0.6s var(--ease-out-back) forwards;
}

/* Modal appear with scale + fade */
@keyframes modalReveal {
    0% {
        transform: scale(0.5) translateY(50px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.modal-reveal {
    animation: modalReveal 0.5s var(--ease-out-back) forwards;
}

/* Coin rain effect */
@keyframes coinRain {
    0% {
        transform: translateY(-50px) rotateY(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotateY(720deg);
        opacity: 0;
    }
}

.coin-rain {
    position: fixed;
    font-size: 28px;
    animation: coinRain 2.5s ease-in forwards;
    pointer-events: none;
    z-index: 9998;
}

/* Trophy bounce for legendary rewards */
@keyframes trophyBounce {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    30% {
        transform: translateY(-20px) scale(1.1);
    }
    50% {
        transform: translateY(0) scale(0.95);
    }
    70% {
        transform: translateY(-10px) scale(1.05);
    }
}

.trophy-bounce {
    animation: trophyBounce 1s ease-in-out;
}

/* Star explosion for epic+ rewards */
@keyframes starExplosion {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

.star-explosion {
    animation: starExplosion 0.8s var(--ease-out-back);
}

/* Floating up effect for reward amount */
@keyframes floatUpFade {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-30px);
        opacity: 0;
    }
}

.float-up-fade {
    animation: floatUpFade 1.5s ease-out forwards;
}

/* =====================================================
   MODAL ANIMATIONS (shared across all pages)
   ===================================================== */

/* Fade In - used by shop/profile modals */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.animate-fadeIn {
    animation: fadeIn var(--duration-normal) ease-out forwards;
}

/* Slide Up - modal card entrance */
@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slideUp {
    animation: slideUp var(--duration-slow) var(--ease-out-back) forwards;
}

/* Slide Down - modal exit */
@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(40px);
        opacity: 0;
    }
}

/* Scale Bounce - item purchase/equip feedback */
@keyframes scaleBounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.15); }
    60%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.animate-scaleBounce {
    animation: scaleBounce 0.4s var(--ease-out-back);
}

/* Check Mark animation */
@keyframes checkMark {
    0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
    50%  { transform: scale(1.3) rotate(0deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.animate-checkMark {
    animation: checkMark 0.5s var(--ease-out-back) forwards;
}

/* =====================================================
   ITEM CARD PREMIUM STYLES
   ===================================================== */

/* Owned item shimmer overlay */
@keyframes ownedShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.item-owned-shimmer {
    position: relative;
    overflow: hidden;
}

.item-owned-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: ownedShimmer 3s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}

/* Active glow for equipped items */
@keyframes equippedGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(76, 175, 80, 0.3); }
    50%      { box-shadow: 0 0 20px rgba(76, 175, 80, 0.6); }
}

.item-equipped {
    border: 2px solid rgba(76, 175, 80, 0.6) !important;
    animation: equippedGlow 2s ease-in-out infinite;
}

/* =====================================================
   NOTIFICATION TOAST (premium)
   ===================================================== */

@keyframes toastSlideUp {
    from {
        transform: translateX(-50%) translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes toastSlideDown {
    from {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    to {
        transform: translateX(-50%) translateY(20px);
        opacity: 0;
    }
}

/* =====================================================
   BUTTON PRESS FEEDBACK
   ===================================================== */

.btn-press-feedback:active {
    transform: scale(0.95) !important;
    transition: transform 0.08s ease-out;
}

/* =====================================================
   LOADING SKELETON IMPROVED
   ===================================================== */

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

.skeleton-card {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 16px;
    position: relative;
    overflow: hidden;
}

.skeleton-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 25%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 75%
    );
    background-size: 200% 100%;
    animation: skeletonWave 1.5s ease-in-out infinite;
}

.skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.08);
    margin-bottom: 8px;
}

.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }
.skeleton-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    margin: 0 auto 12px;
}