/* ============================================
   THÁNHCA.NET - Animations & Skeleton v1
   Micro-animations, skeleton loading, transitions
   ============================================ */

/* ============================================================
   SKELETON LOADING SHIMMER
   ============================================================ */
@keyframes skeletonShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(107,70,150,.06) 25%,
        rgba(107,70,150,.12) 50%,
        rgba(107,70,150,.06) 75%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.8s ease-in-out infinite;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.skeleton-text {
    height: 14px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 65%; }
.skeleton-text.long { width: 90%; }

.skeleton-title {
    height: 22px;
    width: 70%;
    border-radius: 6px;
    margin-bottom: 12px;
}

.skeleton-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-card {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(107,70,150,.06);
    background: rgba(255,255,255,.7);
}

.skeleton-song-row {
    display: grid;
    grid-template-columns: 1fr 120px 150px 88px;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(107,70,150,.04);
    align-items: center;
}

.skeleton-stat-card {
    height: 90px;
    border-radius: 12px;
}

/* Skeleton grids */
.skeleton-grid {
    display: grid;
    gap: 12px;
}
.skeleton-grid.cols-4 {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.skeleton-grid.cols-2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ============================================================
   PAGE TRANSITIONS
   ============================================================ */
@keyframes pageSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.page.active {
    animation: pageSlideIn .35s cubic-bezier(.22,.68,.36,1) forwards;
}

.page.exiting {
    animation: pageSlideOut .2s ease forwards;
    pointer-events: none;
}

/* ============================================================
   STAGGERED ENTRY ANIMATIONS
   ============================================================ */
@keyframes staggerFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes staggerFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.stagger-item {
    animation: staggerFadeUp .4s cubic-bezier(.22,.68,.36,1) backwards;
}

/* Delay classes for stagger effect */
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 50ms; }
.stagger-item:nth-child(3) { animation-delay: 100ms; }
.stagger-item:nth-child(4) { animation-delay: 150ms; }
.stagger-item:nth-child(5) { animation-delay: 200ms; }
.stagger-item:nth-child(6) { animation-delay: 250ms; }
.stagger-item:nth-child(7) { animation-delay: 300ms; }
.stagger-item:nth-child(8) { animation-delay: 350ms; }
.stagger-item:nth-child(9) { animation-delay: 400ms; }
.stagger-item:nth-child(10) { animation-delay: 450ms; }

/* ============================================================
   CARD HOVER MICRO-ANIMATIONS
   ============================================================ */
.song-row {
    transition: all .22s cubic-bezier(.22,.68,.36,1);
}
.song-row:hover {
    background: rgba(107,70,150,.05);
    transform: translateX(4px);
    box-shadow: -4px 0 0 0 var(--purple);
}

.stat-card {
    transition: all .3s cubic-bezier(.22,.68,.36,1);
}
.stat-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 28px rgba(61,32,102,.15);
}

.hero-card {
    transition: all .3s cubic-bezier(.22,.68,.36,1);
}
.hero-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(61,32,102,.14);
}

/* ============================================================
   PULSE & GLOW EFFECTS
   ============================================================ */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(107,70,150,.3); }
    50% { box-shadow: 0 0 0 8px rgba(107,70,150,0); }
}

@keyframes goldPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,150,60,.35); }
    50% { box-shadow: 0 0 0 10px rgba(200,150,60,0); }
}

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

.pulse-gold {
    animation: goldPulse 2.5s ease-in-out infinite;
}

/* Live dot animation */
@keyframes liveDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(.75); }
}

.live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
    animation: liveDot 1.5s ease-in-out infinite;
}

/* ============================================================
   FLOATING PARTICLES (for dashboard background)
   ============================================================ */
@keyframes floatParticle {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: .08; }
    25% { transform: translateY(-20px) rotate(90deg); opacity: .15; }
    50% { transform: translateY(-40px) rotate(180deg); opacity: .08; }
    75% { transform: translateY(-20px) rotate(270deg); opacity: .12; }
}

.floating-crosses {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.floating-cross {
    position: absolute;
    font-size: 1.2rem;
    color: var(--purple);
    animation: floatParticle 12s ease-in-out infinite;
}
.floating-cross:nth-child(1) { left: 8%; top: 20%; animation-delay: 0s; animation-duration: 14s; }
.floating-cross:nth-child(2) { left: 25%; top: 60%; animation-delay: 2s; animation-duration: 11s; }
.floating-cross:nth-child(3) { left: 55%; top: 30%; animation-delay: 4s; animation-duration: 16s; }
.floating-cross:nth-child(4) { left: 78%; top: 70%; animation-delay: 1s; animation-duration: 13s; }
.floating-cross:nth-child(5) { left: 92%; top: 15%; animation-delay: 3s; animation-duration: 15s; }

/* ============================================================
   BUTTON RIPPLE EFFECT
   ============================================================ */
.action-btn {
    position: relative;
    overflow: hidden;
}

.action-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,.3) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
}

.action-btn:active::after {
    opacity: 1;
    transition: opacity 0s;
}

/* ============================================================
   TOAST ANIMATIONS (ENHANCED)
   ============================================================ */
@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(40px) scale(.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(40px) scale(.9);
    }
}

.toast {
    animation: toastSlideIn .35s cubic-bezier(.22,.68,.36,1) forwards;
}

.toast.hiding {
    animation: toastSlideOut .25s ease forwards;
}

/* ============================================================
   MODAL ANIMATIONS (ENHANCED)
   ============================================================ */
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-overlay.active {
    animation: modalFadeIn .2s ease forwards;
}

.modal-overlay.active .modal {
    animation: modalSlideUp .35s cubic-bezier(.22,.68,.36,1) forwards;
}

/* ============================================================
   LOADING SCREEN ENHANCEMENTS
   ============================================================ */
@keyframes loadingPulse {
    0%, 100% { transform: scale(1); opacity: .9; }
    50% { transform: scale(1.05); opacity: 1; }
}

@keyframes loadingCross {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

.app-loading-logo {
    animation: loadingPulse 2s ease-in-out infinite;
}

/* ============================================================
   COUNTER ANIMATION
   ============================================================ */
@keyframes countUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.count-animate {
    animation: countUp .4s ease backwards;
}

/* ============================================================
   SCROLL REVEAL (used by JS IntersectionObserver)
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all .5s cubic-bezier(.22,.68,.36,1);
}

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

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .skeleton { animation: none; }
    .floating-crosses { display: none; }
}

/* Lite effects mode (set by JS for low-end devices) */
html.lite-effects .floating-crosses { display: none; }
html.lite-effects .skeleton { animation-duration: 3s; }
html.lite-effects .stagger-item { animation: staggerFadeIn .2s ease backwards; }