/* ==========================================================================
   PoshPromo — landing page media (js/media.js + js/closet-sync.js)
   The page's videos and interactive stages: the hero story card and "Watch with sound",
   the phone-framed step loops, the closetSync relay (step 02), the BEFORE / AFTER slider
   (step 04), the Apply & Restore film section, the cover wall in #bulk, and the lightbox.
   The lab-only looks (hero wall / film / phone video, the Variants panel) are css/variants.css.
   ========================================================================== */

/* ---- Loop helper ------------------------------------------------------ */
.vx-loop { position: relative; width: 100%; height: 100%; }
.vx-loop__video { display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; }

/* The pause / play toggle (WCAG 2.2.2) — small, quiet until hovered or focused. */
.vx-toggle {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(36, 16, 25, 0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0.72; transition: opacity .2s ease, transform .2s ease;
}
.vx-toggle svg { width: 15px; height: 15px; }
.vx-toggle:hover, .vx-toggle:focus-visible { opacity: 1; }
.vx-toggle:active { transform: scale(.94); }
.vx-toggle[hidden] { display: none; }
.vx-toggle--onpink { background: rgba(255, 255, 255, 0.22); }

/* ---- Placeholder while media loads ---------------------------------------
   Until a loop's poster or first frame has painted (media.js adds .is-painted), its box shows the
   footage's own background — the app's light grey (#F2F2F7) or the blush tint — with a very soft
   shimmer, never a black slab. The video stays invisible until then, except the hero story's
   (`--eager`: its poster is in the markup and preloaded, so it is the first paint). */
.vx-ph { background-color: #F2F2F7; }
.vx-ph--blush { background-color: var(--tint); }
.vx-ph::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 70%) no-repeat;
  background-size: 220% 100%; animation: vxShimmer 1.8s ease-in-out infinite;
}
.vx-ph.is-painted::before { display: none; }
.vx-ph:not(.vx-ph--eager):not(.is-painted) > .vx-loop__video { opacity: 0; }
.vx-ph > .vx-loop__video { position: relative; transition: opacity .25s ease; }
@keyframes vxShimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .vx-ph::before { animation: none; background: none; } }

/* ---- Phone frame (beat stages): the hero phone, scaled 250/340 -------- */
.vx-phone { width: min(250px, 62vw); }
.vx-phone .phone__frame { border-radius: 46px; padding: 9px; }   /* follows the footage-fitted screen corner below */
.vx-phone .phone__island { top: 16px; width: 70px; height: 19px; }
/* The footage keeps the device's own screen corner (~13.7 % of its width) and fills outside it with
   a blur of itself; a screen radius a touch LARGER than that clips the fill away (a smaller one leaves
   a pale / pink crescent at the corners). Elliptical %, so it holds at every phone width. */
.vx-phone .phone__screen,
#phoneScreen-vx {
  /* object-fit: cover also crops ~1.3 % off the top and bottom, which pushes the footage's corner
     arcs ~3 px past ours: hence the taller vertical radius. clip-path because Chromium can let a
     playing video escape an elliptical overflow clip. */
  border-radius: 17% / 7.4%;
  clip-path: inset(0 round 17% / 7.4%);
}
.phone__screen > .vx-loop { position: absolute; inset: 0; }
.phone__screen .vx-toggle { right: 16px; bottom: 18px; }

/* ---- Hero: the Weekend Sale story video as a 9:16 card in the phone's column ---- */
/* The card carries the site's shadow; its inner clip carries the radius (a clip-path would cut the
   shadow off, and WebKit can let a playing video escape a plain overflow clip). */
.vx-story {
  position: relative; width: min(320px, 70vw); aspect-ratio: 9 / 16;
  border-radius: 28px; background: var(--tint); box-shadow: var(--shadow-card);
}
.vx-story__clip { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; clip-path: inset(0 round 28px); }
.vx-story__sound {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 10px;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-round); font-weight: 800; font-size: 13.5px; color: #fff;
  background: rgba(36, 16, 25, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.vx-story__sound svg { width: 17px; height: 17px; }
.vx-story__sound:hover { background: rgba(36, 16, 25, 0.7); }
.vx-story__sound[aria-pressed="true"] { background: var(--splash); }
@media (max-width: 880px) { .vx-story { width: min(260px, 70vw); } }

/* "Watch with sound" under the hero CTAs */
.vx-watch { margin: 18px 0 0; }
.vx-watch__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 4px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-round); font-weight: 800; font-size: 15.5px; color: var(--deep);
}
.vx-watch__icon {
  width: 30px; height: 30px; border-radius: 999px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff; background: var(--splash);
  box-shadow: 0 8px 18px -8px rgba(242, 64, 140, 0.65);
  transition: transform .18s ease;
}
.vx-watch__icon svg { width: 13px; height: 13px; margin-left: 2px; }
.vx-watch__btn:hover .vx-watch__icon { transform: scale(1.08); }
.vx-watch__btn:hover .vx-watch__label { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Lightbox (the film with sound) ------------------------------------ */
/* The dialog is always the film's own 16:9 box: its WIDTH is capped by the height the viewport can
   spare, so the frame is never wider than the picture. (The cap used to be a max-height on the video:
   on a phone turned to landscape that left an 820 × 273 black box with a 485 px picture in the
   middle.) 120px = the close button above the film (52px) plus 8px, mirrored below. The first
   `width` is for a browser without `svh`: the same cap in `vh`. */
.vx-lightbox {
  width: min(1100px, calc(100vw - 32px), calc((100vh - 120px) * 16 / 9));
  width: min(1100px, calc(100vw - 32px), calc((100svh - 120px) * 16 / 9));
  max-width: none; padding: 0; border: 0;
  background: transparent; overflow: visible;
}
.vx-lightbox::backdrop { background: rgba(20, 8, 14, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vx-lightbox__video {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius); background: #000; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.vx-lightbox__close {
  position: absolute; top: -52px; right: 0; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; color: var(--deep); background: #fff;
}
.vx-lightbox__close svg { width: 18px; height: 18px; }
/* A short, wide viewport (a phone on its side): the film takes the height, and the close button
   moves from above it to beside it, where the screen has room. 120px = the button (52px) plus 8px,
   on both sides so the film stays centred; the safe-area insets keep both clear of the notch.
   Only from 8:5 up: on a short viewport narrower than that (a small phone held upright with the
   browser's bars showing, a split-screen half) the width is the limit, and giving 120px of it to
   the button would only make the film smaller. */
@media (max-height: 500px) and (min-aspect-ratio: 8/5) {
  .vx-lightbox {
    width: min(calc(100vw - 120px), calc((100vh - 48px) * 16 / 9));
    width: min(calc(100vw - 120px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), calc((100svh - 48px) * 16 / 9));
  }
  .vx-lightbox__close { top: 0; right: -52px; }
}

/* ---- Step 02: the closetSync relay card on the beat stage ------------- */
.vx-sync { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* The onboarding page's own splash (P.primary → P.deep), as a card the size of a beat stage. */
.vx-sync__card {
  position: relative; width: min(440px, 84vw); aspect-ratio: 1 / 1;
  border-radius: 34px; background: var(--splash); box-shadow: var(--shadow-card);
  overflow: hidden;
  clip-path: inset(0 round 34px);
}
.vx-sync__caption {
  margin: 0; font-family: var(--font-round); font-weight: 750; font-size: 15px;
  color: var(--muted); text-align: center;
}

/* ---- closetSync scene (geometry is set by closet-sync.js in px of `side`) */
/* The scene is the Swift view's `side × side` square; its content sits high in that square
   (the app shows copy under it), so it is nudged down 4 % to centre in the card. */
/* The scene fills the card's WIDTH (the binding side: the pile, the stations and the end ripples
   span ±0.51·side), as it fills the phone width in PoshRelist; its content sits high in the square
   (the app shows copy under it), so it is nudged down to centre. ≥ 900 px the card is 4:3 and as
   wide as the beat column (a ~1.2× larger scene, no empty band); below, the stage's square. */
.cs { position: absolute; left: 50%; top: 50%; width: 97%; transform: translate(-50%, -50%) translateY(3.5%); pointer-events: none; }
@media (min-width: 900px) {
  .beat__stage > .vx-mount--relay { justify-self: stretch; width: 100%; }
  .vx-sync { width: 100%; }
  .vx-sync__card { width: min(520px, 100%); aspect-ratio: 4 / 3; }
  .cs { transform: translate(-50%, -50%) translateY(2.5%); }
}
.cs__scene { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.cs__scene > *, .cs__backdrop > * { position: absolute; left: 50%; top: 50%; will-change: transform; }
.cs__backdrop { position: absolute; inset: 0; }
.cs-glow { border-radius: 50%; }
.cs-ghost {
  display: flex; flex-direction: column; gap: 7px; padding: 10px;
  border-radius: 16px; background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.cs-ghost__photo { border-radius: 8px; background: rgba(255, 255, 255, 0.09); }
.cs-ghost__line { height: 3px; border-radius: 999px; }
.cs-ghost__line--a { background: rgba(255, 255, 255, 0.16); }
.cs-ghost__line--b { background: rgba(255, 255, 255, 0.10); }
.cs-sparkle { color: #fff; }
.cs-sparkle svg { display: block; width: 100%; height: 100%; }
.cs-sparkle--a { opacity: 0.55; }
.cs-sparkle--b { opacity: 0.35; }

.cs-dot { width: var(--cs-dot); height: var(--cs-dot); border-radius: 50%; background: #fff; }

.cs-photo {
  width: calc(var(--cs-photo) * 1.1); height: calc(var(--cs-photo) * 1.1);
  padding: calc(var(--cs-photo) * 0.05);
  border-radius: calc(var(--cs-photo) * 0.21); background: #fff;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.25);
}
.cs-photo__clip { position: relative; width: 100%; height: 100%; border-radius: calc(var(--cs-photo) * 0.16); overflow: hidden; }
.cs-photo__clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.cs-photo[data-shoe="0"] img:nth-child(1),
.cs-photo[data-shoe="1"] img:nth-child(2),
.cs-photo[data-shoe="2"] img:nth-child(3) { opacity: 1; }

.cs-ripple {
  width: var(--cs-card); height: var(--cs-card); border-radius: calc(var(--cs-card) * 0.22);
  box-shadow: inset 0 0 0 2px #fff;
}
.cs-station {
  width: var(--cs-card); height: var(--cs-card); border-radius: calc(var(--cs-card) * 0.22);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.cs-station::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}
.cs-station img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.cs-station--posh { background: #fff; padding: calc(var(--cs-card) * 0.22); }
.cs-station--posh img { object-fit: contain; border-radius: 0; }
.cs-caption {
  font-family: var(--font-body); font-weight: 800; font-size: var(--cs-caption);
  line-height: 1.25; letter-spacing: 1.2px; white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
}

.cs-badge { transform: translateX(-100%); }
.cs-badge__pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: #3D9E57; border: 2px solid #fff; color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  font-family: var(--font-body); font-weight: 800; font-size: 12px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cs-badge__check { display: grid; place-items: center; left: 0; right: 0; top: 0; bottom: 0; }
.cs-badge__check svg { width: 11px; height: 11px; }
.cs-badge__num { display: inline-flex; left: 0; right: 0; top: 0; bottom: 0; align-items: center; justify-content: center; }
.cs-digit { position: relative; display: inline-block; overflow: hidden; height: 14px; line-height: 14px; }
.cs-digit__new { display: block; }
.cs-digit__old { position: absolute; left: 0; top: 0; }

/* ---- Apply & Restore film section (wide poster ≥ 701 px; the silent square below) ---- */
.vx-film { padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); }
.vx-film__intro { text-align: center; max-width: 820px; margin: 0 auto 36px; display: flex; flex-direction: column; align-items: center; }
.vx-film__intro .section-sub { margin: 0 auto; }
.vx-film__frame {
  position: relative; width: 100%; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9;
  border-radius: 28px; overflow: hidden; background: var(--tint); box-shadow: var(--shadow-card);
  clip-path: inset(0 round 28px);
}
.vx-film__frame--square { max-width: 560px; aspect-ratio: 1 / 1; }
.vx-film__poster {
  position: absolute; inset: 0; padding: 0; border: 0; margin: 0; cursor: pointer;
  background: none; display: block; width: 100%; height: 100%;
}
.vx-film__poster:focus-visible { outline-offset: -6px; border-radius: 28px; }
.vx-film__still, .vx-film__player { display: block; width: 100%; height: 100%; object-fit: cover; }
.vx-film__player { object-fit: contain; background: #000; position: relative; z-index: 1; }   /* above the frame's placeholder */
.vx-film__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 999px; display: grid; place-items: center;
  color: #fff; background: var(--splash);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.45), 0 22px 50px -12px rgba(219, 13, 97, 0.7);
  transition: transform .2s cubic-bezier(.2, .9, .3, 1.3);
}
.vx-film__play svg { width: 36px; height: 36px; margin-left: 5px; }
.vx-film__poster:hover .vx-film__play { transform: translate(-50%, -50%) scale(1.07); }
.vx-film__label {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-round); font-weight: 800; font-size: 14px; color: var(--deep);
  background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-soft);
}
.vx-film__sound { display: flex; justify-content: center; margin-top: 22px; }
.vx-film__soundbtn { gap: 10px; }
.vx-film__soundicon svg { display: block; width: 14px; height: 14px; }
@media (max-width: 700px) {
  .vx-film__play { width: 70px; height: 70px; }
  .vx-film__play svg { width: 28px; height: 28px; }
  .vx-film__label { display: none; }   /* the poster is ~190 px tall here: the button alone (its aria-label says it) */
  .vx-film__frame { border-radius: 22px; clip-path: inset(0 round 22px); }
}

/* Which film frame shows: the wide poster above 700 px, the square loop (+ "Play with sound") at or
   below; the lab's film=section-square / section-weekend force one. The hidden one loads nothing. */
.vx-film__square { display: none; }
@media (max-width: 700px) {
  .vx-film:not(.vx-film--wide) .vx-film__frame--wide { display: none; }
  .vx-film:not(.vx-film--wide) .vx-film__square { display: block; }
}
.vx-film--square .vx-film__frame--wide { display: none; }
.vx-film--square .vx-film__square { display: block; }

/* ---- #bulk: the cover wall in place of the grid placeholder ------------- */
/* home.css draws the placeholder `display: grid`, which would beat its `hidden` attribute. */
.bulk__grid-placeholder[hidden] { display: none; }
.vx-bulk {
  position: relative; width: 100%; max-width: 1000px; margin: 0 auto 34px; aspect-ratio: 16 / 9;
  border-radius: 24px; overflow: hidden; background: var(--tint); box-shadow: var(--shadow-card);
  clip-path: inset(0 round 24px);
}

/* ---- Step 04: the BEFORE / AFTER closet slider -------------------------- */
.vx-ba { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.vx-ba__stage {
  width: min(440px, 84vw); padding: clamp(14px, 5%, 24px);
  border-radius: 34px; background: var(--splash); box-shadow: var(--shadow-card);
}
.vx-ba__card {
  --x: 0%;
  position: relative; width: 100%; aspect-ratio: 880 / 800;
  border-radius: 18px; background: #fafafa; overflow: hidden;
  clip-path: inset(0 round 18px); box-shadow: 0 14px 30px -14px rgba(36, 16, 25, 0.5);
  touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.vx-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.vx-ba__after { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.vx-ba__handle {
  position: absolute; top: 0; bottom: 0; left: clamp(28px, var(--x), calc(100% - 28px)); width: 48px; margin-left: -24px;
  display: grid; place-items: center; outline: none; z-index: 2;
}
.vx-ba__line {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; z-index: 1; pointer-events: none;
  background: #fff; box-shadow: 0 0 0 1px rgba(36, 16, 25, 0.06), 0 0 14px rgba(36, 16, 25, 0.28);
}
.vx-ba__knob {
  position: relative; width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center; color: #fff; background: var(--splash);
  box-shadow: 0 0 0 3px #fff, 0 10px 24px -6px rgba(219, 13, 97, 0.6);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.3);
}
.vx-ba__knob svg { width: 22px; height: 22px; }
.vx-ba__card:hover .vx-ba__knob, .vx-ba__card.is-dragging .vx-ba__knob { transform: scale(1.08); }
.vx-ba__handle:focus-visible .vx-ba__knob { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--accent), 0 10px 24px -6px rgba(219, 13, 97, 0.6); }
.vx-ba__pill .pp-seg { border: 0; background: none; cursor: pointer; }