/* ============================================================
   animations.css — Subtle entrance & scroll-reveal animations
   GPU-only: transform + opacity only. No layout triggers.
   ============================================================ */

/* ── Reduced-motion safety ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .anim-on-scroll,
    .anim-hero-text,
    .anim-hero-image,
    .anim-stat {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .anim-progress-fill {
        transition: none !important;
    }
}

/* ── Scroll-reveal base ──────────────────────────────────── */
.anim-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.anim-on-scroll.anim-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Scroll-reveal variants (via data-anim) ──────────────── */

/* Smaller/faster fade-up */
.anim-on-scroll[data-anim="fade-up-sm"] {
    transform: translateY(12px);
    transition-duration: 0.4s;
}

.anim-on-scroll[data-anim="fade-up-sm"].anim-visible {
    transform: translateY(0);
}

/* Fade-in only (no translate) */
.anim-on-scroll[data-anim="fade-in"] {
    transform: none;
    transition-duration: 0.5s;
}

/* Scale-in */
.anim-on-scroll[data-anim="scale-in"] {
    transform: scale(0.95);
    transition-duration: 0.5s;
}

.anim-on-scroll[data-anim="scale-in"].anim-visible {
    transform: scale(1);
}

/* Slide from left */
.anim-on-scroll[data-anim="slide-left"] {
    transform: translateX(-24px);
    transition-duration: 0.6s;
}

.anim-on-scroll[data-anim="slide-left"].anim-visible {
    transform: translateX(0);
}

/* Slide from right */
.anim-on-scroll[data-anim="slide-right"] {
    transform: translateX(24px);
    transition-duration: 0.6s;
}

.anim-on-scroll[data-anim="slide-right"].anim-visible {
    transform: translateX(0);
}

/* ── Stagger delays (via data-anim-delay) ────────────────── */
.anim-on-scroll[data-anim-delay="1"] { transition-delay: 0.08s; }
.anim-on-scroll[data-anim-delay="2"] { transition-delay: 0.16s; }
.anim-on-scroll[data-anim-delay="3"] { transition-delay: 0.24s; }
.anim-on-scroll[data-anim-delay="4"] { transition-delay: 0.32s; }
.anim-on-scroll[data-anim-delay="5"] { transition-delay: 0.40s; }
.anim-on-scroll[data-anim-delay="6"] { transition-delay: 0.48s; }

/* ── Hero entrance ───────────────────────────────────────── */
@keyframes heroTextEntrance {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroImageEntrance {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.anim-hero-text {
    animation: heroTextEntrance 0.7s ease-out both;
}

.anim-hero-image {
    animation: heroImageEntrance 0.8s ease-out 0.15s both;
}

/* ── Stats entrance ──────────────────────────────────────── */
.anim-stat {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.anim-stat.anim-visible {
    opacity: 1;
    transform: translateY(0);
}

.anim-stat:nth-child(1) { transition-delay: 0s; }
.anim-stat:nth-child(2) { transition-delay: 0.1s; }
.anim-stat:nth-child(3) { transition-delay: 0.2s; }
.anim-stat:nth-child(4) { transition-delay: 0.3s; }

/* ── Progress bar fill ───────────────────────────────────── */
.anim-progress-fill {
    width: 0 !important;
    transition: width 1s ease-out;
}

.anim-progress-fill.anim-visible {
    /* width set via JS from data-width */
}

/* ── Flash message slide-in ──────────────────────────────── */
@keyframes flashSlideIn {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#flash-toast .alert {
    animation: flashSlideIn 0.35s ease-out both;
}

/* ── Album completion celebration ────────────────────────── */
@keyframes celebrationIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.anim-celebration-in {
    animation: celebrationIn 0.5s ease-out both;
}

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

.anim-progress-complete {
    background: linear-gradient(
        90deg,
        #facc15 0%, #f59e0b 25%, #facc15 50%, #f59e0b 75%, #facc15 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .anim-celebration-in {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    .anim-progress-complete {
        animation: none !important;
        background: #facc15;
    }
}

/* ── Card hover lift ─────────────────────────────────────── */
.album-card {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.album-card:hover {
    transform: translateY(-3px);
}

/* ── Notification bell pulse ─────────────────────────────── */
@keyframes bellPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.notification-badge {
    animation: bellPulse 2s ease-in-out infinite;
}