/* ---- Motion tokens --------------------------------------------------------
   One duration/easing vocabulary for every interaction. ease-out quint-style
   curve: fast start, long settle — the "calm" register. */
:root {
    --rasvo-dur-fast: 180ms;
    --rasvo-dur-base: 320ms;
    --rasvo-dur-slow: 560ms;
    --rasvo-ease-out: cubic-bezier(.22, 1, .36, 1);
    /* --rasvo-ease-inout removed 2026-08-01: 0 var() reads repo-wide. */
}

/* ---- Header scrolled state (brief: "navigation blur transitions") ---------
   html.rasvo-scrolled is set by our own 3-line scroll listener (deterministic,
   no dependency on Elementor sticky internals). d2a2be0 = the sticky container
   inside live Header 105. color-mix inherits the Kit background token, so a
   future Kit recolour keeps the effect correct; rgba line is the fallback. */
/* .elementor-element doubles the class count to out-rank Elementor's own
   4-class background rule on this container. */
html.rasvo-scrolled .elementor-105 .elementor-element.elementor-element-d2a2be0 {
    background-color: rgba(245, 239, 226, .9);
    background-color: color-mix(in srgb, var(--e-global-color-background) 88%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
    box-shadow: 0 1px 0 rgba(13, 27, 42, .05), 0 10px 30px rgba(13, 27, 42, .07);
}

/* ---- Add-to-cart loading state (functional, so outside the motion gate) ---
   PDP add-to-cart is a full-page POST: the class holds until navigation. */
.single_add_to_cart_button.rasvo-loading,
.rasvo-sticky-atc__btn.rasvo-loading {
    pointer-events: none;
    position: relative;
    opacity: .85;
    color: transparent !important;
}
.rasvo-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 254, 250, .35);
    border-top-color: #FFFEFA;
}
@media (prefers-reduced-motion: reduce) {
    /* Keep the label, dim the button — feedback without spin. */
    .rasvo-loading { color: inherit !important; opacity: .6; cursor: progress; }
    .rasvo-loading::after { content: none; }
}

@media (prefers-reduced-motion: no-preference) {

.rasvo-loading::after { animation: rasvo-spin .7s linear infinite; }
@keyframes rasvo-spin { to { rotate: 1turn; } }

html { scroll-behavior: smooth; }

html.rasvo-scrolled .elementor-105 .elementor-element-d2a2be0,
.elementor-105 .elementor-element-d2a2be0 {
    transition: background-color var(--rasvo-dur-base) var(--rasvo-ease-out),
                box-shadow var(--rasvo-dur-base) var(--rasvo-ease-out);
}

/* ---- Scroll reveals (classes applied by JS; below-fold only, one-shot) ----
   Opacity/transform only — compositor work, no layout, no CLS. JS strips both
   classes after the transition so later hover transforms are unaffected. */
.rasvo-reveal-pending { opacity: 0; transform: translateY(16px); }
.rasvo-reveal-in {
    opacity: 1;
    transform: none;
    transition: opacity var(--rasvo-dur-slow) var(--rasvo-ease-out),
                transform var(--rasvo-dur-slow) var(--rasvo-ease-out);
}

/* ---- Hero settle ----------------------------------------------------------
   transform-only (composes with the MOCKUP-ERA `scale` property; opacity never
   drops, so LCP is measured normally). First section of a page only. */
[data-elementor-type="wp-page"] > .e-con.e-parent:first-of-type .elementor-widget-image img {
    animation: rasvo-settle 1s var(--rasvo-ease-out) both;
}
@keyframes rasvo-settle { from { transform: scale(1.02); } }

/* ---- Interaction layer: buttons / links / swatches ------------------------
   One shared transition vocabulary; press = scale down, the CRED-finish tap. */
a,
button,
.elementor-button,
.variable-item {
    transition: color var(--rasvo-dur-fast) ease,
                background-color var(--rasvo-dur-fast) ease,
                border-color var(--rasvo-dur-fast) ease,
                box-shadow var(--rasvo-dur-fast) ease,
                opacity var(--rasvo-dur-fast) ease,
                transform var(--rasvo-dur-fast) var(--rasvo-ease-out);
}
.elementor-button:active,
button.button:active,
.single_add_to_cart_button:active,
.checkout-button:active,
.rasvo-sticky-atc__btn:active,
.variable-item:active { transform: scale(.97); }

/* ---- Product cards (Loop 268): lift + media zoom, desktop pointers only ---
   transform on the item composes with the MOCKUP-ERA scale on the img; shadow
   sits on the media box (the sand frame), not the whole item. */
@media (hover: hover) and (pointer: fine) {
    .elementor-268.e-loop-item {
        transition: transform var(--rasvo-dur-base) var(--rasvo-ease-out);
    }
    .elementor-268.e-loop-item:hover { transform: translateY(-4px); }
    .elementor-268 .rasvo-card__media {
        transition: box-shadow var(--rasvo-dur-base) var(--rasvo-ease-out);
    }
    .elementor-268.e-loop-item:hover .rasvo-card__media {
        box-shadow: 0 16px 40px rgba(13, 27, 42, .12);
    }
    .elementor-268 .rasvo-card__media img {
        transition: transform var(--rasvo-dur-slow) var(--rasvo-ease-out);
    }
    .elementor-268.e-loop-item:hover .rasvo-card__media img { transform: scale(1.045); }
    /* Never zoom the Woo placeholder icon (products awaiting photography). */
    .elementor-268.e-loop-item:hover .rasvo-card__media img[src*="woocommerce-placeholder"] {
        transform: none;
    }
}

/* ---- Sticky mobile ATC: animated entrance ---------------------------------
   Upgrades experience-polish's display:none toggle to a slide. Same class
   contract (.is-visible), so its JS is untouched. 28px overshoot keeps the
   top shadow from peeking while hidden; visibility delay keeps it focusable
   only when shown. Desktop stays display:none !important from the base rule. */
@media (max-width: 767px) {
    .rasvo-sticky-atc {
        display: flex;
        visibility: hidden;
        transform: translateY(calc(100% + 28px));
        transition: transform var(--rasvo-dur-base) var(--rasvo-ease-out),
                    visibility 0s linear var(--rasvo-dur-base);
    }
    .rasvo-sticky-atc.is-visible {
        visibility: visible;
        transform: none;
        transition: transform var(--rasvo-dur-base) var(--rasvo-ease-out),
                    visibility 0s;
    }
}

/* ---- Woo notice entrance (branded add-to-cart feedback card) -------------- */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
    animation: rasvo-notice-in var(--rasvo-dur-base) var(--rasvo-ease-out) both;
}
@keyframes rasvo-notice-in { from { opacity: 0; transform: translateY(-10px); } }

} /* end prefers-reduced-motion: no-preference */