/* Scroll & motion animations — additive only, no background changes */

@media (prefers-reduced-motion: reduce) {
    .anim-on-scroll,
    .anim-3d-tilt,
    .anim-3d-flip,
    .anim-float,
    .anim-scale-in,
    .anim-slide-left,
    .anim-slide-right,
    .anim-rotate-in,
    .anim-stagger > *,
    .logo-mark,
    .nav-links a,
    .contact-btn,
    .artisan-card,
    .showcase-photo,
    .stat-block,
    .cluster-count,
    .gallery-item,
    .story-image,
    .impact-image-section,
    .hero-media {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* ── Scroll reveal base ── */
    .anim-on-scroll {
        opacity: 0;
        transform: translateY(48px);
        transition:
            opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
    }

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

    .anim-slide-left {
        transform: translateX(-60px);
    }

    .anim-slide-left.is-visible {
        transform: translateX(0);
    }

    .anim-slide-right {
        transform: translateX(60px);
    }

    .anim-slide-right.is-visible {
        transform: translateX(0);
    }

    .anim-scale-in {
        transform: scale(0.88);
    }

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

    .anim-rotate-in {
        transform: perspective(800px) rotateX(18deg) translateY(40px);
        transform-origin: center bottom;
    }

    .anim-rotate-in.is-visible {
        transform: perspective(800px) rotateX(0deg) translateY(0);
    }

    /* ── Stagger children ── */
    .anim-stagger > * {
        opacity: 0;
        transform: translateY(32px);
        transition:
            opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .anim-stagger.is-visible > * {
        opacity: 1;
        transform: translateY(0);
    }

    .anim-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
    .anim-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
    .anim-stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
    .anim-stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
    .anim-stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
    .anim-stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; }
    .anim-stagger.is-visible > *:nth-child(7) { transition-delay: 0.47s; }

    /* ── 3D tilt on hover ── */
    .anim-3d-tilt {
        perspective: 900px;
        transform-style: preserve-3d;
    }

    .anim-3d-tilt > img,
    .anim-3d-tilt > video,
    .anim-3d-tilt-inner {
        transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
        transform-style: preserve-3d;
        backface-visibility: hidden;
    }

    .anim-3d-tilt:hover > img,
    .anim-3d-tilt:hover > video,
    .anim-3d-tilt:hover .anim-3d-tilt-inner {
        transform: rotateY(-6deg) rotateX(4deg) scale(1.02);
    }

    /* ── 3D flip card ── */
    .anim-3d-flip {
        perspective: 1000px;
    }

    .anim-3d-flip-inner {
        transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
        transform-style: preserve-3d;
    }

    .anim-3d-flip:hover .anim-3d-flip-inner {
        transform: rotateY(10deg) rotateX(-5deg) translateZ(12px);
    }

    /* ── Gentle float loop ── */
    .anim-float {
        animation: animFloat 5s ease-in-out infinite;
    }

    @keyframes animFloat {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-8px) rotate(0.5deg); }
    }

    /* ── Pulse ring on stat circles ── */
    .stats-wrapper .circle {
        animation: animPulse 3s ease-in-out infinite;
    }

    .stats-wrapper .circle.featured {
        animation: animPulseFeatured 2.5s ease-in-out infinite;
    }

    @keyframes animPulse {
        0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(214, 34, 34, 0); }
        50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(214, 34, 34, 0.08); }
    }

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

    /* ── Nav link underline sweep ── */
    .nav-links a:not(.contact-btn):not(.dropbtn) {
        position: relative;
        transition: color 0.3s ease, transform 0.3s ease;
    }

    .nav-links a:not(.contact-btn):not(.dropbtn)::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 100%;
        height: 1px;
        background: var(--accent, #d62222);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .nav-links a:not(.contact-btn):not(.dropbtn):hover {
        transform: translateY(-1px);
    }

    .nav-links a:not(.contact-btn):not(.dropbtn):hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    .contact-btn {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-btn:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 6px 20px rgba(23, 23, 23, 0.12);
    }

    /* ── Logo entrance ── */
    .logo-mark {
        animation: animLogoIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
        transition: transform 0.35s ease, opacity 0.35s ease;
    }

    .logo-mark:hover {
        transform: scale(1.04);
    }

    @keyframes animLogoIn {
        from {
            opacity: 0;
            transform: translateY(-12px) scale(0.92);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* ── Header slide down ── */
    .site-header {
        animation: animHeaderIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes animHeaderIn {
        from {
            opacity: 0;
            transform: translateY(-100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ── Hero media 3D reveal ── */
    .hero-media {
        animation: animHeroReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
    }

    @keyframes animHeroReveal {
        from {
            opacity: 0;
            transform: perspective(1200px) rotateY(-12deg) scale(0.94);
        }
        to {
            opacity: 1;
            transform: perspective(1200px) rotateY(0deg) scale(1);
        }
    }

    /* ── Stats number pop ── */
    .cluster-count .number,
    .stat-block strong {
        display: inline-block;
        animation: animNumberPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
    }

    @keyframes animNumberPop {
        from {
            opacity: 0;
            transform: scale(0.5) translateY(20px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    /* ── Artisan marquee cards 3D lift ── */
    .artisan-card {
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        transform-style: preserve-3d;
    }

    .artisan-card:hover {
        transform: translateY(-10px) rotateX(4deg) rotateY(-3deg) scale(1.03);
    }

    .artisan-card:hover .artisan-photo img {
        filter: grayscale(0.4);
        transition: filter 0.4s ease;
    }

    /* ── Showcase collage depth ── */
    .showcase-photo {
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
        transform-style: preserve-3d;
    }

    .showcase-photo:hover {
        transform: translateZ(20px) rotateY(-4deg) scale(1.04);
        box-shadow: 0 20px 40px rgba(23, 23, 23, 0.15);
        z-index: 2;
    }

    .showcase-collage {
        perspective: 1200px;
    }

    /* ── Impact page 3D layers ── */
    .impact-image-section,
    .impact-bottom-image,
    .impact-map-image {
        transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
        transform-style: preserve-3d;
    }

    .impact-image-section:hover,
    .impact-bottom-image:hover,
    .impact-map-image:hover {
        transform: perspective(900px) rotateX(3deg) rotateY(-4deg) scale(1.02);
    }

    .story-image {
        transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
        transform-style: preserve-3d;
    }

    .story-image:hover {
        transform: rotateY(8deg) translateZ(16px) scale(1.03);
    }

    .artisan-story-collage {
        perspective: 1000px;
    }

    /* ── Cluster page gallery 3D ── */
    .gallery-item {
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
        transform-style: preserve-3d;
    }

    .gallery-item:hover {
        transform: perspective(800px) rotateY(-5deg) translateY(-6px) scale(1.02);
        box-shadow: 0 16px 32px rgba(23, 23, 23, 0.12);
    }

    .artisans-grid .artisan-card {
        overflow: hidden;
    }

    .artisans-grid .artisan-card img {
        transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
    }

    .artisans-grid .artisan-card:hover img {
        transform: scale(1.08) rotate(1deg);
        filter: grayscale(0.5);
    }

    /* ── Quote shimmer text ── */
    #quote p {
        animation: animQuoteIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes animQuoteIn {
        from {
            opacity: 0;
            transform: perspective(600px) rotateX(20deg);
        }
        to {
            opacity: 1;
            transform: perspective(600px) rotateX(0deg);
        }
    }

    /* ── Sidebar nav cluster page ── */
    .sidebar nav a {
        transition: transform 0.3s ease, color 0.3s ease, padding-left 0.3s ease;
    }

    .sidebar nav a:hover,
    .sidebar nav a.active {
        transform: translateX(6px);
    }

    /* ── Dropdown 3D drop ── */
    .dropdown-content {
        transform-origin: top center;
        animation: animDropdownReady 0.01s paused;
    }

    .dropdown:hover .dropdown-content {
        animation: animDropdownIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    @keyframes animDropdownIn {
        from {
            opacity: 0;
            transform: perspective(600px) rotateX(-12deg) translateY(-8px);
        }
        to {
            opacity: 1;
            transform: perspective(600px) rotateX(0deg) translateY(0);
        }
    }

    /* ── Contact band items stagger ── */
    .contact-list > div {
        transition: transform 0.4s ease;
    }

    .contact-list > div:hover {
        transform: translateX(8px);
    }
}