/* ================================================================
 * Motion v2 — Mantra-tier choreography
 * Loaded AFTER motion.css. Refines and adds signature interactions.
 * ================================================================ */

/* ---------- HERO CHOREOGRAPHY ---------- */
/* Image: subtle Ken Burns */
.rcs-hero__media img {
  animation: rcs-kenburns 22s var(--rcs-ease-inout) infinite alternate;
  transform-origin: center 40%;
  will-change: transform;
}
@keyframes rcs-kenburns {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  100% { transform: scale(1.12) translate3d(0, -1%, 0); }
}

/* Hero content stagger entrance — added by JS via .is-revealed class */
.rcs-hero__eyebrow,
.rcs-hero__title,
.rcs-hero__body,
.rcs-hero__cta {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--rcs-ease-out), transform .9s var(--rcs-ease-out);
}
.rcs-hero.is-visible .rcs-hero__eyebrow { transition-delay: .15s; opacity: 1; transform: translateY(0); }
.rcs-hero.is-visible .rcs-hero__title   { transition-delay: .30s; opacity: 1; transform: translateY(0); }
.rcs-hero.is-visible .rcs-hero__body    { transition-delay: .55s; opacity: 1; transform: translateY(0); }
.rcs-hero.is-visible .rcs-hero__cta     { transition-delay: .75s; opacity: 1; transform: translateY(0); }

/* Hero scrim breathes subtly */
.rcs-hero__scrim {
  animation: rcs-scrim-breath 12s ease-in-out infinite;
}
@keyframes rcs-scrim-breath {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.92; }
}

/* ---------- BUTTON RIPPLE — magnetic pressure ---------- */
.rcs-btn {
  transform-origin: center;
  transition: transform .25s var(--rcs-ease-out),
              box-shadow .3s var(--rcs-ease-out),
              background-color .25s ease;
}
.rcs-btn:hover {
  transform: translateY(-1px) scale(1.015);
  box-shadow: 0 8px 22px -8px rgba(107,26,46,.55);
}
.rcs-btn:active {
  transform: scale(.96);
  transition-duration: .12s;
}

/* ---------- SECTION TRANSITIONS ON SCROLL ---------- */
section.rcs-section {
  position: relative;
}
/* Sections only animate when EXPLICITLY tagged with data-reveal in PHP */
section.rcs-section[data-reveal] {
  transform: translateY(28px);
  opacity: 0;
  transition: opacity .85s var(--rcs-ease-out), transform .9s var(--rcs-ease-out);
}
section.rcs-section[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* SAFETY: if JS is disabled, after 2s reveal everything via class injection
   (real fallback is in motion-v2.js — JS adds .is-visible on load + scroll + timer) */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ---------- PAGE TRANSITIONS ---------- */
/* Fallback fade-out before navigation (browsers without View Transitions) */
html.rcs-page-leaving { opacity: 0; transition: opacity .18s ease; }
html.rcs-page-leaving .rcs-bottom-nav,
html.rcs-page-leaving .rcs-header { opacity: 1; }
/* Native View Transitions choreography */
@supports (view-transition-name: a) {
  ::view-transition-old(root) {
    animation: rcs-vt-out .26s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  ::view-transition-new(root) {
    animation: rcs-vt-in .42s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  /* Pin nav/header so they don't flash */
  .rcs-header { view-transition-name: rcs-header; }
  .rcs-bottom-nav { view-transition-name: rcs-bottom-nav; }
}
@keyframes rcs-vt-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
@keyframes rcs-vt-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Account hero / panel must always be visible on first paint */
.rcs-account__hero,
.rcs-account__panel,
.rcs-cart-totals,
.rcs-cart-item {
  opacity: 1;
  transform: none;
}
.rcs-account__hero[data-reveal]:not(.is-visible),
.rcs-account__panel[data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--rcs-ease-out), transform .8s var(--rcs-ease-out);
}
.rcs-account__hero.is-visible,
.rcs-account__panel.is-visible { opacity: 1 !important; transform: none !important; }

/* ---------- PAGE BACKGROUND COLOR-SHIFT BY SCROLL ---------- */
body {
  transition: background-color .8s ease;
}
body.rcs-section-tinted { background-color: var(--rcs-section-tint); }
body.rcs-section-cream  { background-color: var(--rcs-canvas); }

/* ---------- PRODUCT CARD ENRICH ---------- */
.rcs-product-card {
  transition: transform .35s var(--rcs-ease-out);
}
.rcs-product-card__media {
  position: relative;
  overflow: hidden;
}
.rcs-product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(28,26,25,0.18) 100%);
  opacity: 0;
  transition: opacity .35s var(--rcs-ease-out);
  pointer-events: none;
}
.rcs-product-card:hover .rcs-product-card__media::after,
.rcs-product-card:active .rcs-product-card__media::after { opacity: 1; }
.rcs-product-card:hover .rcs-product-card__media img,
.rcs-product-card:active .rcs-product-card__media img {
  transform: scale(1.05);
}

/* Wishlist heart burst */
@keyframes rcs-heart-burst {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  50%  { transform: scale(.95); }
  100% { transform: scale(1.1); }
}
.rcs-product-card__wishlist.is-bursting {
  animation: rcs-heart-burst .55s var(--rcs-spring);
}
.rcs-product-card__wishlist.is-bursting::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--rcs-r-pill);
  border: 2px solid var(--rcs-primary);
  opacity: .65;
  animation: rcs-burst-ring .55s var(--rcs-ease-out) forwards;
}
@keyframes rcs-burst-ring {
  0%   { transform: scale(.6); opacity: .8; }
  100% { transform: scale(2.3); opacity: 0; }
}

/* ---------- EDIT TILE choreography ---------- */
.rcs-edits-tile__media img {
  transition: transform 1.5s var(--rcs-ease-out), filter 0.6s var(--rcs-ease-out);
}
.rcs-edits-tile:hover .rcs-edits-tile__media img,
.rcs-edits-tile:active .rcs-edits-tile__media img {
  transform: scale(1.08);
  filter: brightness(1.05);
}
.rcs-edits-tile__cta i {
  transition: transform .35s var(--rcs-ease-out);
}
.rcs-edits-tile:hover .rcs-edits-tile__cta i,
.rcs-edits-tile:active .rcs-edits-tile__cta i {
  transform: translateX(4px);
}

/* ---------- BOTTOM NAV — active spotlight ---------- */
.rcs-bottom-nav a.is-active {
  color: var(--rcs-primary);
}
.rcs-bottom-nav a.is-active .rcs-ico,
.rcs-bottom-nav a.is-active i {
  transform: scale(1.08);
  transition: transform .35s var(--rcs-spring);
}
.rcs-bottom-nav a.is-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: var(--rcs-primary);
  border-radius: var(--rcs-r-pill) var(--rcs-r-pill) 0 0;
  filter: blur(0.5px);
}
.rcs-bottom-nav a {
  transition: color .25s ease;
}
.rcs-bottom-nav .rcs-badge-cart {
  animation: rcs-badge-spawn .55s var(--rcs-spring);
}
@keyframes rcs-badge-spawn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}
body.rcs-cart-just-added .rcs-bottom-nav .rcs-badge-cart {
  animation: rcs-badge-bounce .6s var(--rcs-spring);
}
@keyframes rcs-badge-bounce {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.4); }
}

/* ---------- BAG FLY ---------- */
.rcs-bag-fly {
  position: fixed;
  z-index: 999;
  width: 60px;
  height: 80px;
  border-radius: var(--rcs-r-4);
  background-size: cover;
  background-position: center;
  box-shadow: var(--rcs-shadow-xl);
  pointer-events: none;
  transition: transform .8s var(--rcs-ease-out), opacity .8s var(--rcs-ease-out);
  will-change: transform, opacity;
}

/* ---------- MARQUEE polish ---------- */
.rcs-utility__track {
  animation: rcs-marquee 38s linear infinite;
}
.rcs-utility:hover .rcs-utility__track {
  animation-play-state: paused;
}
.rcs-utility__item {
  transition: transform .3s var(--rcs-ease-out), opacity .3s ease;
}
.rcs-utility__item:hover {
  transform: scale(1.04);
}
.rcs-utility__dot {
  background: var(--rcs-accent);
  opacity: .65;
}

/* ---------- HEADER scroll-state ---------- */
.rcs-header {
  transition: padding .35s var(--rcs-ease-out),
              background .35s ease,
              box-shadow .35s var(--rcs-ease-out);
}
.rcs-header.is-scrolled {
  background: rgba(250,246,240,0.94);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(28,26,25,0.05), 0 6px 20px -10px rgba(28,26,25,0.10);
  padding: 6px var(--rcs-gutter);
}
.rcs-header.is-scrolled .rcs-header__brand {
  font-size: var(--rcs-size-md);
}

/* ---------- TOAST POP ---------- */
.rcs-toast {
  transform: translate(-50%, 100%) scale(.92);
  opacity: 0;
  transition: transform .5s var(--rcs-spring), opacity .35s ease;
  will-change: transform, opacity;
}
.rcs-toast.is-visible {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}

/* ---------- FOUNDER QUOTE — character reveal ---------- */
.rcs-founder__quote blockquote {
  perspective: 600px;
}
.rcs-founder__quote .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px) rotateX(45deg);
  transition: opacity .45s var(--rcs-ease-out), transform .55s var(--rcs-ease-out);
}
.rcs-founder.is-visible .char {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

/* ---------- MINI CART PANEL ---------- */
.rcs-minicart {
  position: fixed;
  inset: 0;
  z-index: var(--rcs-z-drawer);
  pointer-events: none;
}
.rcs-minicart[data-open="true"] {
  pointer-events: auto;
}
.rcs-minicart__scrim {
  position: absolute; inset: 0;
  background: rgba(28,26,25,.55);
  opacity: 0;
  transition: opacity .35s var(--rcs-ease-out);
  backdrop-filter: blur(8px) saturate(.9);
  -webkit-backdrop-filter: blur(8px) saturate(.9);
}
.rcs-minicart[data-open="true"] .rcs-minicart__scrim { opacity: 1; }
.rcs-minicart__panel {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 90%; max-width: 420px;
  background: var(--rcs-canvas);
  transform: translateX(100%);
  transition: transform .5s var(--rcs-ease-out);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 32px rgba(28,26,25,.16);
  overflow-y: auto;
  padding: 0;
  will-change: transform;
}
.rcs-minicart[data-open="true"] .rcs-minicart__panel { transform: translateX(0); }
.rcs-minicart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rcs-space-5) var(--rcs-space-5) var(--rcs-space-3);
  border-bottom: 1px solid var(--rcs-outline);
  position: sticky; top: 0;
  background: var(--rcs-canvas);
  z-index: 2;
}
.rcs-minicart__head h2 {
  font-family: var(--rcs-font-display);
  font-size: var(--rcs-size-3xl);
  font-weight: var(--rcs-fw-medium);
  margin: 0;
  color: var(--rcs-text);
}
.rcs-minicart__close {
  width: 40px; height: 40px;
  border-radius: var(--rcs-r-pill);
  background: var(--rcs-surface);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--rcs-text);
  font-size: 18px;
}
.rcs-minicart__items {
  flex: 1;
  padding: var(--rcs-space-4) var(--rcs-space-5);
  overflow-y: auto;
}
.rcs-minicart__item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--rcs-space-3);
  padding: var(--rcs-space-3) 0;
  border-bottom: 1px solid var(--rcs-outline);
  align-items: start;
}
.rcs-minicart__item img {
  width: 72px; height: 90px;
  object-fit: cover;
  border-radius: var(--rcs-r-3);
}
.rcs-minicart__footer {
  padding: var(--rcs-space-5);
  border-top: 1px solid var(--rcs-outline);
  background: var(--rcs-canvas);
  position: sticky; bottom: 0;
}

/* ---------- SCROLL PROGRESS ---------- */
.rcs-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: calc(var(--rcs-z-sticky) + 1);
  background: rgba(0,0,0,0);
  pointer-events: none;
}
.rcs-scroll-progress > div {
  height: 100%;
  background: var(--rcs-primary);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .15s linear;
  will-change: transform;
}

/* ---------- FORM error shake ---------- */
@keyframes rcs-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.rcs-shake {
  animation: rcs-shake .45s var(--rcs-ease-out);
}

/* ---------- SUCCESS check-draw ---------- */
@keyframes rcs-check-draw {
  0%   { stroke-dashoffset: 30; }
  100% { stroke-dashoffset: 0; }
}
.rcs-check-anim path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: rcs-check-draw .55s var(--rcs-ease-out) forwards;
}

/* ---------- SKELETON shimmer ---------- */
@keyframes rcs-shimmer {
  0%   { background-position: -120% 0; }
  100% { background-position: 220% 0; }
}
.rcs-skeleton {
  background: linear-gradient(90deg,
    var(--rcs-surface) 0%,
    var(--rcs-section-tint) 45%,
    var(--rcs-surface) 90%);
  background-size: 220% 100%;
  animation: rcs-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--rcs-r-3);
}

/* ---------- PRODUCT GRID enhancement ---------- */
.rcs-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--rcs-space-4);
  padding: 0 var(--rcs-gutter);
}
.rcs-product-grid > * {
  min-width: 0;
}

/* WooCommerce default loop overrides */
ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--rcs-space-4) !important;
  padding: 0 var(--rcs-gutter) !important;
  margin: 0 !important;
  list-style: none !important;
}
ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  display: block;
}

/* Better tap target on heart */
.rcs-product-card__wishlist {
  position: relative;
  isolation: isolate;
}

/* ---------- ACCESSIBILITY ---------- */
:focus-visible {
  outline: 3px solid var(--rcs-primary);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Respect reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .rcs-hero__media img,
  .rcs-utility__track,
  .rcs-hero__scrim {
    animation: none !important;
  }
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}