/*
================================================
Space Vanta Theme 1.0
Module: Product Collection
File: cs/motion.css

Version: PRODUCT-COLLECTION-010

RESPONSIBILITY (only this): everything that changes over time or answers a person.
  A. transitions between scenes / collections / pages (keyframes + enter / leave classes)
  B. intro (once)
  C. ambient events (while visible, limited time)
  D. hover (fine pointer), press (touch + mouse), focus, tap ripple look
  E. motion policy: reduced motion, high contrast, forced colours

Resting looks live in scene.css and products.css. Touch has no hover, so every hover
effect has a press (:active) twin. Classes that start animations are set by JS:
  .is-leaving .is-entering (panel, collection)  .is-page-leave .is-page-enter (cards)
  .is-scene-sweep .is-intro-pending .is-intro-run .is-live (root)  .is-roll (numbers)

Three different signatures, so each level feels different:
  Level 2  scene change       -> the module FOLDS on a hinge (+ light sweep)
  Level 3  collection change  -> products collapse into the CENTRE and open again
  Pages    page turn          -> a horizontal WAVE across the columns
================================================
*/

/* ======================= A-C: motion ======================= */
/* ---------- Level 2: scene change = fold on a hinge ---------- */
.sv-product-collection__panel.is-leaving { animation: sv-pc-fold-out 280ms cubic-bezier(.5, 0, .8, .4) forwards; }
@keyframes sv-pc-fold-out { to { opacity: 0; transform: perspective(1600px) translate3d(calc(var(--pc-dir) * -3rem), 0, -150px) rotateY(calc(var(--pc-dir) * 34deg)) scale(0.92); } }
.sv-product-collection__panel.is-entering { animation: sv-pc-fold-in 920ms var(--sv-pc-ease) both; }
@keyframes sv-pc-fold-in { from { opacity: 0; transform: perspective(1600px) translate3d(calc(var(--pc-dir) * 3rem), 0, -170px) rotateY(calc(var(--pc-dir) * -36deg)) scale(0.92); } to { opacity: 1; transform: perspective(1600px); } }
.sv-product-collection__panel.is-entering::before { animation: sv-pc-tether 760ms var(--sv-pc-ease) both; }
@keyframes sv-pc-tether { from { transform: scaleY(0); } }
.sv-product-collection__panel.is-entering .sv-product-collection__ghost { animation: sv-pc-ghost-in 1200ms var(--sv-pc-ease) both; }
@keyframes sv-pc-ghost-in { from { opacity: 0; translate: calc(var(--pc-dir) * 6rem) 0; } }
.sv-product-collection__panel.is-entering .sv-product-collection__panel-description,
.sv-product-collection__panel.is-entering .sv-product-collection__collection-tabs { animation: sv-pc-rise 640ms var(--sv-pc-ease) both; animation-delay: 140ms; }
.sv-product-collection__panel.is-entering .sv-product-collection__collection-tabs { animation-delay: 220ms; }
@keyframes sv-pc-rise { from { opacity: 0; transform: translate3d(0, 1.1rem, 0); } }

/* light sweep across the module while it folds open */
.sv-product-collection__panels::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%); }
.sv-product-collection.is-scene-sweep .sv-product-collection__panels::after { animation: sv-pc-sweep 1000ms var(--sv-pc-ease); }
@keyframes sv-pc-sweep { 0% { opacity: 0; transform: translateX(calc(var(--pc-dir) * -70%)); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(var(--pc-dir) * 70%)); } }

/* ---------- Level 3: collection change = fold into the centre, open from the centre ---------- */
.sv-product-collection__collection.is-leaving .sv-product-collection__product-card { animation: sv-pc-radial-out 240ms cubic-bezier(.5, 0, .8, .4) both; animation-delay: calc(var(--i, 0) * 25ms); }
@keyframes sv-pc-radial-out { to { opacity: 0; translate: calc(var(--tx, 0px) * 0.55) calc(var(--ty, 0px) * 0.55); scale: 0.76; } }
.sv-product-collection__collection.is-entering .sv-product-collection__product-card { animation: sv-pc-radial-in 800ms var(--sv-pc-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes sv-pc-radial-in { from { opacity: 0; translate: var(--tx, 0px) var(--ty, 0px); scale: 0.6; } }

/* ---------- pages: horizontal wave ---------- */
.sv-product-collection__product-card.is-page-leave { animation: sv-pc-card-out 240ms ease-in both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes sv-pc-card-out { to { opacity: 0; translate: calc(var(--pc-dir-x, 1) * -2rem) -0.6rem; scale: 0.95; } }
.sv-product-collection__product-card.is-page-enter { animation: sv-pc-card-in-x 720ms var(--sv-pc-ease) both; animation-delay: calc(var(--i, 0) * 85ms); }
@keyframes sv-pc-card-in-x { from { opacity: 0; translate: calc(var(--pc-dir-x, 1) * 3rem) 1rem; scale: 0.94; } }

/* photo unmask on every entrance */
.sv-product-collection__collection.is-entering .sv-product-collection__product-image,
.sv-product-collection__product-card.is-page-enter .sv-product-collection__product-image { animation: sv-pc-unmask 900ms var(--sv-pc-ease) both; animation-delay: calc(var(--i, 0) * 80ms + 100ms); }
.sv-product-collection__collection.is-entering .sv-product-collection__product-image img,
.sv-product-collection__product-card.is-page-enter .sv-product-collection__product-image img { animation: sv-pc-settle 1200ms var(--sv-pc-ease) both; animation-delay: calc(var(--i, 0) * 80ms + 100ms); }
@keyframes sv-pc-unmask { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sv-pc-settle { from { scale: 1.16; } }

/* ---------- pager number ---------- */
.sv-product-collection__pager-count .is-roll { display: inline-block; animation: sv-pc-roll 420ms var(--sv-pc-ease); }
@keyframes sv-pc-roll { from { opacity: 0; transform: translateY(55%); } }

/* ---------- tap ripple (diamond, not a circle) ---------- */
.sv-product-collection__pulse { animation: sv-pc-pulse 680ms var(--sv-pc-ease) forwards; }
@keyframes sv-pc-pulse { from { opacity: 0.85; transform: scale(1) rotate(45deg); } to { opacity: 0; transform: scale(11) rotate(45deg); } }

/* ---------- intro: scenes fan out from the centre once ---------- */
.sv-product-collection.is-intro-pending { --spread: 0; }
.sv-product-collection.is-intro-pending .sv-product-collection__shard { opacity: 0 !important; transition: none !important; }
.sv-product-collection.is-intro-pending .sv-product-collection__ruler,
.sv-product-collection.is-intro-pending .sv-product-collection__panels { opacity: 0; }
.sv-product-collection.is-intro-pending .sv-product-collection__header > * { opacity: 0; }
.sv-product-collection.is-intro-run .sv-product-collection__header > * { animation: sv-pc-rise 800ms var(--sv-pc-ease) both; }
.sv-product-collection.is-intro-run .sv-product-collection__header > *:nth-child(2) { animation-delay: 90ms; }
.sv-product-collection.is-intro-run .sv-product-collection__header > *:nth-child(3) { animation-delay: 180ms; }
.sv-product-collection.is-intro-run .sv-product-collection__shard { transition-duration: 1100ms, 700ms; transition-delay: calc(var(--ai, 0) * 90ms), calc(var(--ai, 0) * 90ms); }
.sv-product-collection.is-intro-run .sv-product-collection__ruler,
.sv-product-collection.is-intro-run .sv-product-collection__panels { animation: sv-pc-rise 900ms var(--sv-pc-ease) 450ms both; }

/* ---------- ambient: short, rare events while the module is on screen ----------
   Not a loop of constant movement. Each event lasts about a second and then rests for
   7 to 14 seconds, every layer on its own rhythm, so it feels like a living instrument,
   not an animation. JS adds .is-live only while the module is visible, for a limited time,
   and never with reduced motion or Save-Data (see motion.js). Touch gets the same events:
   nothing here needs a cursor. */
.sv-product-collection.is-live:not(.is-dragging):not(.is-intro-pending) .sv-product-collection__shard.is-center .sv-product-collection__shard-media::after { animation: sv-pc-glint 9s ease-in-out 1.5s infinite; }
@keyframes sv-pc-glint { 0% { opacity: 0; transform: translateX(-70%); } 5% { opacity: 0.95; } 15% { opacity: 0; transform: translateX(70%); } 100% { opacity: 0; transform: translateX(70%); } }

.sv-product-collection.is-live:not(.is-dragging):not(.is-intro-pending) .sv-product-collection__shard.is-center::before { animation: sv-pc-lock 11s ease-in-out 3.5s infinite; }
@keyframes sv-pc-lock { 0%, 90%, 100% { scale: 1; } 94% { scale: 1.07; } 97% { scale: 1; } }

.sv-product-collection.is-live:not(.is-intro-pending) .sv-product-collection__ruler-needle::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--sv-pc-accent); opacity: 0; animation: sv-pc-ping 10s ease-out 2.5s infinite; }
@keyframes sv-pc-ping { 0% { opacity: 0; scale: 1; } 2% { opacity: 0.7; } 14% { opacity: 0; scale: 4.4; } 100% { opacity: 0; scale: 4.4; } }

.sv-product-collection.is-live:not(.is-intro-pending) .sv-product-collection__panel.is-active .sv-product-collection__product-card:not(.is-off) .sv-product-collection__product-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(106deg, transparent 49.4%, rgba(255, 255, 255, 0.8) 50%, transparent 50.6%);
  opacity: 0;
  transform: translateX(-70%);
  animation: sv-pc-scan 10s ease-in-out calc(2s + var(--i, 0) * 0.35s) infinite;
}
@keyframes sv-pc-scan { 0% { opacity: 0; transform: translateX(-70%); } 5% { opacity: 0.9; } 14% { opacity: 0; transform: translateX(70%); } 100% { opacity: 0; transform: translateX(70%); } }

.sv-product-collection.is-live:not(.is-intro-pending) .sv-product-collection__panel.is-active:not(.is-entering) .sv-product-collection__ghost { animation: sv-pc-breathe 12s ease-in-out 4s infinite; }
@keyframes sv-pc-breathe { 0%, 82%, 100% { opacity: 1; } 91% { opacity: 0.3; } }

.sv-product-collection.is-live:not(.is-intro-pending) .sv-product-collection__collections::before { animation: sv-pc-plane-a 14s ease-in-out 5s infinite; }
.sv-product-collection.is-live:not(.is-intro-pending) .sv-product-collection__collections::after { animation: sv-pc-plane-b 14s ease-in-out 5.6s infinite; }
@keyframes sv-pc-plane-a { 0%, 84%, 100% { rotate: 0deg; } 92% { rotate: 0.5deg; } }
@keyframes sv-pc-plane-b { 0%, 84%, 100% { rotate: 0deg; } 92% { rotate: -0.5deg; } }

/* ---------- motion policy: one switch for everything ---------- */
@media (prefers-reduced-motion: reduce) {
  .sv-product-collection *,
  .sv-product-collection *::before,
  .sv-product-collection *::after { animation: none !important; transition: none !important; }
  .sv-product-collection { --px: 0 !important; --py: 0 !important; }
  .sv-product-collection.is-intro-pending .sv-product-collection__shard { opacity: 1 !important; }
  .sv-product-collection.is-intro-pending .sv-product-collection__ruler,
  .sv-product-collection.is-intro-pending .sv-product-collection__panels,
  .sv-product-collection.is-intro-pending .sv-product-collection__header > * { opacity: 1; }
}

/* ======================= D-E: answering a person ======================= */
/* focus */
.sv-product-collection__shard:focus-visible,
.sv-product-collection__collection-tab:focus-visible,
.sv-product-collection__pager-button:focus-visible,
.sv-product-collection__view-all:focus-visible { outline: 2px solid var(--sv-pc-accent); outline-offset: 4px; }
/* the centre scene is the focus target of the whole rail (real tabs may be parked off-screen) */
.sv-product-collection__shard.is-focus { outline: 2px solid var(--sv-pc-accent); outline-offset: 8px; }
.sv-product-collection__shard:focus { outline: none; }
.sv-product-collection__shard.is-focus:focus { outline: 2px solid var(--sv-pc-accent); }

/* press (touch + mouse) */
.sv-product-collection.is-enhanced .sv-product-collection__shard:active { --press: 0.94; }
.sv-product-collection__collection-tab:active { transform: translateY(2px) scale(0.96); }
.sv-product-collection__pager-button:not(:disabled):active { transform: scale(0.92); border-color: var(--sv-pc-accent); background-color: var(--sv-pc-accent-soft); }
.sv-product-collection__pager-button:not(:disabled):active svg { transform: translateX(3px); }
.sv-product-collection__pager-button[data-scene-prev]:not(:disabled):active svg { transform: scaleX(-1) translateX(3px); }
.sv-product-collection__view-all:active { transform: scale(0.98); }
.sv-product-collection__view-all:active { --b: 22px; }
.sv-product-collection__view-all:active .sv-product-collection__arrow { background: var(--sv-pc-accent); color: #fff; border-color: var(--sv-pc-accent); }
.sv-product-collection__view-all:active .sv-product-collection__arrow svg:nth-child(1) { transform: translate(190%, -190%); }
.sv-product-collection__view-all:active .sv-product-collection__arrow svg:nth-child(2) { transform: translate(0, 0); }
.sv-product-collection__product-card:active .sv-product-collection__product-link { transform: scale(0.985); }
.sv-product-collection__product-link { transition: transform 300ms var(--sv-pc-ease); }

/* hover: fine pointers only */
@media (hover: hover) and (pointer: fine) {
  .sv-product-collection__shard:hover .sv-product-collection__shard-media img { opacity: 0.92; }
  .sv-product-collection__shard:not(.is-center):hover .sv-product-collection__shard-media::after { transform: translateX(10%); }
  .sv-product-collection__collection-tab:hover { color: var(--sv-pc-ink); }
  .sv-product-collection__pager-button:not(:disabled):hover { border-color: var(--sv-pc-accent); }
  .sv-product-collection__pager-button:not(:disabled):hover svg { transform: translateX(3px); }
  .sv-product-collection__pager-button[data-scene-prev]:not(:disabled):hover svg { transform: scaleX(-1) translateX(3px); }
  .sv-product-collection__product-card:hover .sv-product-collection__product-link::before { border-color: var(--sv-pc-line-strong); }
  .sv-product-collection__view-all:hover { --b: 22px; }
  .sv-product-collection__view-all:hover .sv-product-collection__arrow { background: var(--sv-pc-accent); color: #fff; border-color: var(--sv-pc-accent); }
  .sv-product-collection__view-all:hover .sv-product-collection__arrow svg:nth-child(1) { transform: translate(190%, -190%); }
  .sv-product-collection__view-all:hover .sv-product-collection__arrow svg:nth-child(2) { transform: translate(0, 0); }
}

/* tap ripple look (animation lives in motion.css) */
.sv-product-collection__pulse { position: absolute; left: var(--rx, 50%); top: var(--ry, 50%); z-index: 6; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 1px solid var(--sv-pc-accent); background: var(--sv-pc-accent-soft); pointer-events: none; }

/* high-contrast and forced-colour modes (Windows contrast themes, prefers-contrast): keep every control visible */
@media (prefers-contrast: more) {
  .sv-product-collection { --sv-pc-line: rgba(38, 50, 58, 0.5); --sv-pc-line-strong: rgba(38, 50, 58, 0.8); --sv-pc-plane: rgba(38, 50, 58, 0.35); }
}
@media (forced-colors: active) {
  .sv-product-collection__shard-media,
  .sv-product-collection__pager-button,
  .sv-product-collection__collection-tab[aria-selected="true"],
  .sv-product-collection__view-all { border: 1px solid CanvasText; }
  .sv-product-collection__indicator,
  .sv-product-collection__ruler-needle,
  .sv-product-collection__panel::before,
  .sv-product-collection__panel::after { background: CanvasText; forced-color-adjust: none; }
  .sv-product-collection__shard.is-focus,
  .sv-product-collection__shard:focus-visible { outline: 2px solid Highlight; }
}