/* ════════════════════════════════════════════════════════
   QURAN ACADEMY – ANIMATIONS
   Keyframes, transitions, micro-interactions
════════════════════════════════════════════════════════ */

/* ─── Keyframe Definitions ───────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

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

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

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100%); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-100%); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInBottom {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes scaleInSpring {
    from  { opacity: 0; transform: scale(0.7); }
    60%   { transform: scale(1.05); }
    80%   { transform: scale(0.98); }
    to    { opacity: 1; transform: scale(1); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

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

@keyframes toastIn {
    from { opacity: 0; transform: translateX(100%) scale(0.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); max-height: 100px; margin-bottom: 8px; }
    to   { opacity: 0; transform: translateX(100%); max-height: 0; margin-bottom: 0; }
}

@keyframes progressFill {
    from { width: 0; }
}

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

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14%       { transform: scale(1.1); }
    28%       { transform: scale(1); }
    42%       { transform: scale(1.08); }
    70%       { transform: scale(1); }
}

@keyframes goldGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(201,162,39,0.3); }
    50%       { box-shadow: 0 0 20px rgba(201,162,39,0.6); }
}

@keyframes starTwinkle {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    25%       { opacity: 0.7; transform: scale(0.9) rotate(5deg); }
    75%       { opacity: 0.8; transform: scale(1.05) rotate(-3deg); }
}

@keyframes waveform {
    0%, 100% { height: 4px; }
    50%       { height: 16px; }
}

@keyframes floatUp {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.8); }
}

/* ─── Page Transition Classes ─────────────────────── */
.page-enter {
    animation: slideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.page-enter-fade {
    animation: fadeIn 0.3s ease both;
}

.page-exit {
    animation: fadeOut 0.2s ease both;
}

/* ─── Element Animations ──────────────────────────── */
.animate-fade-in       { animation: fadeIn var(--transition-normal) ease both; }
.animate-slide-up      { animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; }
.animate-scale-in      { animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.animate-scale-spring  { animation: scaleInSpring 0.5s ease both; }
.animate-bounce        { animation: bounce 1s ease-in-out infinite; }
.animate-pulse         { animation: pulse 2s ease-in-out infinite; }
.animate-spin          { animation: spin 1s linear infinite; }
.animate-heartbeat     { animation: heartbeat 1.5s ease-in-out; }
.animate-gold-glow     { animation: goldGlow 2s ease-in-out infinite; }

/* Staggered children animations */
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 60ms; }
.stagger-children > *:nth-child(3) { animation-delay: 120ms; }
.stagger-children > *:nth-child(4) { animation-delay: 180ms; }
.stagger-children > *:nth-child(5) { animation-delay: 240ms; }
.stagger-children > *:nth-child(6) { animation-delay: 300ms; }
.stagger-children > *:nth-child(7) { animation-delay: 360ms; }
.stagger-children > *:nth-child(8) { animation-delay: 420ms; }

/* ─── Hover Micro-interactions ────────────────────── */
.hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hover-scale {
    transition: transform var(--transition-spring);
}

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

.hover-glow:hover {
    box-shadow: var(--shadow-primary);
}

/* ─── Loading States ──────────────────────────────── */
.loading-dots {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    justify-content: center;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    animation: pulse 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Spinner */
.spinner {
    width: 24px;
    height: 24px;
    border: 2.5px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 40px; height: 40px; border-width: 3px; }

/* ─── Audio Waveform Animation ────────────────────── */
.waveform {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 24px;
}

.waveform-bar {
    width: 3px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    animation: waveform 1.2s ease-in-out infinite;
}

.waveform-bar:nth-child(2) { animation-delay: 0.1s; }
.waveform-bar:nth-child(3) { animation-delay: 0.2s; }
.waveform-bar:nth-child(4) { animation-delay: 0.15s; }
.waveform-bar:nth-child(5) { animation-delay: 0.25s; }
.waveform-bar:nth-child(6) { animation-delay: 0.05s; }
.waveform-bar:nth-child(7) { animation-delay: 0.18s; }

/* ─── Progress Ring Animation ─────────────────────── */
.ring-fill {
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Confetti Particle ───────────────────────────── */
.confetti {
    position: fixed;
    width: 8px;
    height: 8px;
    pointer-events: none;
    z-index: var(--z-toast);
    animation: floatUp 1.5s ease-out forwards;
    border-radius: 2px;
}

/* ─── Islamic Pattern Reveal ──────────────────────── */
.pattern-reveal {
    opacity: 0;
    animation: fadeIn 0.8s ease 0.3s forwards;
}

/* ─── Card Entrance ───────────────────────────────── */
.card-enter {
    opacity: 0;
    transform: translateY(20px);
    animation: slideUp 0.4s ease forwards;
}

/* ─── Attention States ────────────────────────────── */
.shake {
    animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes shake {
    10%, 90%  { transform: translate3d(-1px, 0, 0); }
    20%, 80%  { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
    40%, 60%  { transform: translate3d(3px, 0, 0); }
}

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

    .loading-bar-fill {
        animation: none;
        width: 100%;
    }
}