/**
 * Animation System for Astra Child Theme
 * 
 * @package Astra_Child
 * @version 5.4.0
 * 
 * Animations are controlled via:
 * 1. Customizer: Global animation settings
 * 2. Page Meta Box: Individual page animation settings
 */

/* ============================================
   ANIMATION ENABLE/DISABLE CLASSES
   ============================================ */

/* When animations are disabled globally or per-page */
.animations-disabled *,
.animations-disabled *::before,
.animations-disabled *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Reduced motion preference support */
@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;
    }
}

/* ============================================
   FADE ANIMATIONS
   ============================================ */

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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

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

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

/* ============================================
   SCALE ANIMATIONS
   ============================================ */

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

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

/* ============================================
   SLIDE ANIMATIONS
   ============================================ */

@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInDown {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

/* ============================================
   ROTATE ANIMATIONS
   ============================================ */

@keyframes rotateIn {
    from {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    to {
        transform-origin: center;
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

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

/* ============================================
   BOUNCE ANIMATIONS
   ============================================ */

@keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* ============================================
   PULSE ANIMATIONS
   ============================================ */

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

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

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
    }
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

/* ============================================
   FLIP ANIMATIONS
   ============================================ */

@keyframes flipInX {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    to {
        transform: perspective(400px);
    }
}

/* ============================================
   SPECIAL EFFECTS
   ============================================ */

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

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

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

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

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

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Duration classes */
.anim-duration-100 { animation-duration: 0.1s !important; }
.anim-duration-200 { animation-duration: 0.2s !important; }
.anim-duration-300 { animation-duration: 0.3s !important; }
.anim-duration-400 { animation-duration: 0.4s !important; }
.anim-duration-500 { animation-duration: 0.5s !important; }
.anim-duration-600 { animation-duration: 0.6s !important; }
.anim-duration-800 { animation-duration: 0.8s !important; }
.anim-duration-1000 { animation-duration: 1s !important; }
.anim-duration-1500 { animation-duration: 1.5s !important; }

/* Delay classes */
.anim-delay-100 { animation-delay: 0.1s !important; }
.anim-delay-200 { animation-delay: 0.2s !important; }
.anim-delay-300 { animation-delay: 0.3s !important; }
.anim-delay-400 { animation-delay: 0.4s !important; }
.anim-delay-500 { animation-delay: 0.5s !important; }
.anim-delay-600 { animation-delay: 0.6s !important; }
.anim-delay-800 { animation-delay: 0.8s !important; }
.anim-delay-1000 { animation-delay: 1s !important; }

/* Stagger children animation delays */
.anim-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.anim-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.anim-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.anim-stagger > *:nth-child(4) { animation-delay: 0.4s; }
.anim-stagger > *:nth-child(5) { animation-delay: 0.5s; }
.anim-stagger > *:nth-child(6) { animation-delay: 0.6s; }
.anim-stagger > *:nth-child(7) { animation-delay: 0.7s; }
.anim-stagger > *:nth-child(8) { animation-delay: 0.8s; }
.anim-stagger > *:nth-child(9) { animation-delay: 0.9s; }
.anim-stagger > *:nth-child(10) { animation-delay: 1s; }

/* ============================================
   SCROLL ANIMATION CLASSES
   ============================================ */

.anim-on-scroll {
    opacity: 0;
    will-change: opacity, transform;
}

.anim-on-scroll.is-visible {
    opacity: 1;
}

/* Fade Up (default) */
.anim-on-scroll.fade-up {
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-on-scroll.fade-up.is-visible {
    transform: translateY(0);
}

/* Fade Down */
.anim-on-scroll.fade-down {
    transform: translateY(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-on-scroll.fade-down.is-visible {
    transform: translateY(0);
}

/* Fade Left */
.anim-on-scroll.fade-left {
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-on-scroll.fade-left.is-visible {
    transform: translateX(0);
}

/* Fade Right */
.anim-on-scroll.fade-right {
    transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-on-scroll.fade-right.is-visible {
    transform: translateX(0);
}

/* Scale In */
.anim-on-scroll.scale-in {
    transform: scale(0.9);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-on-scroll.scale-in.is-visible {
    transform: scale(1);
}

/* Rotate In */
.anim-on-scroll.rotate-in {
    transform: rotate(-10deg) scale(0.9);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-on-scroll.rotate-in.is-visible {
    transform: rotate(0) scale(1);
}

/* ============================================
   COMPONENT-SPECIFIC ANIMATIONS
   ============================================ */

/* Modal animations */
.modal-fade-in {
    animation: fadeIn 0.3s ease;
}

.modal-scale-in {
    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Toast animations */
.toast-slide-in {
    animation: slideInRight 0.3s ease forwards;
}

.toast-slide-out {
    animation: slideOutRight 0.3s ease forwards;
}

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

/* Card hover effects */
.card-hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-hover-scale {
    transition: transform 0.3s ease;
}

.card-hover-scale:hover {
    transform: scale(1.02);
}

/* Button animations */
.btn-hover-pulse:hover {
    animation: pulse-scale 0.5s ease;
}

.btn-hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Link underline animation */
.link-underline-anim {
    position: relative;
    text-decoration: none;
}

.link-underline-anim::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s ease;
}

.link-underline-anim:hover::after {
    width: 100%;
}

/* Image zoom on hover */
.img-zoom {
    overflow: hidden;
}

.img-zoom img {
    transition: transform 0.5s ease;
}

.img-zoom:hover img {
    transform: scale(1.1);
}

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

/* Accordion icon rotation */
.accordion-icon {
    transition: transform 0.3s ease;
}

[open] .accordion-icon,
.is-open .accordion-icon {
    transform: rotate(180deg);
}

/* Hamburger menu animation */
.hamburger-line {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.is-open .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.is-open .hamburger-line:nth-child(2) {
    opacity: 0;
}

.is-open .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Sticky header animation */
.header-slide-down {
    animation: slideInDown 0.3s ease;
}

.header-slide-up {
    animation: slideInUp 0.3s ease;
}

/* Popular badge pulse */
.badge-pulse {
    animation: pulse-badge 2s infinite;
}

/* Online status pulse */
.status-pulse {
    animation: pulse-green 2s infinite;
}

/* Spinner */
.spinner {
    animation: spin 1s linear infinite;
}

/* ============================================
   PAGE TRANSITION ANIMATIONS
   ============================================ */

.page-transition-fade {
    animation: fadeIn 0.5s ease;
}

.page-transition-slide {
    animation: fadeInUp 0.5s ease;
}

.page-transition-scale {
    animation: scaleIn 0.5s ease;
}

/* ============================================
   HERO SECTION ANIMATIONS
   ============================================ */

.hero-content-anim > * {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.hero-content-anim > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content-anim > *:nth-child(2) { animation-delay: 0.2s; }
.hero-content-anim > *:nth-child(3) { animation-delay: 0.3s; }
.hero-content-anim > *:nth-child(4) { animation-delay: 0.4s; }
.hero-content-anim > *:nth-child(5) { animation-delay: 0.5s; }

/* ============================================
   SECTION REVEAL ANIMATIONS
   ============================================ */

.section-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.section-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   GRID ITEM ANIMATIONS
   ============================================ */

.grid-anim-container {
    --stagger-delay: 0.1s;
}

.grid-anim-container > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.grid-anim-container.is-visible > *:nth-child(1) { transition-delay: calc(var(--stagger-delay) * 1); opacity: 1; transform: translateY(0); }
.grid-anim-container.is-visible > *:nth-child(2) { transition-delay: calc(var(--stagger-delay) * 2); opacity: 1; transform: translateY(0); }
.grid-anim-container.is-visible > *:nth-child(3) { transition-delay: calc(var(--stagger-delay) * 3); opacity: 1; transform: translateY(0); }
.grid-anim-container.is-visible > *:nth-child(4) { transition-delay: calc(var(--stagger-delay) * 4); opacity: 1; transform: translateY(0); }
.grid-anim-container.is-visible > *:nth-child(5) { transition-delay: calc(var(--stagger-delay) * 5); opacity: 1; transform: translateY(0); }
.grid-anim-container.is-visible > *:nth-child(6) { transition-delay: calc(var(--stagger-delay) * 6); opacity: 1; transform: translateY(0); }
.grid-anim-container.is-visible > *:nth-child(7) { transition-delay: calc(var(--stagger-delay) * 7); opacity: 1; transform: translateY(0); }
.grid-anim-container.is-visible > *:nth-child(8) { transition-delay: calc(var(--stagger-delay) * 8); opacity: 1; transform: translateY(0); }
.grid-anim-container.is-visible > *:nth-child(9) { transition-delay: calc(var(--stagger-delay) * 9); opacity: 1; transform: translateY(0); }
.grid-anim-container.is-visible > *:nth-child(10) { transition-delay: calc(var(--stagger-delay) * 10); opacity: 1; transform: translateY(0); }
.grid-anim-container.is-visible > *:nth-child(11) { transition-delay: calc(var(--stagger-delay) * 11); opacity: 1; transform: translateY(0); }
.grid-anim-container.is-visible > *:nth-child(12) { transition-delay: calc(var(--stagger-delay) * 12); opacity: 1; transform: translateY(0); }

/* ============================================
   FOCUS ANIMATIONS (Accessibility)
   ============================================ */

.focus-ring-anim:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.5);
    transition: box-shadow 0.2s ease;
}

/* ============================================
   PRINT STYLES - Disable animations
   ============================================ */

@media print {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
    
    .anim-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }
}