/* =====================================================
 * Raj Collection Sequel — motion-living.css
 *
 * Companion to motion-living.js. Provides the visual surface
 * for the "alive and breathing" layer:
 *   - Hero word-by-word reveal keyframes
 *   - Hero parallax baseline (smooth transitions when JS sets transforms)
 *   - Gold dust mote shape + glow
 *   - Magnetic CTA transition curve
 *   - Scroll progress thread (gold hairline under header)
 *   - Eyebrow gold sweep keyframes
 *   - Ambient motes drift keyframes
 *   - Focus drift underline
 *   - Link underline sweep
 *   - Page load choreography
 *
 * Every effect is wrapped in @media (prefers-reduced-motion: no-preference).
 * ===================================================== */

/* =====================================================
 * 1. HERO PARALLAX BASELINE
 * The JS sets a 3D transform on the img; we ensure it has the right
 * starting state and a smooth transform-origin / will-change.
 * ===================================================== */
.rcs-hero--living .rcs-hero__media img {
    will-change: transform;
    transform-origin: 50% 55%;
    transition: opacity var(--rcs-dur-5) var(--rcs-ease-out);
}
.rcs-hero--living .rcs-hero__scrim {
    will-change: opacity;
    transition: opacity 120ms linear;
}

/* =====================================================
 * 2. HERO TITLE WORD-BY-WORD REVEAL
 * Each .rcs-word starts translated + transparent.
 * When parent gets .rcs-words-in, words pour in with staggered delay
 * driven by the --rcs-word-i custom property.
 * ===================================================== */
@media (prefers-reduced-motion: no-preference) {
    .rcs-hero__title[data-rcs-split="done"] .rcs-word {
        display: inline-block;
        opacity: 0;
        transform: translate3d(0, 0.6em, 0);
        filter: blur(6px);
        transition:
            opacity 720ms var(--rcs-ease-out),
            transform 820ms var(--rcs-ease-out),
            filter 720ms var(--rcs-ease-out);
        transition-delay: calc(var(--rcs-word-i, 0) * 90ms + 120ms);
    }
    .rcs-hero__title.rcs-words-in .rcs-word {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* Reduced motion: just render the title with no animation */
@media (prefers-reduced-motion: reduce) {
    .rcs-hero__title[data-rcs-split="done"] .rcs-word {
        display: inline;
    }
}

/* =====================================================
 * 3. GOLD DUST CURSOR LAYER
 * 10 motes follow the cursor with progressive lag.
 * Each one is positioned with translate3d() in JS.
 * No pointer events. Behind modal layers.
 * ===================================================== */
.rcs-dust-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    transition: opacity 300ms var(--rcs-ease-out);
    mix-blend-mode: screen;
}
.rcs-dust {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 169, 97, 0.95), rgba(201, 169, 97, 0.25) 50%, transparent 70%);
    box-shadow: 0 0 12px rgba(201, 169, 97, 0.55), 0 0 28px rgba(201, 169, 97, 0.18);
    will-change: transform;
    opacity: calc(0.95 - (var(--rcs-dust-i, 0) * 0.08));
    transform: translate3d(-100px, -100px, 0);
}
/* Slightly smaller motes deeper in the trail */
.rcs-dust:nth-child(n+5) { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.rcs-dust:nth-child(n+8) { width: 4px; height: 4px; margin: -2px 0 0 -2px; }

/* Disable entirely on touch / coarse pointer / small screens */
@media (hover: none), (pointer: coarse), (max-width: 1023px), (prefers-reduced-motion: reduce) {
    .rcs-dust-layer { display: none !important; }
}

/* =====================================================
 * 4. MAGNETIC CTAs
 * JS sets translate3d() on pointermove. We just smooth the return.
 * ===================================================== */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .rcs-btn--lg,
    .rcs-hero__cta .rcs-btn,
    [data-rcs-magnetic] {
        transition:
            transform 320ms var(--rcs-ease-out),
            background var(--rcs-dur-3) var(--rcs-ease-out),
            color var(--rcs-dur-3) var(--rcs-ease-out),
            box-shadow var(--rcs-dur-3) var(--rcs-ease-out);
    }
}

/* =====================================================
 * 5. SCROLL THREAD — gold hairline under header
 * Fixed bar, width set by --rcs-scroll-p (0..1)
 * ===================================================== */
.rcs-scroll-thread {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    z-index: 9999;
    pointer-events: none;
    background: transparent;
}
.rcs-scroll-thread::after {
    content: '';
    display: block;
    height: 100%;
    width: calc(var(--rcs-scroll-p, 0) * 100%);
    background: linear-gradient(90deg,
        rgba(107, 26, 46, 0.85) 0%,
        var(--rcs-accent) 60%,
        rgba(201, 169, 97, 0.45) 100%);
    box-shadow: 0 0 8px rgba(201, 169, 97, 0.45);
    transition: width 120ms var(--rcs-ease-out);
}
@media (prefers-reduced-motion: reduce) {
    .rcs-scroll-thread { display: none; }
}

/* =====================================================
 * 6. EYEBROW SHIMMER ON REVEAL
 * One-shot gold sweep across the eyebrow when it enters the viewport.
 * ===================================================== */
.rcs-eyebrow,
.rcs-section__eyebrow {
    position: relative;
    overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
    .rcs-eyebrow--shimmer::after {
        content: '';
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(201, 169, 97, 0.45) 50%,
            transparent 100%);
        animation: rcs-eyebrow-sweep 1400ms cubic-bezier(0.22, 1, 0.36, 1) 200ms 1 forwards;
        pointer-events: none;
    }
}
@keyframes rcs-eyebrow-sweep {
    0%   { left: -120%; }
    100% { left: 120%; }
}

/* =====================================================
 * 7. AMBIENT MOTES — between-sections drift
 * 3 motes; each drifts diagonally with very slow infinite loop.
 * ===================================================== */
.rcs-ambient-motes {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.rcs-ambient-mote {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 169, 97, 0.85), transparent 70%);
    opacity: 0.55;
    animation: rcs-mote-drift 28s linear infinite;
    animation-delay: calc(var(--rcs-mote-i, 0) * -9s);
    top: 80vh;
    left: calc(var(--rcs-mote-i, 0) * 35vw + 5vw);
}
@keyframes rcs-mote-drift {
    0%   { transform: translate3d(0, 0, 0)         scale(0.6); opacity: 0; }
    8%   { opacity: 0.55; }
    50%  { transform: translate3d(-12vw, -50vh, 0) scale(1.0); opacity: 0.65; }
    92%  { opacity: 0.4; }
    100% { transform: translate3d(-24vw, -110vh, 0) scale(0.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce), (max-width: 1023px) {
    .rcs-ambient-motes { display: none; }
}

/* =====================================================
 * 8. INPUT FOCUS DRIFT — animated underline on focus
 * Replaces the default focus ring with a branded gold sweep.
 * ===================================================== */
input.rcs-focus-drift,
textarea.rcs-focus-drift,
select.rcs-focus-drift {
    background-image: linear-gradient(90deg, var(--rcs-accent), var(--rcs-primary));
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 240ms var(--rcs-ease-out);
}
/* For text inputs that already have a bottom border, blend it */
input.rcs-focus-drift:focus,
textarea.rcs-focus-drift:focus,
select.rcs-focus-drift:focus {
    outline: none;
    box-shadow: var(--rcs-shadow-focus);
}

/* =====================================================
 * 9. LINK UNDERLINE SWEEP — footer + sidebar links
 * Underline animates from 0% to 100% width on hover.
 * ===================================================== */
.rcs-link-sweep {
    position: relative;
    display: inline-block;
    transition: color var(--rcs-dur-3) var(--rcs-ease-out);
}
.rcs-link-sweep::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--rcs-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 360ms var(--rcs-ease-out);
}
@media (hover: hover) {
    .rcs-link-sweep:hover { color: var(--rcs-primary); }
    .rcs-link-sweep:hover::after { transform: scaleX(1); }
}
/* Already-active items in nav menus stay underlined */
.rcs-link-sweep[aria-current="page"]::after,
.is-active > .rcs-link-sweep::after {
    transform: scaleX(1);
}

/* =====================================================
 * 10. PAGE LOAD CHOREOGRAPHY
 * Was hiding body until JS booted — removed because if JS failed
 * the entire page stayed invisible. Use section-level data-reveal instead.
 * ===================================================== */

/* =====================================================
 * 11. BUTTON SHIMMER — every .rcs-btn--primary / --lg
 * On hover, a soft gold sweep travels across the button face.
 * ===================================================== */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .rcs-btn--lg,
    .rcs-btn--primary,
    .rcs-btn:not(.rcs-btn--text):not(.rcs-btn--ghost) {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }
    .rcs-btn--lg::before,
    .rcs-btn--primary::before,
    .rcs-btn:not(.rcs-btn--text):not(.rcs-btn--ghost)::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg,
            transparent 30%,
            rgba(255, 255, 255, 0.18) 50%,
            transparent 70%);
        transform: translateX(-120%);
        transition: transform 720ms var(--rcs-ease-out);
        pointer-events: none;
        z-index: 0;
    }
    .rcs-btn--lg:hover::before,
    .rcs-btn--primary:hover::before,
    .rcs-btn:not(.rcs-btn--text):not(.rcs-btn--ghost):hover::before {
        transform: translateX(120%);
    }
    /* Preserve content stacking */
    .rcs-btn > * { position: relative; z-index: 1; }
}

/* =====================================================
 * 12. SECTION ENTER — gentle pour for every main > section
 * Layers on top of existing data-reveal observer logic.
 * ===================================================== */
@media (prefers-reduced-motion: no-preference) {
    main > section,
    main > .rcs-section {
        transition:
            opacity 720ms var(--rcs-ease-out),
            transform 820ms var(--rcs-ease-out);
    }
}

/* =====================================================
 * 13. CART JUST-ADDED PULSE — already exists in motion-v2.js,
 * we add a complementary ring around the bag icon.
 * ===================================================== */
.rcs-cart-just-added .rcs-header__cart,
.rcs-cart-just-added [data-rcs-cart-icon] {
    position: relative;
}
.rcs-cart-just-added .rcs-header__cart::after,
.rcs-cart-just-added [data-rcs-cart-icon]::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--rcs-accent);
    animation: rcs-cart-ping 700ms var(--rcs-ease-out) 1;
    pointer-events: none;
}
@keyframes rcs-cart-ping {
    0%   { opacity: 0.85; transform: scale(0.85); }
    100% { opacity: 0; transform: scale(1.45); }
}

/* =====================================================
 * 14. SECTION DIVIDERS — gold-thread separators between
 * homepage sections, fading in with eyebrow shimmer.
 * ===================================================== */
.rcs-section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 auto;
    max-width: 240px;
    padding: 24px 0;
    color: var(--rcs-accent);
    opacity: 0.55;
}
.rcs-section-divider::before,
.rcs-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
}

/* =====================================================
 * 15. SCROLL-CUE on hero — fade out after first scroll
 * ===================================================== */
.rcs-hero__scroll-cue {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 36px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 12px;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 320ms var(--rcs-ease-out);
}
.rcs-hero__scroll-cue::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 3px;
    height: 8px;
    margin-left: -1.5px;
    border-radius: 1.5px;
    background: rgba(255, 255, 255, 0.85);
    animation: rcs-cue-bounce 1800ms ease-in-out infinite;
}
@keyframes rcs-cue-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.85; }
    50%      { transform: translateY(10px); opacity: 0.25; }
}
html[data-scrolled="true"] .rcs-hero__scroll-cue { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .rcs-hero__scroll-cue::after { animation: none; }
}