/* ============================================================================
   RARA · motion.css — the "moving parts" foundation.
   Doctrine: animate ONLY transform/opacity; motion must communicate (hierarchy,
   feedback, state) not decorate; honor prefers-reduced-motion; skeletons not
   spinners; marquee at most once per page. Reveal behavior is driven by
   rara-motion.js (IntersectionObserver → .is-revealed).
   ============================================================================ */

:root{
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-soft:cubic-bezier(0.32,0.72,0,1);
  --dur-fast:200ms; --dur-mid:400ms; --dur-slow:700ms;
  /* Scroll-entry duration — BRAND_BRIEF fade-up spec: 16px rise over 800ms on
     --ease-out, 90ms stagger (stagger is per-element via data-reveal-delay). */
  --dur-reveal:800ms;
}

/* ---------- scroll reveal ----------
   JS adds .is-revealed at ~30% visibility, then disconnects the observer.
   Default: fade + short rise. Communicates "new content entered view". */
[data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);
  will-change:opacity,transform;
}
[data-reveal].is-revealed{opacity:1;transform:none}

/* Hero-only softer, longer entrance (more travel, slower settle). transform/opacity
   only — the brief bans filter animation, so no blur (was a prior non-compliant tell). */
.reveal-soft[data-reveal]{
  transform:translateY(32px);
  transition:opacity 900ms var(--ease-soft),transform 900ms var(--ease-soft);
}

/* ---------- button micro-physics (transform + the diffuse lift shadow) ----------
   Hover lifts 1px + gains the ultra-diffuse shadow (affordance); active presses to
   .98 (the "seal press" — tactile feedback). The trailing arrow tile slides on hover
   (BRAND_BRIEF: "the CTA's arrow tile translates on hover"). */
.btn{transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--lift)}
.btn:active{transform:scale(.98)}
.btn .arrow{transition:transform var(--dur-fast) var(--ease-out)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- product-card hover physics (lift + settle, transform/shadow only) ----------
   The whole card rises 4px so photo and caption travel together (no detachment);
   the photo tile carries the diffuse lift shadow. This is the ONE card-hover
   effect (restrained-motion pass: catalog.css's former extra image-scale zoom was
   removed so home + catalog cards share a single consistent hover language).
   Composes with the arrow slide (components.css). BRAND_BRIEF card lift. */
.card{transition:transform var(--dur-mid) var(--ease-out)}
.card .ph{transition:box-shadow var(--dur-mid) var(--ease-out)}
.card:hover{transform:translateY(-4px)}
.card:hover .ph{box-shadow:var(--lift)}

/* ---------- skeleton shimmer (loading feedback, not a spinner) ---------- */
@keyframes sh{to{background-position:-200% 0}}

/* ---------- marquee utility (duplicated track; use AT MOST once per page) ----------
   Markup: <div class="marquee"><div class="marquee-track">…</div><div class="marquee-track" aria-hidden="true">…</div></div> */
.marquee{overflow:hidden;display:flex;width:100%;user-select:none}
.marquee-track{display:flex;flex:0 0 auto;min-width:100%;gap:48px;padding-right:48px;white-space:nowrap;animation:marquee 30s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ---------- cross-document View Transitions (progressive enhancement) ----------
   Opt-in navigations; browsers without support simply ignore this. The
   .vt-product-image utility names an element so a shared-element morph can run
   across the catalog→PDP navigation (set --vt-name per product to pair them). */
@view-transition{navigation:auto}
.vt-product-image{view-transition-name:var(--vt-name)}

/* ---------- reduced motion: no travel, no lift, no shimmer, no marquee ----------
   Content is revealed instantly (never stuck hidden); every hover keeps its non-motion
   feedback (background/colour, and the underline still marks state) but drops all
   transform movement and the lift shadow. Opacity-only, per the brief. */
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].is-revealed,.reveal-soft[data-reveal]{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .btn:hover,.btn:active{transform:none;box-shadow:none}
  .btn:hover .arrow{transform:none}
  .card:hover{transform:none}
  .card:hover .ph{box-shadow:none}
  .card:hover .arrow{transform:none}
  .skeleton .ph{animation:none}
  .marquee-track{animation:none}
  *{scroll-behavior:auto!important}
}