/* ===================================================
   ANIMATIONS — Spring physics, iOS-style transitions
   =================================================== */

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

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

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

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

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

@keyframes blurIn {
    from { opacity: 0; filter: blur(8px); transform: scale(1.04); }
    to   { opacity: 1; filter: blur(0);   transform: scale(1); }
}

/* ================================================
   CARD ANIMATIONS
   ================================================ */
@keyframes cardPop {
    0%   { opacity: 0; transform: translateY(16px) scale(0.95); }
    70%  { transform: translateY(-3px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ================================================
   LOADER ANIMATIONS
   ================================================ */
@keyframes pulseFade {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 1; }
}

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

@keyframes dotPulse {
    0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
    40%           { opacity: 1;   transform: scale(1.2); }
}

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

/* ================================================
   TERMINAL
   ================================================ */
@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: var(--accent-color);
    animation: blinkCursor 1s step-end infinite;
    vertical-align: text-bottom;
    border-radius: 2px;
}

/* ================================================
   UTILITY CLASSES
   ================================================ */
.animate-fade-in {
    animation: fadeIn 0.4s var(--spring-smooth) both;
}

.animate-scale-in {
    animation: scaleIn 0.4s var(--spring-bounce) both;
}

.animate-card-pop {
    animation: cardPop 0.5s var(--spring-bounce) both;
}

.animate-blur-in {
    animation: blurIn 0.35s var(--spring-smooth) both;
}

.loading-pulse {
    animation: pulseFade 1.5s infinite ease-in-out;
}

/* ================================================
   STAGGER DELAYS — for grid children
   ================================================ */
.grid-layout > *:nth-child(1)  { animation-delay: 0.04s; }
.grid-layout > *:nth-child(2)  { animation-delay: 0.08s; }
.grid-layout > *:nth-child(3)  { animation-delay: 0.12s; }
.grid-layout > *:nth-child(4)  { animation-delay: 0.16s; }
.grid-layout > *:nth-child(5)  { animation-delay: 0.20s; }
.grid-layout > *:nth-child(6)  { animation-delay: 0.24s; }
.grid-layout > *:nth-child(7)  { animation-delay: 0.28s; }
.grid-layout > *:nth-child(8)  { animation-delay: 0.32s; }
.grid-layout > *:nth-child(9)  { animation-delay: 0.36s; }
.grid-layout > *:nth-child(10) { animation-delay: 0.40s; }

.stats-row > *:nth-child(1)    { animation-delay: 0.06s; }
.stats-row > *:nth-child(2)    { animation-delay: 0.12s; }
.stats-row > *:nth-child(3)    { animation-delay: 0.18s; }
.stats-row > *:nth-child(4)    { animation-delay: 0.24s; }
.stats-row > *:nth-child(5)    { animation-delay: 0.30s; }

/* ================================================
   HOVER MICRO-INTERACTIONS
   ================================================ */
.hover-lift {
    transition: transform var(--transition-spring), box-shadow var(--transition-smooth);
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

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

/* ================================================
   GLOW EFFECTS
   ================================================ */
.glow-accent {
    box-shadow: 0 0 20px var(--accent-dim), var(--shadow-md);
}

/* ================================================
   REDUCED MOTION OVERRIDES
   ================================================ */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in,
    .animate-scale-in,
    .animate-card-pop,
    .animate-blur-in,
    .grid-layout > *,
    .stats-row > * {
        animation: none;
        opacity: 1;
        transform: none;
    }
}