/**
 * Prysmedge Theme — Animations
 *
 * Standalone animation definitions for the WordPress theme.
 * Design token values are inherited from CSS custom properties
 * defined in the main stylesheet. This file only declares
 * @keyframes, utility animation classes, and the reduced-motion
 * override. Do not duplicate layout or colour rules here.
 */

/* =========================================================
   @keyframes
   ========================================================= */

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

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

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

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

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

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

@keyframes barGrow {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

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

/* =========================================================
   Scroll-triggered utility classes
   JS adds .visible when element enters the viewport.
   ========================================================= */

/* Fade up */
.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: none;
}

/* Slide in from the left */
.slide-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide in from the right */
.slide-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================================
   One-shot animation utilities (applied directly)
   ========================================================= */

.animate-fade-in {
    animation: fadeInSlide 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

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

.animate-badge-in {
    animation: badge-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

/* =========================================================
   Stagger children
   Parent gets .stagger-parent; children each get .stagger-child.
   JS adds .visible to each child with an increasing delay.
   ========================================================= */

.stagger-child {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-child.visible {
    opacity: 1;
    transform: none;
}

/* =========================================================
   Bar / progress-indicator animation
   ========================================================= */

.bar-grow {
    animation: barGrow 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    width: 0;
}

/* =========================================================
   Delay helpers  (combine with any animation class)
   ========================================================= */

.delay-100 { transition-delay: 0.1s; animation-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; animation-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; animation-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; animation-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; animation-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; animation-delay: 0.6s; }
.delay-700 { transition-delay: 0.7s; animation-delay: 0.7s; }
.delay-800 { transition-delay: 0.8s; animation-delay: 0.8s; }

/* =========================================================
   Reduced-motion override
   Must remain the final rule in this file.
   ========================================================= */

@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;
    }

    /* Ensure hidden elements still become visible even without animation */
    .fade-up,
    .slide-in-left,
    .slide-in-right,
    .stagger-child,
    .animate-fade-in,
    .animate-badge-in {
        opacity: 1;
        transform: none;
    }
}