/* ==========================================================================
   animations.css — Scroll Reveal, Hover Effects & Reduced Motion
   Herba Sparsh Child Theme
   Author: Pratik Patil
   ========================================================================== */

/* ==========================================================================
   1. SCROLL REVEAL — INTERSECTION OBSERVER (JS adds .is-visible)
   ========================================================================== */

.scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
    will-change: opacity, transform;
}

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

/* Staggered delays for siblings (applied via JS data-delay or CSS nth-child) */
.scroll-reveal-stagger > .scroll-reveal:nth-child(1) { transition-delay:   0ms; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(2) { transition-delay: 100ms; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(3) { transition-delay: 200ms; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(4) { transition-delay: 300ms; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(5) { transition-delay: 400ms; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(6) { transition-delay: 500ms; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(7) { transition-delay: 600ms; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(8) { transition-delay: 700ms; }

/* Alternate reveal directions */
.scroll-reveal--left {
    transform: translateX(-24px);
}

.scroll-reveal--right {
    transform: translateX(24px);
}

.scroll-reveal--left.is-visible,
.scroll-reveal--right.is-visible {
    transform: translateX(0);
}

/* Scale-in variant for badges / icons */
.scroll-reveal--scale {
    transform: scale(0.9);
}

.scroll-reveal--scale.is-visible {
    transform: scale(1);
}

/* ==========================================================================
   2. PRODUCT CARD HOVER — IMAGE ZOOM
   ========================================================================== */

/* Image zoom is handled in woocommerce.css via:
   - overflow: hidden on the card
   - transform: scale(1.03) on hover on the image
   This file only provides the base transition timing override if needed. */

/* ==========================================================================
   3. STICKY NAV — SHADOW ON SCROLL (JS adds .is-scrolled)
   ========================================================================== */

.site-header {
    transition: box-shadow 300ms ease;
}

.site-header.is-scrolled {
    box-shadow: var(--shadow-xl);
}

/* ==========================================================================
   4. SMOOTH PAGE TRANSITIONS FOR INTERNAL LINKS
   ========================================================================== */

.hst-page-transition {
    animation: hst-fade-in 300ms ease-out;
}

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

/* ==========================================================================
   5. BUTTON RIPPLE EFFECT (OPTIONAL — JS-DRIVEN)
   ========================================================================== */

.btn-primary,
.woocommerce a.button,
.woocommerce button.button {
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   6. LOADING SKELETON PLACEHOLDER
   ========================================================================== */

.hst-skeleton {
    background: linear-gradient(
        90deg,
        var(--color-muted) 25%,
        var(--color-border) 37%,
        var(--color-muted) 63%
    );
    background-size: 200% 100%;
    animation: hst-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

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

/* ==========================================================================
   7. REDUCED MOTION — ACCESSIBILITY SAFETY NET
   ========================================================================== */

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

    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .hst-skeleton {
        animation: none;
    }
}