/* =========================================================================
   Velaccio — Interactive Story Reel  (reusable, drop-in)
   Stacked-card story/reel carousel with autoplay, drag, progress + diamond nav.
   Scope: everything is prefixed .vsr so it can't collide with the host page.
   Tune the fan via the --vsr-* custom properties on .vsr.
   ========================================================================= */

.vsr-section {
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  text-align: center;
  background: #000;
  overflow: hidden;
}

.vsr-section__inner {
  max-width: 132.8rem;
  /* same content column as the nav / hero */
  margin: 0 auto;
  padding-inline: 1.6rem;
  /* same side gutter as the page content */
  display: flex;
  /* the card stack is ~780px tall: centring the copy against it parked the
     headline halfway down the section. Top-aligned, it reads with the first card. */
  align-items: flex-start;
  gap: clamp(2.4rem, 4vw, 6rem);
  text-align: left;
}

.vsr-section__head {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-top: clamp(.4rem, 1.6vw, 2rem);
  /* optical: line up the cap height with the top card edge */
  position: relative;
  z-index: 200;
  /* text always sits above the card stack */
}

.vsr-title {
  margin: 0;
  font-family: "ABC Gravity Compressed", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .85;
  color: #FFFFFF;
  font-size: clamp(3rem, 9vw, 10rem);
  /* 10rem máx, sin deformar */
}

.vsr-sub {
  margin: clamp(1.6rem, 2vw, 2.4rem) 0 0;
  max-width: 42rem;
  color: rgba(255, 255, 255, .72);
  font-family: "P22 Mackinac", serif;
  /* same style as .s-text */
  font-weight: 400;
  font-size: clamp(1.5rem, 1.3vw, 1.8rem);
  line-height: 1.45;
  text-wrap: pretty;
  text-transform: none;
}

/* ---- Carousel region ---------------------------------------------------- */
.vsr {
  /* Four knobs drive the whole stack; the media queries at the bottom retune
     them per breakpoint. --vsr-fan and --vsr-visible are read back by
     story-reel.js, so the fan geometry stays defined here in one place. */
  --vsr-max: 440px;
  /* width cap. Deliberately px, not rem: this page has a fluid root font-size
     (21.5px at 3440 wide, 9px at 1440), so a rem cap would scale the card with
     viewport width — the exact ultrawide-only behaviour being fixed here. */
  --vsr-vspace: 76svh;
  /* vertical room the card may claim */
  --vsr-fan: .24;
  /* sideways offset per ring, as a fraction of card width */
  --vsr-visible: 3;
  /* rings fanned out on each side */

  /* A 9:16 card is height-limited long before it is width-limited: on a laptop
     440px wide already means 782px tall. Cap by both axes so a short viewport
     shrinks the card instead of clipping it. */
  --vsr-w: min(var(--vsr-max), 92vw, calc(var(--vsr-vspace) * 9 / 16));
  --vsr-h: calc(var(--vsr-w) * 16 / 9);
  --vsr-radius: clamp(12px, calc(var(--vsr-w) * .045), 20px);
  --vsr-ease: cubic-bezier(.16, 1, .3, 1);
  --vsr-dur: .42s;
  position: relative;
  flex: 0 0 auto;
  width: var(--vsr-w);
  /* reserve the card footprint (cards are absolute) */
  margin: 0 clamp(2.4rem, 4vw, 7.2rem) 0 auto;
  /* parked at the right of the content column, with a gutter so the fanned
     side cards never touch the edge */
  outline: none;
}

.vsr:focus-visible {
  outline: none;
}

.vsr:focus-visible .vsr-stage::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 28px;
  box-shadow: 0 0 0 2px rgba(98, 233, 230, .6);
  pointer-events: none;
}

.vsr-stage {
  position: relative;
  height: var(--vsr-h);
  margin-inline: auto;
  touch-action: pan-y;
  /* let the page scroll vertically */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.vsr-stage.is-grabbing {
  cursor: grabbing;
}

/* ---- Card --------------------------------------------------------------- */
.vsr-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--vsr-w);
  height: var(--vsr-h);
  margin-left: calc(var(--vsr-w) / -2);
  border-radius: var(--vsr-radius);
  overflow: hidden;
  background: #100e0d;
  box-shadow: 0 34px 70px -26px rgba(0, 0, 0, .85), 0 2px 8px rgba(0, 0, 0, .4);
  transform-origin: 50% 55%;
  transition:
    transform var(--vsr-dur) var(--vsr-ease),
    opacity var(--vsr-dur) var(--vsr-ease),
    filter var(--vsr-dur) var(--vsr-ease);
  will-change: transform, opacity;
}

.vsr-stage.is-dragging .vsr-card {
  transition: none;
}

.vsr-card.is-active {
  cursor: default;
}

.vsr-media {
  position: absolute;
  inset: 0;
}

.vsr-media img,
.vsr-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* depth scrim on inactive cards (opacity set from JS) */
.vsr-scrim {
  position: absolute;
  inset: 0;
  background: #050404;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--vsr-dur) var(--vsr-ease);
}

/* top + bottom legibility gradients */
.vsr-card::before,
.vsr-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 2;
}

.vsr-card::before {
  top: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent);
}

.vsr-card::after {
  bottom: 0;
  height: 26%;
  background: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent);
}

/* ---- Story chrome ------------------------------------------------------- */
/* The chrome is sized off the card, not the viewport: a 250px card on a phone
   would otherwise wear a 38px avatar and 21px gutters built for a 440px one.
   The max() floors stop that shrinking past legible/tappable on a phone; every
   floor sits below its value at the 440px card, so large screens are untouched. */
.vsr-chrome {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: max(12px, calc(var(--vsr-w) * .048));
  /* same inset on every side */
}

.vsr-head {
  display: flex;
  align-items: center;
  gap: max(8px, calc(var(--vsr-w) * .025));
}

.vsr-avatar {
  flex: none;
  width: max(26px, calc(var(--vsr-w) * .086));
  height: max(26px, calc(var(--vsr-w) * .086));
  border-radius: 50%;
  background: #1c1a19;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.vsr-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
}

/* Sony and Dior ship as black-on-transparent wordmarks; the avatar disc is
   #1c1a19, so they need flipping to white. Ridge and Barebells are already
   white marks and must be left alone. */
.vsr-avatar img.is-inverted {
  filter: invert(1);
}

/* The others are transparent PNGs that float on the disc. An opaque logo (OLS
   ships as a JPEG with its own dark backdrop) has to fill the disc instead —
   inset by the padding above, its square background would show inside the
   circle. Safe only for square, centre-weighted artwork, since the round mask
   crops the corners. */
.vsr-avatar img.is-fill {
  object-fit: cover;
  padding: 0;
}

.vsr-avatar svg {
  width: 55%;
  height: 55%;
}

.vsr-user {
  color: #fff;
  font-family: "Acid Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: max(11px, calc(var(--vsr-w) * .033));
  letter-spacing: -.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.vsr-time {
  color: rgba(255, 255, 255, .7);
  font-size: max(10px, calc(var(--vsr-w) * .0307));
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.vsr-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: max(12px, calc(var(--vsr-w) * .036));
  color: #fff;
}

.vsr-actions svg {
  width: max(16px, calc(var(--vsr-w) * .05));
  height: max(16px, calc(var(--vsr-w) * .05));
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

/* mute/unmute pinned bottom-centre of the card */
.vsr-mute {
  margin: auto auto 0;
  /* horizontally centred, pinned to the bottom */
  width: max(30px, calc(var(--vsr-w) * .105));
  height: max(30px, calc(var(--vsr-w) * .105));
  border: 0;
  border-radius: 50%;
  background: rgba(20, 18, 17, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .25s, transform .25s var(--vsr-ease), opacity .25s;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.vsr-mute:hover {
  background: rgba(30, 28, 27, .8);
  transform: scale(1.06);
}

/* The icon spans are the sized box - a percentage of the button, which has a
   definite width and height - and the svg only fills that box. Sized on the
   svg instead, the percentage had no definite containing block to resolve
   against, since the span shrink-wraps its content, so the glyph fell back to
   the SVG default size and sat off-centre. */
.vsr-mute .vsr-ic-on,
.vsr-mute .vsr-ic-off {
  width: 56%;
  height: 56%;
  line-height: 0;
}

.vsr-mute svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Touch only: the mute is the card's one interactive control, so it keeps a
   comfortable tap target even where scaling with the card would undercut it.
   Applying that floor everywhere made it read chunky on a laptop-sized card
   (13% of the card width against the 9% the 440px card was drawn at). */
@media (pointer: coarse) {
  .vsr-mute {
    width: max(40px, calc(var(--vsr-w) * .105));
    height: max(40px, calc(var(--vsr-w) * .105));
  }
}

.vsr-mute .vsr-ic-on {
  display: none;
}

.vsr-mute .vsr-ic-off {
  display: block;
}

.vsr-mute.is-on .vsr-ic-on {
  display: block;
}

.vsr-mute.is-on .vsr-ic-off {
  display: none;
}

/* only the active card exposes an interactive mute button */
.vsr-card:not(.is-active) .vsr-mute {
  opacity: 0;
  pointer-events: none;
}

/* ---- Diamond pagination ------------------------------------------------- */
.vsr-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: clamp(2rem, 4vw, 3.2rem);
}

.vsr-dot {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 7px 3px;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 0;
}

.vsr-dot>i {
  display: block;
  width: 2px;
  height: 14px;
  border-radius: 2px;
  background: rgba(244, 239, 233, .34);
  transition:
    width var(--vsr-dur) var(--vsr-ease),
    height var(--vsr-dur) var(--vsr-ease),
    transform var(--vsr-dur) var(--vsr-ease),
    background var(--vsr-dur) var(--vsr-ease);
}

.vsr-dot:hover>i {
  background: rgba(244, 239, 233, .6);
}

.vsr-dot.is-active>i {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: #f4efe9;
  transform: rotate(45deg);
}

.vsr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {

  .vsr-card,
  .vsr-dot>i,
  .vsr-scrim {
    transition-duration: .001ms;
  }
}

/* two columns only while the copy column is wide enough to hold the headline on
   its three authored lines; below that the text stacks over the slider */
@media (min-width: 1240px) {
  .vsr-title {
    /* the <br>s still break it into exactly three lines — this only stops a
       fourth line appearing when the column gets tight */
    white-space: nowrap;
  }
}

/* Below ultrawide the fan no longer has an empty page margin to spill into, so
   the element claims its true fanned footprint and flex reserves the room. At
   2000px and up .vsr stays card-width and right-parked, and the stack overflows
   into the empty gutter — the look this section was designed around. */
@media (max-width: 1999px) {
  .vsr {
    width: min(100%, calc(var(--vsr-w) * (1 + 2 * var(--vsr-fan) * var(--vsr-visible))));
  }
}

/* laptops and standard desktops: the reel is sized well down and docked
   directly beside the copy. Letting the head flex-grow pushed the stack out to
   the far edge of the content column, so the two halves read as unrelated
   blocks separated by dead space. */
@media (min-width: 1240px) and (max-width: 1999px) {
  /* the auto margins below do the horizontal spacing; a flex gap here would sit
     on top of them and shove the stack back toward the copy */
  .vsr-section__inner {
    column-gap: 0;
  }

  .vsr-section__head {
    flex: 0 1 auto;
    /* drop the copy down the shorter card so the two columns read level,
       rather than the headline starting hard against the top edge */
    padding-top: clamp(3rem, 5vw, 8rem);
  }

  .vsr {
    --vsr-max: 320px;
    --vsr-vspace: 62svh;
    --vsr-fan: .2;
    --vsr-visible: 2;
    /* splits the leftover column width evenly either side of the stack */
    margin-inline: auto;
  }
}

@media (max-width: 1239px) {
  .vsr-section__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .vsr-section__head {
    text-align: center;
    padding-top: 0;
  }

  /* stacked: the copy now sits above the cards, so the card gets less height */
  .vsr {
    --vsr-max: 360px;
    --vsr-vspace: 58svh;
    --vsr-fan: .22;
    --vsr-visible: 2;
    margin-inline: auto;
  }

  .vsr-sub {
    margin-left: auto;
    margin-right: auto;
  }
}

/* phones: no room to fan sideways at all — the rings tuck in behind the active
   card and read as a stack rather than as half-cropped neighbours */
@media (max-width: 639px) {
  .vsr {
    --vsr-max: 72vw;
    --vsr-vspace: 52svh;
    --vsr-fan: .15;
    --vsr-visible: 2;
  }

  .vsr-dots {
    gap: 12px;
  }
}