/**
 * SupremeDrops — motion layer (scroll reveals, micro-interactions, page enter).
 * Paired with assets/js/animations.js
 */

:root {
    --sd-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --sd-ease-spring: cubic-bezier(0.34, 1.28, 0.64, 1);
    --sd-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --sd-duration: 0.72s;
    --sd-duration-fast: 0.42s;
    --sd-stagger: 65ms;
    --sd-distance: 28px;
}

/* ===== Page enter ===== */
.sd-page-enter {
    animation: sdPageEnter 0.55s var(--sd-ease-out) both;
}

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

/* ===== Scroll reveal base ===== */
.sd-animate {
    --sd-delay: 0ms;
    opacity: 0;
    will-change: opacity, transform, filter;
    transition:
        opacity var(--sd-duration) var(--sd-ease-out) var(--sd-delay),
        transform var(--sd-duration) var(--sd-ease-out) var(--sd-delay),
        filter var(--sd-duration) var(--sd-ease-out) var(--sd-delay);
}

.sd-animate.sd-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

.sd-animate--fade-up {
    transform: translate3d(0, var(--sd-distance), 0);
}

.sd-animate--fade-down {
    transform: translate3d(0, calc(var(--sd-distance) * -1), 0);
}

.sd-animate--fade-left {
    transform: translate3d(var(--sd-distance), 0, 0);
}

.sd-animate--fade-right {
    transform: translate3d(calc(var(--sd-distance) * -1), 0, 0);
}

.sd-animate--scale-up {
    transform: translate3d(0, 16px, 0) scale(0.94);
}

.sd-animate--blur-in {
    transform: translate3d(0, 12px, 0);
    filter: blur(6px);
}

/* Section headers — accent line grows in when visible */
.sd-animate.section-header.sd-visible .section-title,
.sd-animate.store-partners-head.sd-visible .section-title {
    position: relative;
}

.sd-animate.section-header.sd-visible .section-title::after,
.sd-animate.store-partners-head.sd-visible .section-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--caramel), var(--caramel-light));
    animation: sdLineGrow 0.55s var(--sd-ease-out) 0.15s both;
}

@keyframes sdLineGrow {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* ===== Buttons — press + shimmer ===== */
.sd-motion-ready .btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.sd-motion-ready .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 42%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 58%
    );
    transform: translateX(-120%);
    transition: transform 0.55s var(--sd-ease-out);
    pointer-events: none;
}

.sd-motion-ready .btn:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.08s;
}

.sd-motion-ready .btn-primary:active {
    box-shadow: 0 4px 14px rgba(176, 130, 71, 0.24);
}

/* ===== Product cards ===== */
.sd-motion-ready .product-card {
    transition:
        transform 0.35s var(--sd-ease-out),
        box-shadow 0.35s var(--sd-ease-out),
        border-color 0.35s ease;
}

/* Product card CTAs — no hover scale (see store.css .product-card .btn-cart) */

/* ===== Line / type cards ===== */
.sd-motion-ready .line-card,
.sd-motion-ready .store-product-type-card {
    transition:
        transform 0.38s var(--sd-ease-out),
        box-shadow 0.38s var(--sd-ease-out),
        border-color 0.3s ease,
        filter 0.3s ease;
}

.sd-motion-ready .store-product-type-card-media {
    transition: transform 0.6s var(--sd-ease-out);
}

/* ===== Brands & pillars ===== */
.sd-motion-ready .store-brands-pillars-logo {
    transition: transform 0.35s var(--sd-ease-out), filter 0.35s ease;
}

.sd-motion-ready .store-pillar {
    transition:
        transform 0.4s var(--sd-ease-out),
        box-shadow 0.4s var(--sd-ease-out);
}

/* ===== Innovation panel ===== */
.sd-motion-ready .store-our-innovation-visual {
    border: none;
    box-shadow: none;
}

.sd-motion-ready .store-our-innovation-visual img {
    display: block;
    transform-origin: center bottom;
    transition: transform 0.7s var(--sd-ease-spring);
}

/* ===== Blog cards ===== */
.sd-motion-ready .post-card {
    transition:
        transform 0.35s var(--sd-ease-out),
        box-shadow 0.35s var(--sd-ease-out);
}

.sd-motion-ready .post-card-img img {
    transition: transform 0.55s var(--sd-ease-out);
}

/* ===== Nav links — underline slide ===== */
.sd-motion-ready .nav-link:not(.nav-link--dropdown-anchor) {
    position: relative;
}

.sd-motion-ready .navbar.scrolled .nav-link:not(.nav-link--dropdown-anchor)::before {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    background: var(--caramel);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.28s var(--sd-ease-out);
}

.sd-motion-ready .navbar.scrolled .nav-link:not(.nav-link--dropdown-anchor):focus-visible::before {
    transform: scaleX(1);
}

/* ===== Icon buttons ===== */
.sd-motion-ready .icon-btn {
    transition:
        transform 0.25s var(--sd-ease-spring),
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.25s ease;
}

.sd-motion-ready .icon-btn:active {
    transform: translateY(0) scale(0.94);
}

/* ===== Footer links ===== */
.sd-motion-ready .footer-col a {
    display: inline-block;
    transition: transform 0.22s var(--sd-ease-out), color 0.2s ease;
}

/* ===== Newsletter ===== */
.sd-motion-ready .newsletter-inner,
.sd-motion-ready .store-member-cta-panel {
    transition: transform 0.45s var(--sd-ease-out), box-shadow 0.45s ease;
}

/* ===== Section labels ===== */
.sd-motion-ready .section-label-strip {
    transition: transform 0.3s var(--sd-ease-out);
}

.sd-visible .section-label-strip {
    animation: sdLabelPop 0.5s var(--sd-ease-spring) both;
}

@keyframes sdLabelPop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ===== Product page ===== */
.sd-motion-ready .store-product-gallery-main img {
    transition: transform 0.6s var(--sd-ease-out);
}

/* ===== Cart lines ===== */
.sd-motion-ready .store-cart-line {
    animation: sdCartLineIn 0.45s var(--sd-ease-out) both;
    animation-delay: calc(var(--sd-delay, 0ms));
}

@keyframes sdCartLineIn {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/*
 * Hover-only polish — skip on touch / coarse pointers so the first tap
 * activates the control instead of "sticking" a hover state.
 */
@media (hover: hover) and (pointer: fine) {
    .sd-motion-ready .btn:hover::after {
        transform: translateX(120%);
    }

    .sd-motion-ready .product-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
        border-color: color-mix(in srgb, var(--caramel) 28%, var(--border-subtle));
    }

    .sd-motion-ready .store-product-type-card:hover {
        transform: translateY(-6px) scale(1.01);
        filter: brightness(1.03);
    }

    .sd-motion-ready .store-product-type-card:hover .store-product-type-card-media {
        transform: scale(1.06);
    }

    .sd-motion-ready .store-brands-pillars-logo-link:hover .store-brands-pillars-logo {
        transform: scale(1.06);
        filter: drop-shadow(0 8px 16px rgba(26, 15, 10, 0.12));
    }

    .sd-motion-ready .store-pillar:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

    .sd-motion-ready .store-our-innovation-visual-wrap:hover .store-our-innovation-visual img {
        transform: translateY(-14px) scale(1.05);
    }

    .sd-motion-ready .store-our-innovation-visual-wrap:hover .store-our-innovation-visual {
        transform: none;
        border: none;
        box-shadow: none;
    }

    .sd-motion-ready .post-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
    }

    .sd-motion-ready .post-card:hover .post-card-img img {
        transform: scale(1.05);
    }

    .sd-motion-ready .navbar.scrolled .nav-link:not(.nav-link--dropdown-anchor):hover::before {
        transform: scaleX(1);
    }

    .sd-motion-ready .icon-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    .sd-motion-ready .footer-col a:hover {
        transform: translateX(3px);
    }

    .sd-motion-ready .newsletter-inner:hover,
    .sd-motion-ready .store-member-cta-panel:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    .sd-motion-ready .store-product-gallery-main:hover img {
        transform: scale(1.03);
    }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .sd-animate,
    .sd-page-enter,
    .sd-mobile-nav-item,
    .store-cart-line {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .sd-motion-ready .btn::after {
        display: none;
    }
}