/*
 * ============================================================
 * SHARED ANIMATIONS - Vijgjes en Olijfjes
 * ============================================================
 *
 * This file contains reusable animation classes for BOTH
 * the public website AND admin panel.
 *
 * Include BEFORE page-specific CSS files.
 * Location: public/css/animations.css
 *
 * Usage:
 *   Add class "animate-on-scroll" to trigger animation on scroll.
 *   Combine with direction classes:
 *     .fade-up, .fade-down, .fade-left, .fade-right
 *     .zoom-in, .zoom-out
 *     .slide-up, .slide-down
 *
 *   Add delay with: .anim-delay-1 ... .anim-delay-6
 *   Add duration with: .anim-slow, .anim-fast
 *
 *   Elements auto-animate when scrolled into view via JS.
 * ============================================================
 */

/* ========== BASE ANIMATION STATE ========== */
.animate-on-scroll {
    opacity: 0;
    transition:
        opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: none !important;
}

/* ========== FADE DIRECTIONS ========== */
.fade-up {
    transform: translateY(40px);
}

.fade-down {
    transform: translateY(-40px);
}

.fade-left {
    transform: translateX(40px);
}

.fade-right {
    transform: translateX(-40px);
}

/* ========== ZOOM ========== */
.zoom-in {
    transform: scale(0.85);
}

.zoom-out {
    transform: scale(1.15);
}

/* ========== SLIDE ========== */
.slide-up {
    transform: translateY(60px);
}

.slide-down {
    transform: translateY(-60px);
}

/* ========== DELAYS ========== */
.anim-delay-1 {
    transition-delay: 0.1s;
}
.anim-delay-2 {
    transition-delay: 0.2s;
}
.anim-delay-3 {
    transition-delay: 0.3s;
}
.anim-delay-4 {
    transition-delay: 0.4s;
}
.anim-delay-5 {
    transition-delay: 0.5s;
}
.anim-delay-6 {
    transition-delay: 0.6s;
}

/* ========== DURATIONS ========== */
.anim-slow {
    transition-duration: 1s;
}

.anim-fast {
    transition-duration: 0.4s;
}

/* ========== KEYFRAME ANIMATIONS ========== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

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

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

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

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

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

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

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

/* GPU-only: animate transform (scaleX) instead of width — required by
   .notification-progress which sets transform-origin so the bar shrinks
   from full to empty over the toast duration. */
@keyframes progressBar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ========== AUTO-APPLY ANIMATIONS ========== */
/* These are applied to elements that should always animate on load */
.anim-fade-in {
    animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.anim-scale-in {
    animation: scaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.anim-bounce-in {
    animation: bounceIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ========== CARD HOVER ANIMATIONS ========== */
.hover-lift {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

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

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(107, 58, 93, 0.2);
}

/* ========== STAGGERED CHILDREN ========== */
.stagger-children > *:nth-child(1) {
    transition-delay: 0.05s;
}
.stagger-children > *:nth-child(2) {
    transition-delay: 0.1s;
}
.stagger-children > *:nth-child(3) {
    transition-delay: 0.15s;
}
.stagger-children > *:nth-child(4) {
    transition-delay: 0.2s;
}
.stagger-children > *:nth-child(5) {
    transition-delay: 0.25s;
}
.stagger-children > *:nth-child(6) {
    transition-delay: 0.3s;
}
.stagger-children > *:nth-child(7) {
    transition-delay: 0.35s;
}
.stagger-children > *:nth-child(8) {
    transition-delay: 0.4s;
}

/* ========== LOADING PULSE ========== */
.loading-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ========== REDUCED MOTION ==========
 * Honour the OS-level preference: collapse all motion to instant state changes.
 * Per skill accessibility rule: ALWAYS respect prefers-reduced-motion.
 * Broad selectors so hover lifts, infinite shimmers, page transitions, etc.
 * are all suppressed — not just opt-in scroll-reveal classes. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Make scroll-reveal elements visible immediately (no transform offset). */
    .animate-on-scroll,
    .anim-fade-in,
    .anim-scale-in,
    .anim-bounce-in {
        opacity: 1 !important;
        transform: none !important;
    }
}