/* Scrollprise Motion v39
   Progressive enhancement only. No interaction, routing, catalogue, affiliate,
   search, Read My Mind, favourites, or swipe behaviour is implemented here. */

:root {
  --sp-motion-ease: cubic-bezier(.22,.8,.22,1);
  --sp-motion-fast: 260ms;
  --sp-motion-med: 620ms;
  --sp-motion-slow: 900ms;
  --sp-motion-lift: 18px;
  --sp-motion-glass: rgba(255,255,255,.64);
  --sp-motion-glass-dark: rgba(19,22,19,.66);
  --sp-motion-border: rgba(24,28,24,.10);
}

/* JS adds pending only after it has successfully attached an observer.
   If JS or an optional animation library fails, content remains visible. */
.sp-motion-item.sp-motion-pending {
  opacity: 0;
  transform: translate3d(0,var(--sp-motion-lift),0) scale(.992);
}

.sp-motion-item.sp-motion-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  transition:
    opacity var(--sp-motion-med) var(--sp-motion-ease),
    transform var(--sp-motion-med) var(--sp-motion-ease);
  transition-delay: var(--sp-motion-delay,0ms);
}

/* Motion stays on paint-only properties. It never changes hit targets or layout. */
body[data-page="home"] .editorial-product-stage .product-card,
body[data-page="home"] .traditional-window-rail > a,
body[data-page="home"] .editorial-drop .product-card,
body[data-page="home"] .home-search-results .product-card,
body[data-page="categories"] .product-card,
body[data-page="all-products"] .product-card {
  transition:
    transform 320ms var(--sp-motion-ease),
    box-shadow 320ms var(--sp-motion-ease),
    border-color 320ms var(--sp-motion-ease);
  will-change: transform;
}

@media (hover:hover) and (pointer:fine) {
  body[data-page="home"] .editorial-product-stage .product-card:hover,
  body[data-page="home"] .traditional-window-rail > a:hover,
  body[data-page="home"] .editorial-drop .product-card:hover,
  body[data-page="home"] .home-search-results .product-card:hover,
  body[data-page="categories"] .product-card:hover,
  body[data-page="all-products"] .product-card:hover {
    transform: translate3d(0,-5px,0) scale(1.006);
    box-shadow: 0 22px 48px rgba(15,18,15,.12);
  }
}

/* Glass 2.0 is deliberately restricted to badges/floating micro-UI. */
.card-number,
.buying-card-label b,
.vibe-result-number,
.vibe-result-save,
.card-save,
.hero-kicker,
[data-motion-glass] {
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
}

body:not(.theme-dark) .card-number,
body:not(.theme-dark) .vibe-result-number,
body:not(.theme-dark) [data-motion-glass] {
  box-shadow: 0 8px 24px rgba(18,22,18,.08), inset 0 1px rgba(255,255,255,.55);
}

/* Homepage hero kinetic typography: JS only moves these CSS variables. */
body[data-page="home"] #heroTitle {
  --sp-hero-shift: 0px;
  --sp-hero-tighten: 0px;
  transform: translate3d(0,var(--sp-hero-shift),0);
  letter-spacing: var(--sp-hero-tighten);
  will-change: transform;
}

body[data-page="home"] #heroTitle .hero-outline-line {
  display: block;
  transform: translate3d(var(--sp-hero-outline-x,0px),0,0);
  transition: transform 120ms linear;
  will-change: transform;
}

body[data-page="home"] .hero-tagline b {
  display: inline-block;
  transform: rotate(var(--sp-star-rotate,0deg));
  transition: transform 120ms linear;
}

/* Bento rhythm: visual layout only; DOM order, hrefs and keyboard order stay unchanged. */
@media (min-width: 1121px) {
  body[data-page="home"] .traditional-window-rail {
    display: grid !important;
    grid-template-columns: repeat(12,minmax(0,1fr)) !important;
    gap: 12px !important;
    align-items: stretch;
  }
  body[data-page="home"] .traditional-window-rail > a {
    min-height: 154px !important;
  }
  body[data-page="home"] .traditional-window-rail > a:nth-child(1) { grid-column: span 4 !important; }
  body[data-page="home"] .traditional-window-rail > a:nth-child(2) { grid-column: span 2 !important; }
  body[data-page="home"] .traditional-window-rail > a:nth-child(3) { grid-column: span 3 !important; }
  body[data-page="home"] .traditional-window-rail > a:nth-child(4) { grid-column: span 3 !important; }
  body[data-page="home"] .traditional-window-rail > a:nth-child(5),
  body[data-page="home"] .traditional-window-rail > a:nth-child(6) {
    grid-column: span 6 !important;
    min-height: 132px !important;
  }
  body[data-page="home"] .traditional-window-rail > a:nth-child(1),
  body[data-page="home"] .traditional-window-rail > a:nth-child(4),
  body[data-page="home"] .traditional-window-rail > a:nth-child(5) {
    background-image:
      radial-gradient(190px circle at 92% 8%,rgba(183,255,51,.13),transparent 62%),
      linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.022)) !important;
  }
}

/* Read My Mind gets a visibly richer visual system while preserving its exact DOM,
   form, buttons, result cards and event handlers. This is paint/layout styling only. */
body[data-page="read-my-mind"] .vibe-guide-shell {
  position: relative;
  overflow: hidden;
  border-color: rgba(19,22,19,.14) !important;
  background:
    radial-gradient(720px circle at 84% 9%,rgba(183,255,51,.13),transparent 52%),
    radial-gradient(520px circle at 14% 88%,rgba(83,160,255,.09),transparent 58%),
    rgba(250,250,247,.92) !important;
  box-shadow: 0 34px 96px rgba(18,22,18,.11), inset 0 1px rgba(255,255,255,.94) !important;
}

body[data-page="read-my-mind"] .vibe-guide-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg,transparent 0 47%,rgba(255,255,255,.42) 50%,transparent 53%);
  opacity: .38;
}

body[data-page="read-my-mind"] .vibe-guide-intro,
body[data-page="read-my-mind"] .vibe-guide-console {
  position: relative;
  z-index: 1;
}

body[data-page="read-my-mind"] .vibe-guide-intro {
  background: linear-gradient(180deg,rgba(255,255,255,.50),rgba(244,247,241,.72));
}

body[data-page="read-my-mind"] .vibe-guide-console {
  background: rgba(255,255,255,.56);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  backdrop-filter: blur(18px) saturate(118%);
}

body[data-page="read-my-mind"] .vibe-console-topline > span i {
  box-shadow: 0 0 0 5px rgba(183,255,51,.13),0 0 19px rgba(151,230,40,.52);
}

body[data-page="read-my-mind"] .vibe-bubble-guide {
  background: linear-gradient(135deg,rgba(255,255,255,.94),rgba(246,249,242,.84)) !important;
  border-color: rgba(25,30,25,.12) !important;
  box-shadow: 0 11px 30px rgba(20,24,20,.06),inset 0 1px rgba(255,255,255,.92);
}

body[data-page="read-my-mind"] .vibe-form {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(20,24,20,.17) !important;
  box-shadow: 0 15px 36px rgba(18,22,18,.08),inset 0 1px rgba(255,255,255,.98) !important;
  transition: box-shadow .25s ease,border-color .25s ease,transform .25s ease;
}

body[data-page="read-my-mind"] .vibe-form:focus-within {
  border-color: rgba(132,211,31,.60) !important;
  box-shadow: 0 19px 45px rgba(18,22,18,.11),0 0 0 4px rgba(183,255,51,.12) !important;
  transform: translateY(-1px);
}

body[data-page="read-my-mind"] .vibe-guide-starters button,
body[data-page="read-my-mind"] .bundle-presets button,
body[data-page="read-my-mind"] .vibe-refinements button {
  transition: transform .22s var(--sp-motion-ease),box-shadow .22s var(--sp-motion-ease),border-color .22s ease;
}

@media (hover:hover) and (pointer:fine) {
  body[data-page="read-my-mind"] .vibe-guide-starters button:hover,
  body[data-page="read-my-mind"] .bundle-presets button:hover,
  body[data-page="read-my-mind"] .vibe-refinements button:hover {
    transform: translateY(-2px);
    border-color: rgba(132,211,31,.42) !important;
    box-shadow: 0 10px 22px rgba(18,22,18,.07);
  }
}

body[data-page="read-my-mind"] .vibe-results-head {
  padding-top: 14px;
  border-top: 1px solid rgba(20,24,20,.10);
}

body[data-page="read-my-mind"] .vibe-result-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(20,24,20,.13) !important;
  background: linear-gradient(180deg,rgba(255,255,255,.97),rgba(245,247,242,.93)) !important;
  box-shadow: 0 18px 46px rgba(17,22,17,.085),inset 0 1px rgba(255,255,255,.96);
  transition: transform .28s var(--sp-motion-ease),box-shadow .28s var(--sp-motion-ease),border-color .28s ease;
}

body[data-page="read-my-mind"] .vibe-result-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,#b7ff33,rgba(79,166,255,.78),transparent 82%);
  opacity: .76;
}

body[data-page="read-my-mind"] .vibe-result-card:first-child {
  box-shadow: 0 23px 56px rgba(117,175,28,.15),0 0 0 1px rgba(183,255,51,.29),inset 0 1px rgba(255,255,255,.96);
}

@media (hover:hover) and (pointer:fine) {
  body[data-page="read-my-mind"] .vibe-result-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 27px 62px rgba(17,22,17,.13),0 0 0 1px rgba(183,255,51,.20);
  }
}

/* RMM v38+ already owns when results become final. We only animate that final event. */
body[data-page="read-my-mind"] .vibe-result-card.sp-rmm-final-entry {
  animation: sp-rmm-final-entry 520ms var(--sp-motion-ease) both;
  animation-delay: var(--sp-rmm-delay,0ms);
}

@keyframes sp-rmm-final-entry {
  from { opacity: 0; transform: translate3d(0,14px,0) scale(.988); }
  to   { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

/* Small non-blocking status flourish when a semantic result lands. */
body[data-page="read-my-mind"] #vibeResultsMeta.sp-motion-confirm {
  animation: sp-motion-confirm 420ms var(--sp-motion-ease) both;
}

@keyframes sp-motion-confirm {
  0%   { opacity: .55; transform: translate3d(0,3px,0); }
  100% { opacity: 1; transform: translate3d(0,0,0); }
}

/* Optional micro-celebration canvas is always click-through. */
#sp-celebration-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482000 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
}

/* Performance/accessibility guardrails. */
@media (prefers-reduced-motion: reduce) {
  .sp-motion-item,
  .sp-motion-item.sp-motion-pending,
  .sp-motion-item.sp-motion-visible,
  body[data-page="home"] #heroTitle,
  body[data-page="home"] #heroTitle .hero-outline-line,
  body[data-page="home"] .hero-tagline b,
  body[data-page="read-my-mind"] .vibe-form,
  body[data-page="read-my-mind"] .vibe-result-card,
  body[data-page="read-my-mind"] .vibe-result-card.sp-rmm-final-entry,
  body[data-page="read-my-mind"] #vibeResultsMeta.sp-motion-confirm {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

html.sp-motion-save-data .sp-motion-item,
html.sp-motion-save-data .sp-motion-item.sp-motion-pending,
html.sp-motion-save-data .sp-motion-item.sp-motion-visible {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}