/* =============================================================
   Limark Wellness — animations.css
   Scroll reveals, hover states, page-load entrances
   All respect prefers-reduced-motion
   ============================================================= */

@media (prefers-reduced-motion: no-preference) {

    .animate-on-scroll {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
        will-change: opacity, transform;
    }
    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
    .animate-on-scroll.from-left { transform: translateX(-32px); }
    .animate-on-scroll.from-right { transform: translateX(32px); }
    .animate-on-scroll.from-left.is-visible,
    .animate-on-scroll.from-right.is-visible { transform: translateX(0); }

    .animate-on-scroll.delay-1 { transition-delay: 0.1s; }
    .animate-on-scroll.delay-2 { transition-delay: 0.2s; }
    .animate-on-scroll.delay-3 { transition-delay: 0.3s; }
    .animate-on-scroll.delay-4 { transition-delay: 0.4s; }
    .animate-on-scroll.delay-5 { transition-delay: 0.5s; }

    /* Homepage hero — staggered brand card entrance */
    .hero-split .hero-card--safease {
        animation: slideFromLeft 0.9s var(--ease) both;
    }
    .hero-split .hero-card--limark {
        animation: slideFromRight 0.9s var(--ease) 0.15s both;
    }
    @keyframes slideFromLeft {
        from { opacity: 0; transform: translateX(-32px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes slideFromRight {
        from { opacity: 0; transform: translateX(32px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* Product hero image settle */
    .product-hero__media img {
        animation: imageSettle 0.9s var(--ease) both;
    }
    @keyframes imageSettle {
        from { opacity: 0; transform: scale(1.05); }
        to   { opacity: 1; transform: scale(1); }
    }

    /* Brand card hover (desktop) */
    @media (hover: hover) {
        .hero-split {
            transition: gap var(--t-default);
        }
        .hero-split .hero-card {
            transition: transform var(--t-default), opacity var(--t-default), background-color var(--t-default);
        }
        .hero-split:hover .hero-card { opacity: 0.82; }
        .hero-split .hero-card:hover { opacity: 1; transform: scale(1.005); }
    }

    /* Button pulse on variant select */
    .variant-card {
        transition: border-color var(--t-default), background-color var(--t-default), transform var(--t-default);
    }
    .variant-card.is-selected {
        animation: variantPulse 0.4s var(--ease);
    }
    @keyframes variantPulse {
        0%   { transform: scale(1); }
        50%  { transform: scale(1.02); }
        100% { transform: scale(1); }
    }

    /* Cart icon bounce on add */
    .site-header__cart.is-bumped svg {
        animation: cartBump 0.45s var(--ease);
    }
    @keyframes cartBump {
        0%   { transform: scale(1); }
        40%  { transform: scale(1.25); }
        100% { transform: scale(1); }
    }

    /* Trust badge infinite scroll (optional, desktop only) */
    @media (min-width: 1024px) {
        .trust-strip--loop .trust-strip__track {
            animation: trustScroll 40s linear infinite;
        }
        .trust-strip--loop:hover .trust-strip__track {
            animation-play-state: paused;
        }
        @keyframes trustScroll {
            from { transform: translateX(0); }
            to   { transform: translateX(-50%); }
        }
    }

    /* Cross-fade for product gallery */
    .product-gallery__image {
        transition: opacity 0.4s ease;
    }
}

/* Reduced-motion: collapse everything to instant */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll { opacity: 1; transform: none !important; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}