/*
================================================
Space Vanta Theme 1.0
Module: Product Collection
File: cs/scene.css
Version: PRODUCT-COLLECTION-010

RESPONSIBILITY (only this): how the module is built and what it looks like at rest.
  design tokens, section shell, background layers, header,
  Level 2 rail (scene shards, lock-on brackets, ruler),
  Level 3 panel shell (tether, ghost index, tabs + indicator, tilted planes),
  and the mobile layout of all of those.

NOT here: products / pager / links  -> products.css
          keyframes, hover, press, focus, ambient motion -> motion.css

Layout rule: shards are positioned absolutely against .track. They never depend on
being direct children of it, because the Shopline editor wraps every block.

Written by JS (read-only for CSS):
  --px --py (depth)  --mx --my (pointer light)  --pc-dir (direction of the last scene change)
  per shard: --o (signed slot) --a (|slot|) data-cut .is-center .is-far
  root classes: is-enhanced is-ready is-dragging is-live is-intro-pending is-intro-run
================================================
*/

.sv-product-collection {
  --sv-pc-ink: #26323a;
  --sv-pc-muted: #566269;
  --sv-pc-line: rgba(67, 84, 96, 0.19);
  --sv-pc-line-strong: rgba(67, 84, 96, 0.42);
  --sv-pc-plane: rgba(91, 105, 112, 0.15);
  --sv-pc-axis: rgba(91, 105, 112, 0.13);
  --sv-pc-cold: #e8e7e0;
  --sv-pc-accent: #506c80;
  --sv-pc-accent-soft: rgba(80, 108, 128, 0.14);
  --sv-pc-ease: cubic-bezier(.2, .8, .2, 1);
  --px: 0;
  --py: 0;
  --mx: 50%;
  --my: 40%;
  --pc-dir: 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.2rem, 4.4vw, 4.2rem) 0 clamp(2.6rem, 5vw, 4.6rem);
  color: var(--sv-pc-ink);
  background: linear-gradient(180deg, #f3f1eb 0%, #efede6 100%);
}
.sv-product-collection * { box-sizing: border-box; }

/* axis lines (hero language) */
.sv-product-collection__stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  height: 22rem;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--sv-pc-axis) 22%, var(--sv-pc-axis) 78%, transparent);
  pointer-events: none;
}

.sv-product-collection__inner { width: min(1320px, calc(100% - 8vw)); margin: 0 auto; }

/* header */
.sv-product-collection__header { text-align: center; }
.sv-product-collection__eyebrow { margin: 0; color: var(--sv-pc-muted); font-size: 0.8rem; letter-spacing: 0.06em; }
.sv-product-collection__title { max-width: 18ch; margin: 0.5rem auto 0; font-size: clamp(1.9rem, 3.8vw, 3.3rem); font-weight: 450; letter-spacing: -0.05em; line-height: 1.04; }
.sv-product-collection__intro { max-width: 42ch; margin: 0.8rem auto 0; color: var(--sv-pc-muted); line-height: 1.6; }

.sv-product-collection__stage { position: relative; margin-top: clamp(0.4rem, 1vw, 0.9rem); }

@media (max-width: 767px) {
  .sv-product-collection { padding: 2rem 0 2.6rem; }
  .sv-product-collection__inner { width: calc(100% - 2rem); }
  .sv-product-collection__title { font-size: clamp(1.8rem, 8.4vw, 2.3rem); }
  .sv-product-collection__intro { margin-top: 0.6rem; font-size: 0.92rem; }
  .sv-product-collection__stage { margin-top: 0.2rem; }
  .sv-product-collection__stage::before { height: 17rem; }
}

/* ======================= Level 2: rail ======================= */
.sv-product-collection {
  --shard-w: clamp(8rem, 11.5vw, 11rem);
  --step-k: 1.3;
  --step: calc(var(--shard-w) * var(--step-k));
  --rail-h: calc(var(--shard-w) * 1.334 * 1.08 + 3.5rem);
  --v: 3;
  --rail-pos: 0;
  --spread: 1;
}

.sv-product-collection__rail { position: relative; overflow: hidden; padding: 3rem 0 0.2rem; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.sv-product-collection.is-dragging .sv-product-collection__rail { cursor: grabbing; }

/* without JS: centred row */
.sv-product-collection__track { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(0.6rem, 1.6vw, 1.3rem); width: 100%; margin: 0 auto; }
.sv-product-collection.is-enhanced .sv-product-collection__track { display: block; height: var(--rail-h); }

.sv-product-collection__shard {
  --o: 0;
  --a: 0;
  --s: 1;
  --press: 1;
  position: relative;
  flex: 0 0 auto;
  width: var(--shard-w);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.sv-product-collection.is-enhanced .sv-product-collection__shard {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 0 0 calc(var(--shard-w) / -2);
}

.sv-product-collection.is-enhanced .sv-product-collection__shard {
  --s: max(0.58, calc(1.14 - var(--a) * 0.19));
  z-index: calc(40 - var(--a) * 8);
  transform:
    perspective(1100px)
    translate3d(calc(var(--o) * var(--step) * var(--spread) + var(--px) * (1.2 - var(--a) * 0.25) * 10px), calc(min(var(--a), 2.5) * 1rem - 0.4rem + var(--py) * 6px), calc(40px - var(--a) * 70px))
    rotateY(calc(var(--o) * -12deg))
    scale(calc(var(--s) * var(--press)));
  transition: transform 760ms var(--sv-pc-ease), opacity 500ms ease;
}
/* parked outside the visible slots: invisible but still a real, focusable tab */
.sv-product-collection.is-enhanced .sv-product-collection__shard.is-far { pointer-events: none; }
.sv-product-collection.is-enhanced.is-dragging .sv-product-collection__shard,
.sv-product-collection.is-enhanced:not(.is-ready) .sv-product-collection__shard { transition: none; }

/* distance fade lives on the picture; the caption keeps full contrast near the centre and is gone beyond it */
.sv-product-collection.is-enhanced .sv-product-collection__shard-media { opacity: calc(max(0.42, 1 - var(--a) * 0.22) * min(1, max(0, calc(var(--v) + 1 - var(--a))))); transition: clip-path 760ms var(--sv-pc-ease), opacity 500ms ease; }
.sv-product-collection.is-enhanced .sv-product-collection__shard-copy,
.sv-product-collection.is-enhanced .sv-product-collection__shard-index { opacity: min(1, max(0, calc(2 - var(--a)))); }

/* slot index */
.sv-product-collection__shard-index { position: absolute; top: -1.15rem; left: 0; font-size: 0.7rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--sv-pc-muted); transition: color 300ms ease, transform 500ms var(--sv-pc-ease); }
.sv-product-collection__shard-index::before { content: attr(data-index); }
.sv-product-collection__shard.is-center .sv-product-collection__shard-index { color: var(--sv-pc-accent); transform: translateX(0.4rem); }

/* media (fractured cut, set per shard by data-cut) */
.sv-product-collection__shard-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: linear-gradient(145deg, #ffffff, var(--sv-pc-cold));
  --cut: polygon(0 0, 100% 7%, 100% 100%, 0 93%);
  clip-path: var(--cut);
  transition: clip-path 760ms var(--sv-pc-ease);
}
.sv-product-collection__shard[data-cut="1"] .sv-product-collection__shard-media { --cut: polygon(0 7%, 100% 0, 100% 93%, 0 100%); }
.sv-product-collection__shard[data-cut="2"] .sv-product-collection__shard-media { --cut: polygon(0 0, 100% 0, 100% 91%, 0 100%); }
.sv-product-collection__shard[data-cut="3"] .sv-product-collection__shard-media { --cut: polygon(0 8%, 100% 0, 100% 100%, 0 92%); }
.sv-product-collection__shard.is-center .sv-product-collection__shard-media { clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%); }
.sv-product-collection__shard-media::before { content: ""; position: absolute; inset: 7px; z-index: 2; border: 1px solid rgba(255, 255, 255, 0.5); pointer-events: none; }
.sv-product-collection__shard-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(106deg, transparent 49.6%, rgba(255, 255, 255, 0.9) 50%, transparent 50.4%);
  opacity: 0.7;
  transform: translateX(-30%);
  transition: transform 900ms var(--sv-pc-ease), opacity 500ms ease;
}
.sv-product-collection__shard.is-center .sv-product-collection__shard-media::after { transform: translateX(30%); opacity: 0; }
.sv-product-collection__shard-media img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; filter: grayscale(1); opacity: 0.62; transform: scale(1.1); transition: filter 500ms ease, opacity 500ms ease, transform 900ms var(--sv-pc-ease); }
.sv-product-collection__shard.is-center .sv-product-collection__shard-media img { filter: none; opacity: 1; transform: scale(1.03); }

/* caption */
.sv-product-collection__shard-copy { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.7rem; }
.sv-product-collection__shard-title { align-self: flex-start; padding-bottom: 0.2rem; font-size: 0.86rem; letter-spacing: -0.005em; line-height: 1.3; color: var(--sv-pc-muted); background: linear-gradient(var(--sv-pc-accent), var(--sv-pc-accent)) 0 100% / 0 1px no-repeat; transition: background-size 600ms var(--sv-pc-ease), color 300ms ease; }
.sv-product-collection__shard.is-center .sv-product-collection__shard-title { color: var(--sv-pc-ink); background-size: 100% 1px; }
.sv-product-collection__shard-summary { display: none; }

/* lock-on brackets around the centre scene */
.sv-product-collection__shard::before {
  content: "";
  position: absolute;
  left: -0.55rem;
  right: -0.55rem;
  top: -0.55rem;
  height: calc(var(--shard-w) * 1.334 + 1.1rem);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.12);
  background:
    linear-gradient(var(--sv-pc-accent), var(--sv-pc-accent)) top left / 14px 1.5px no-repeat,
    linear-gradient(var(--sv-pc-accent), var(--sv-pc-accent)) top left / 1.5px 14px no-repeat,
    linear-gradient(var(--sv-pc-accent), var(--sv-pc-accent)) top right / 14px 1.5px no-repeat,
    linear-gradient(var(--sv-pc-accent), var(--sv-pc-accent)) top right / 1.5px 14px no-repeat,
    linear-gradient(var(--sv-pc-accent), var(--sv-pc-accent)) bottom left / 14px 1.5px no-repeat,
    linear-gradient(var(--sv-pc-accent), var(--sv-pc-accent)) bottom left / 1.5px 14px no-repeat,
    linear-gradient(var(--sv-pc-accent), var(--sv-pc-accent)) bottom right / 14px 1.5px no-repeat,
    linear-gradient(var(--sv-pc-accent), var(--sv-pc-accent)) bottom right / 1.5px 14px no-repeat;
  transition: opacity 400ms ease, transform 700ms var(--sv-pc-ease);
}
.sv-product-collection__shard.is-center::before { opacity: 1; transform: none; }

/* ruler tape: scrubs with the rail (precision instrument feel) + position readout */
.sv-product-collection__ruler { position: relative; height: 2.6rem; margin-top: 0.2rem; pointer-events: none; }
.sv-product-collection__ruler-tape {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1.1rem;
  background-image:
    linear-gradient(90deg, var(--sv-pc-line-strong) 0 1px, transparent 1px),
    linear-gradient(90deg, var(--sv-pc-line) 0 1px, transparent 1px);
  background-repeat: repeat-x, repeat-x;
  background-size: var(--step) 100%, calc(var(--step) / 4) 45%;
  background-position: var(--tape-x, 0px) 0, var(--tape-x, 0px) 0;
  transition: background-position 760ms var(--sv-pc-ease);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.sv-product-collection__ruler-needle { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3px; background: var(--sv-pc-accent); rotate: 45deg; }
.sv-product-collection__ruler-readout { position: absolute; left: 50%; top: 1.35rem; display: inline-flex; align-items: center; gap: 0.6rem; transform: translateX(-50%); font-size: 0.78rem; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; color: var(--sv-pc-muted); }
.sv-product-collection__ruler-readout [data-pc-now] { color: var(--sv-pc-ink); }
.sv-product-collection__ruler-readout-line { width: 1.6rem; height: 1px; background: var(--sv-pc-line-strong); transform: rotate(-24deg); }
.sv-product-collection.is-dragging .sv-product-collection__ruler-tape,
.sv-product-collection:not(.is-ready) .sv-product-collection__ruler-tape { transition: none; }
.sv-product-collection:not(.is-enhanced) .sv-product-collection__ruler { display: none; }

/* Mobile is its own layout: one big centre scene, the next ones only peek in from the edges,
   captions only where they can be read, and a bigger readout because there is no hover to hint at position. */
@media (max-width: 767px) {
  .sv-product-collection {
    --shard-w: clamp(7rem, 38vw, 9.4rem);
    --step-k: 1.22;
    --rail-h: calc(var(--shard-w) * 1.334 * 1.08 + 3.2rem);
    --v: 2;
  }
  .sv-product-collection__rail { padding-top: 2.6rem; }
  .sv-product-collection__shard-title { font-size: 0.88rem; }
  .sv-product-collection.is-enhanced .sv-product-collection__shard:not(.is-center) .sv-product-collection__shard-index { opacity: 0; }
  .sv-product-collection.is-enhanced .sv-product-collection__shard:not(.is-center) .sv-product-collection__shard-copy { opacity: min(0.9, max(0, calc(1.6 - var(--a)))); }
  .sv-product-collection__ruler { height: 2.4rem; }
  .sv-product-collection__ruler-readout { font-size: 0.82rem; }
}

/* ======================= Level 3: panel shell ======================= */
.sv-product-collection__panels { position: relative; }
.sv-product-collection__panels::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  margin-left: -50vw;
  background: var(--sv-pc-axis);
  pointer-events: none;
}

.sv-product-collection__panel { position: relative; transform-origin: 50% 0; display: block; padding-top: 2.4rem; text-align: center; }
.sv-product-collection:not(.is-enhanced) .sv-product-collection__panel + .sv-product-collection__panel { margin-top: 4rem; }
.sv-product-collection.is-enhanced .sv-product-collection__panel:not(.is-active) { display: none; }

/* tether: links the active scene to its module */
.sv-product-collection__panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 1.8rem;
  background: var(--sv-pc-accent);
  transform-origin: top;
  transform: translate3d(calc(var(--px) * 12px), 0, 0);
}
.sv-product-collection__panel::after { content: ""; position: absolute; left: 50%; top: 1.8rem; width: 7px; height: 7px; margin-left: -3px; background: var(--sv-pc-accent); rotate: 45deg; transform: translate3d(calc(var(--px) * 12px), 0, 0); }

/* ghost index (outline numeral) */
.sv-product-collection__ghost {
  position: absolute;
  z-index: 0;
  top: 1.6rem;
  left: 50%;
  margin-left: -0.5em;
  font-size: clamp(6.5rem, 15vw, 13rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(80, 108, 128, 0.22);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  transform: translate3d(calc(var(--px) * -22px), calc(var(--py) * -16px), 0);
  transition: transform 800ms var(--sv-pc-ease);
}
.sv-product-collection__ghost::before { content: attr(data-index); }

.sv-product-collection__panel-head,
.sv-product-collection__collections { position: relative; z-index: 1; }
.sv-product-collection__panel-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sv-product-collection__panel-head { max-width: 40rem; margin: 0 auto; }
.sv-product-collection__panel-description { max-width: 38ch; margin: 0 auto; color: var(--sv-pc-muted); line-height: 1.6; }

/* tabs + sliding indicator */
.sv-product-collection__collection-tabs { position: relative; display: none; justify-content: flex-start; gap: 0 clamp(1.1rem, 3vw, 2.2rem); width: max-content; max-width: 100%; margin: 1.1rem auto 0; overflow-x: auto; scrollbar-width: none; }
.sv-product-collection__collection-tabs::-webkit-scrollbar { display: none; }
.sv-product-collection.is-enhanced .sv-product-collection__collection-tabs { display: flex; }
.sv-product-collection__collection-tabs[hidden] { display: none !important; }
.sv-product-collection__collection-tab { position: relative; flex: 0 0 auto; min-height: 44px; margin: 0; padding: 0.55rem 0.1rem; border: 0; border-bottom: 1px solid var(--sv-pc-line); background: none; color: var(--sv-pc-muted); font: inherit; font-size: 0.95rem; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 300ms ease, transform 300ms var(--sv-pc-ease); }
.sv-product-collection__collection-tab[aria-selected="true"] { color: var(--sv-pc-ink); }
.sv-product-collection__collection-tabs:not([data-indicator="on"]) .sv-product-collection__collection-tab[aria-selected="true"] { border-bottom-color: var(--sv-pc-accent); }
.sv-product-collection__indicator { position: absolute; left: 0; bottom: 0; width: var(--ind-w, 0px); height: 2px; background: var(--sv-pc-accent); opacity: 0; transform: translate3d(var(--ind-x, 0px), 0, 0); transition: transform 640ms var(--sv-pc-ease), width 640ms var(--sv-pc-ease), opacity 300ms ease; pointer-events: none; }
.sv-product-collection__indicator::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 6px; height: 6px; background: var(--sv-pc-accent); }
.sv-product-collection__collection-tabs[data-indicator="on"] .sv-product-collection__indicator { opacity: 1; }

/* tilted outline planes (hero language) + pointer light */
.sv-product-collection__collections { width: min(1120px, 100%); margin: 1.5rem auto 0; padding: 0.5rem 0 0.25rem; touch-action: pan-y; }
.sv-product-collection__collections::before,
.sv-product-collection__collections::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid var(--sv-pc-plane);
  pointer-events: none;
  transition: transform 800ms var(--sv-pc-ease);
}
.sv-product-collection__collections::before {
  inset: -2.2rem 2% -1.4rem -5%;
  background:
    radial-gradient(circle 24rem at var(--mx) var(--my), rgba(255, 255, 255, 0.5), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.06));
  transform: translate3d(calc(var(--px) * 14px), calc(var(--py) * 10px), 0) rotate(-2.4deg);
}
.sv-product-collection__collections::after {
  inset: -0.6rem -6% -2.6rem 14%;
  transform: translate3d(calc(var(--px) * -10px), calc(var(--py) * -8px), 0) rotate(2deg);
}
.sv-product-collection.is-enhanced .sv-product-collection__collection:not(.is-active) { display: none; }
.sv-product-collection:not(.is-enhanced) .sv-product-collection__collection + .sv-product-collection__collection { margin-top: 3rem; }
.sv-product-collection__collection { position: relative; text-align: center; }

@media (max-width: 767px) {
  .sv-product-collection__panel { padding-top: 2.1rem; }
  .sv-product-collection__panel::before { height: 1.5rem; }
  .sv-product-collection__panel::after { top: 1.5rem; }
  .sv-product-collection__ghost { top: 1.3rem; font-size: 6.4rem; }
  .sv-product-collection__panel-description { font-size: 0.92rem; max-width: 30ch; }
  /* tabs: edge-to-edge scroller with snap and a fade, not a centred shrink of the desktop row */
  .sv-product-collection__collection-tabs { justify-content: safe center; width: calc(100% + 2rem); max-width: none; margin: 0.9rem -1rem 0; padding: 0 1rem; gap: 0 1.5rem; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .sv-product-collection__collection-tab { scroll-snap-align: center; }
  .sv-product-collection__collections { margin-top: 1.4rem; }
  .sv-product-collection__collections::before { inset: -1.4rem -0.4rem -1rem -0.4rem; }
  .sv-product-collection__collections::after { inset: -0.4rem -0.8rem -1.6rem 8%; }
}