/* ============================================================
   VELOURA HOME — GSAP Scroll Experience
   Visual support only. Motion is controlled by home-scroll.js.
   Search-result selectors are intentionally untouched.
============================================================ */

:root {
    --home-motion-gold: #c3a16a;
    --home-motion-olive: #61603d;
    --home-motion-ink: #312f13;
    --home-motion-ivory: #fffdf9;
    --home-motion-progress: 0;
}

/* Page-wide scroll progress */
.home-scroll-progress {
    position: fixed;
    z-index: 2500;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    background: rgba(255, 253, 249, 0.08);
}

.home-scroll-progress__bar {
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background:
        linear-gradient(
            90deg,
            rgba(195, 161, 106, 0.35),
            #d7b77d 44%,
            #9b7642 100%
        );
    box-shadow:
        0 0 16px rgba(195, 161, 106, 0.32);
}

html[dir="rtl"] .home-scroll-progress__bar {
    transform-origin: right center;
}

/* JS adds this class only after GSAP + ScrollTrigger are ready. */
html.has-gsap-home .hero-section,
html.has-gsap-home .home-birthday-wrap,
html.has-gsap-home .home-search-section,
html.has-gsap-home .smart-home-section,
html.has-gsap-home .home-concern-section,
html.has-gsap-home .product-grid-section {
    transform-style: preserve-3d;
}

/* Continuous section signature line driven by a CSS variable. */
html.has-gsap-home .home-gsap-section {
    --home-section-progress: 0;
    position: relative;
    isolation: isolate;
}

html.has-gsap-home .home-gsap-section::after {
    position: absolute;
    z-index: 2;
    top: 0;
    right: clamp(20px, 7vw, 110px);
    left: clamp(20px, 7vw, 110px);
    height: 1px;
    pointer-events: none;
    content: "";
    opacity: 0.62;
    transform: scaleX(var(--home-section-progress));
    transform-origin: left center;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(195, 161, 106, 0.76),
            rgba(97, 96, 61, 0.34),
            transparent
        );
}

html[dir="rtl"].has-gsap-home .home-gsap-section::after {
    transform-origin: right center;
}

/* Hero gets a slightly richer cinematic depth while GSAP is active. */
html.has-gsap-home .hero-section {
    isolation: isolate;
}

html.has-gsap-home .hero-visual,
html.has-gsap-home .hero-product-shape,
html.has-gsap-home .hero-orbit,
html.has-gsap-home .hero-note {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

html.has-gsap-home .hero-product-shape {
    will-change: transform;
}

html.has-gsap-home .hero-orbit {
    will-change: transform;
}

html.has-gsap-home .hero-note {
    will-change: transform;
}

/* A soft light plane that moves with the hero visual. */
html.has-gsap-home .hero-visual::after {
    position: absolute;
    z-index: -1;
    width: 74%;
    height: 74%;
    pointer-events: none;
    content: "";
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(195, 161, 106, 0.16),
            rgba(195, 161, 106, 0.055) 42%,
            transparent 70%
        );
    filter: blur(2px);
}

/* Search card can move as a single surface; results stay untouched. */
html.has-gsap-home .home-search-card {
    transform-origin: center top;
    backface-visibility: hidden;
}

/* Keep moving surfaces crisp while they are animated. */
html.has-gsap-home .product-grid-heading,
html.has-gsap-home .home-concern-card,
html.has-gsap-home .product-card,
html.has-gsap-home .home-birthday-banner {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Small editorial accent added to section headings. */
html.has-gsap-home .smart-home-section .product-grid-heading > div,
html.has-gsap-home .home-concern-section .product-grid-heading > div,
html.has-gsap-home .product-grid-section .product-grid-heading > div {
    position: relative;
}

html.has-gsap-home .smart-home-section .product-grid-heading > div::before,
html.has-gsap-home .home-concern-section .product-grid-heading > div::before,
html.has-gsap-home .product-grid-section .product-grid-heading > div::before {
    position: absolute;
    top: -14px;
    width: 42px;
    height: 1px;
    content: "";
    opacity: 0.72;
    background:
        linear-gradient(
            90deg,
            var(--home-motion-gold),
            transparent
        );
}

html[dir="ltr"].has-gsap-home .product-grid-heading > div::before {
    left: 0;
}

html[dir="rtl"].has-gsap-home .product-grid-heading > div::before {
    right: 0;
    transform: scaleX(-1);
}

/* The motion system never blocks user interaction. */
html.has-gsap-home .home-search-card,
html.has-gsap-home .home-concern-card,
html.has-gsap-home .product-card {
    pointer-events: auto;
}

/* ============================================================
   Home / Shop by concern — persistent side-by-side layout
   personalization.css intentionally stacks concern cards under 700px.
   On Home only, keep them beside each other and make mobile swipeable.
============================================================ */
.home-concern-section .home-concern-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.home-concern-section .home-concern-card {
    height: 100%;
    min-height: 176px;
}

@media (max-width: 1199px) {
    .home-concern-section .home-concern-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 899px) {
    .home-concern-section .home-concern-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .home-concern-section .home-concern-grid {
        display: grid;
        grid-template-columns: none !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(245px, 82vw);
        gap: 14px;
        margin-inline: -2px;
        padding: 2px 2px 14px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
        scroll-padding-inline: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .home-concern-section .home-concern-grid::-webkit-scrollbar {
        display: none;
    }

    .home-concern-section .home-concern-card {
        min-height: 170px;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }
}

@media (max-width: 420px) {
    .home-concern-section .home-concern-grid {
        grid-auto-columns: minmax(232px, 84vw);
    }
}

@media (max-width: 991px) {
    .home-scroll-progress {
        height: 2px;
    }

    html.has-gsap-home .home-gsap-section::after {
        right: 18px;
        left: 18px;
    }

    html.has-gsap-home .hero-product-shape,
    html.has-gsap-home .hero-orbit,
    html.has-gsap-home .hero-note {
        will-change: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-scroll-progress {
        display: none !important;
    }

    html.has-gsap-home .home-gsap-section::after {
        transform: scaleX(1);
    }

    html.has-gsap-home .hero-product-shape,
    html.has-gsap-home .hero-orbit,
    html.has-gsap-home .hero-note {
        will-change: auto;
    }
}