/* Storefront homepage rhythm — section identity without hard-coded merchant colors. */

.sf-home-composition {
    --sf-home-stage-gap: clamp(3rem, 7vw, 6.5rem);
    gap: 0;
}

.sf-home-stage {
    position: relative;
    isolation: isolate;
    min-width: 0;
    padding-block: clamp(.75rem, 1.8vw, 1.5rem);
}

.sf-home-stage + .sf-home-stage {
    margin-top: var(--sf-home-stage-gap);
}

/* Alternating connector: the page reads as chapters instead of repeated cards. */
.sf-home-stage + .sf-home-stage::before {
    content: '';
    position: absolute;
    top: -3rem;
    width: clamp(3.5rem, 9vw, 8rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-500), transparent);
    opacity: .45;
    pointer-events: none;
}

.sf-home-stage[data-section-flow="start"]::before { inset-inline-start: clamp(1rem, 6vw, 6rem); }
.sf-home-stage[data-section-flow="end"]::before { inset-inline-end: clamp(1rem, 6vw, 6rem); }

.sf-home-stage--hero { padding-block: 0; }

/* Discovery sections: light, exploratory, asymmetric. */
.sf-home-stage--discovery {
    overflow: hidden;
    padding: clamp(1.1rem, 3vw, 2.6rem);
    border: 1px solid color-mix(in srgb, var(--brand-500) 18%, var(--sf-border));
    border-radius: calc(var(--radius-card) + 1.25rem);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand-100) 55%, transparent), transparent 45%),
        linear-gradient(145deg, color-mix(in srgb, var(--brand-50) 38%, var(--sf-surface)), var(--sf-surface));
    box-shadow: 0 24px 65px -58px color-mix(in srgb, var(--brand-900) 34%, transparent);
}

.sf-home-stage--discovery .sf-section-heading h2 {
    position: relative;
    padding-inline-start: 1rem;
}

.sf-home-stage--discovery .sf-section-heading h2::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: .25em;
    bottom: .2em;
    width: 3px;
    border-radius: 999px;
    background: var(--brand-500);
}

/* Commerce sections: open layout with a confident horizontal rhythm. */
.sf-home-stage--commerce {
    padding: clamp(1.3rem, 3vw, 2.4rem) clamp(.4rem, 1.8vw, 1.4rem);
    border-radius: calc(var(--radius-card) + .5rem);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand-50) 14%, transparent),
        transparent 42%
    );
}

.sf-home-stage--commerce::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset-inline: clamp(1rem, 4vw, 4rem);
    top: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--brand-500), var(--brand-700), transparent);
    opacity: .7;
    pointer-events: none;
}

.sf-home-stage--commerce .sf-section-heading {
    padding-bottom: .85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--brand-500) 16%, var(--sf-border));
}

/* The global brand layer uses !important on normal cards; this semantic hook keeps featured cards visibly special. */
.sf-home-stage--commerce .product-card.product-card--featured {
    border-color: var(--brand-500) !important;
    box-shadow: 0 22px 52px -38px color-mix(in srgb, var(--brand-700) 48%, transparent) !important;
}

.sf-home-stage--commerce .product-card.product-card--featured:hover {
    border-color: var(--brand-600) !important;
    box-shadow: 0 30px 64px -38px color-mix(in srgb, var(--brand-700) 62%, transparent) !important;
}

/* Editorial sections: story-like and deliberately narrower than commerce. */
.sf-home-stage--editorial {
    overflow: hidden;
    padding: clamp(1.4rem, 3.5vw, 3rem);
    border-inline-start: 3px solid var(--brand-500);
    border-radius: var(--radius-card);
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-50) 28%, var(--sf-surface)), var(--sf-surface));
}

.sf-home-stage--editorial::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset-inline-end: clamp(1rem, 5vw, 5rem);
    bottom: -3rem;
    width: 9rem;
    aspect-ratio: 1;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-100) 42%, transparent);
    filter: blur(10px);
    pointer-events: none;
}

.sf-home-stage--editorial .sf-section-heading {
    max-width: 48rem;
}

/* Action/contact sections deliberately change pace again. */
.sf-home-stage--action {
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2.75rem);
    border-radius: calc(var(--radius-card) + .75rem);
    background:
        radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--brand-500) 18%, transparent), transparent 30%),
        radial-gradient(circle at 84% 82%, color-mix(in srgb, var(--brand-100) 48%, transparent), transparent 34%),
        color-mix(in srgb, var(--brand-50) 22%, var(--sf-surface));
}

.sf-home-stage--contact {
    padding: clamp(1.4rem, 3vw, 2.5rem) clamp(.5rem, 2vw, 1.5rem);
    border-block: 1px solid color-mix(in srgb, var(--brand-500) 20%, var(--sf-border));
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-50) 24%, var(--sf-surface)), transparent);
}

.sf-home-stage--offers {
    overflow: hidden;
    padding: clamp(1rem, 2.5vw, 2rem);
    border-radius: calc(var(--radius-card) + .5rem);
    background: color-mix(in srgb, var(--brand-50) 20%, var(--sf-surface));
}

/* Large screens deliberately vary section width and alignment so the composition has cadence. */
@media (min-width: 1024px) {
    .sf-home-stage--editorial[data-section-flow="start"] {
        margin-inline-start: 0;
        margin-inline-end: auto;
    }

    .sf-home-stage--editorial[data-section-flow="end"] {
        margin-inline-start: auto;
        margin-inline-end: 0;
    }

    .sf-home-stage--editorial {
        width: min(88%, 72rem);
    }

    .sf-home-stage--action {
        width: calc(100% - clamp(1rem, 4vw, 4rem));
        margin-inline: auto;
    }
}

/* Section-specific entrances. The existing observer still owns visibility and accessibility. */
html.sf-motion-ready body:not([data-sf-motion="off"]) .sf-home-stage[data-sf-reveal] {
    transition:
        opacity .62s cubic-bezier(.2,.8,.2,1),
        transform .72s cubic-bezier(.16,1,.3,1),
        filter .58s ease,
        clip-path .72s cubic-bezier(.16,1,.3,1);
}

html[dir="rtl"] .sf-home-stage[data-section-flow="start"] { --sf-home-enter-x: 42px; }
html[dir="rtl"] .sf-home-stage[data-section-flow="end"] { --sf-home-enter-x: -42px; }
html[dir="ltr"] .sf-home-stage[data-section-flow="start"] { --sf-home-enter-x: -42px; }
html[dir="ltr"] .sf-home-stage[data-section-flow="end"] { --sf-home-enter-x: 42px; }

html.sf-motion-ready body:not([data-sf-motion="off"]) .sf-home-stage--hero[data-sf-reveal]:not(.is-visible) {
    transform: translate3d(0, 18px, 0) scale(1.012);
    filter: blur(1px);
}

html.sf-motion-ready body:not([data-sf-motion="off"]) .sf-home-stage--discovery[data-sf-reveal]:not(.is-visible) {
    transform: translate3d(var(--sf-home-enter-x, 36px), 10px, 0);
    filter: blur(1px);
}

html.sf-motion-ready body:not([data-sf-motion="off"]) .sf-home-stage--commerce[data-sf-reveal]:not(.is-visible) {
    transform: translate3d(0, 34px, 0) scale(.975);
    filter: blur(.9px);
}

html.sf-motion-ready body:not([data-sf-motion="off"]) .sf-home-stage--editorial[data-sf-reveal]:not(.is-visible) {
    transform: translate3d(var(--sf-home-enter-x, 34px), 0, 0);
    filter: blur(.8px);
}

html.sf-motion-ready body:not([data-sf-motion="off"]) .sf-home-stage--action[data-sf-reveal]:not(.is-visible) {
    transform: translate3d(0, 22px, 0) scale(.96);
    clip-path: inset(8% 2% 8% 2% round calc(var(--radius-card) + 1rem));
    filter: blur(1px);
}

html.sf-motion-ready body:not([data-sf-motion="off"]) .sf-home-stage--contact[data-sf-reveal]:not(.is-visible),
html.sf-motion-ready body:not([data-sf-motion="off"]) .sf-home-stage--offers[data-sf-reveal]:not(.is-visible) {
    transform: translate3d(0, 24px, 0);
    filter: blur(.6px);
}

html.sf-motion-ready body:not([data-sf-motion="off"]) .sf-home-stage[data-sf-reveal].is-visible {
    transform: translate3d(0, 0, 0) scale(1);
    clip-path: inset(0 round 0);
    filter: none;
}

/* Expressive mode uses explicit keyframes so motion remains visible even when a section starts inside the viewport. */
body[data-sf-motion="expressive"] .sf-home-stage--hero[data-sf-reveal].is-visible {
    animation: sf-home-enter-hero .82s cubic-bezier(.16,1,.3,1) both;
}

body[data-sf-motion="expressive"] .sf-home-stage--discovery[data-sf-reveal].is-visible {
    animation: sf-home-enter-discovery .82s cubic-bezier(.16,1,.3,1) both;
}

body[data-sf-motion="expressive"] .sf-home-stage--commerce[data-sf-reveal].is-visible {
    animation: sf-home-enter-commerce .86s cubic-bezier(.16,1,.3,1) both;
}

body[data-sf-motion="expressive"] .sf-home-stage--editorial[data-sf-reveal].is-visible {
    animation: sf-home-enter-editorial .84s cubic-bezier(.16,1,.3,1) both;
}

body[data-sf-motion="expressive"] .sf-home-stage--action[data-sf-reveal].is-visible,
body[data-sf-motion="expressive"] .sf-home-stage--contact[data-sf-reveal].is-visible,
body[data-sf-motion="expressive"] .sf-home-stage--offers[data-sf-reveal].is-visible {
    animation: sf-home-enter-action .8s cubic-bezier(.16,1,.3,1) both;
}

/* Continuous ambient movement is reserved for the explicit expressive setting. */
body[data-sf-motion="expressive"] .sf-home-stage--editorial::after {
    animation: sf-home-breathe 7s ease-in-out infinite alternate;
}

@keyframes sf-home-enter-hero {
    from { opacity: 0; transform: translate3d(0, 28px, 0) scale(1.018); filter: blur(1.5px); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: none; }
}

@keyframes sf-home-enter-discovery {
    from { opacity: 0; transform: translate3d(var(--sf-home-enter-x, 42px), 12px, 0) rotate(.35deg); filter: blur(1.2px); }
    to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); filter: none; }
}

@keyframes sf-home-enter-commerce {
    from { opacity: 0; transform: translate3d(0, 42px, 0) scale(.965); filter: blur(1.2px); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: none; }
}

@keyframes sf-home-enter-editorial {
    from { opacity: 0; transform: translate3d(var(--sf-home-enter-x, 42px), 0, 0); clip-path: inset(0 8% 0 0 round var(--radius-card)); filter: blur(1px); }
    to { opacity: 1; transform: translate3d(0, 0, 0); clip-path: inset(0 round var(--radius-card)); filter: none; }
}

@keyframes sf-home-enter-action {
    from { opacity: 0; transform: translate3d(0, 30px, 0) scale(.95); filter: blur(1px); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: none; }
}

@keyframes sf-home-orbit {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(1rem, 1.25rem, 0) scale(1.08); }
}

@keyframes sf-home-breathe {
    from { transform: scale(.92); opacity: .45; }
    to { transform: scale(1.12); opacity: .8; }
}

body[data-sf-motion="off"] .sf-home-stage,
body[data-sf-motion="off"] .sf-home-stage::after,
body[data-sf-motion="off"] .sf-home-stage::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    .sf-home-stage,
    .sf-home-stage::after,
    .sf-home-stage::before {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
        clip-path: none !important;
    }
}

@media (max-width: 767px) {
    .sf-home-composition { --sf-home-stage-gap: 2.75rem; }
    .sf-home-stage + .sf-home-stage::before { top: -1.5rem; width: 3.25rem; }
    .sf-home-stage--discovery,
    .sf-home-stage--editorial,
    .sf-home-stage--action,
    .sf-home-stage--offers { border-radius: calc(var(--radius-card) + .35rem); }
}