/* ─── LootStories ─ Instagram-style stories: avatar row → crossfade open →
   cube-fold snap scroller → pull-down dismiss. All classes st- prefixed.
   Fonts inherit from the host page on purpose (surgery-friendly). ─── */

/* ── Trigger row (IG-style: gradient rings, centered over the feed) ── */
.st-shell { position: relative; }

.st-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 14px 16px 10px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain; /* row swipe must never become a Safari back-swipe */
  -webkit-overflow-scrolling: touch;
}
.st-row::-webkit-scrollbar { display: none; }

/* unconditional: Joe's desktop browser drew its focus square even for
   plain mouse taps, straight through :focus-visible filtering */
.st-ava:focus, .st-x:focus, .st-arrow:focus, .st-rnav:focus { outline: none; }

.st-ava {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
}
/* the IG story ring: gradient circle, white gap, photo inside */
.st-ava-ring {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
  transition: transform .15s ease;
}
.st-ava:active .st-ava-ring { transform: scale(.94); }
.st-ava-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2.5px solid #fff;
  object-fit: cover;
  display: block;
  pointer-events: none;
  background: #eee;
}
.st-ava-name {
  font-size: 12px;
  font-weight: 500;
  color: #111;
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── the YOU slot — glowing first circle, wired to the Make Yours flow.
   COMPOSITOR-ONLY animation: the ring spins via a transform on a pseudo
   (never repaints), the halo is a static shadow, the name a static gradient.
   The first build animated conic/box-shadow/filter — that repainted the
   fixed header at 60fps and made the whole phone feel heavy. Never go back. ── */
.st-you {
  position: relative;
  isolation: isolate; /* keeps the -1 halos inside this button's stacking */
}
/* the splash Enter button's purple/pink emanation, ported compositor-only:
   two solid discs behind the ring, scale-breathing in counter-phase (the
   Enter original animates box-shadow spread = per-frame paint; scale isn't) */
.st-you::before,
.st-you::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  left: 50%;
  top: 33px; /* ring center (ring is the button's first child) */
  margin: -33px 0 0 -33px;
  background: var(--st-halo, #ff2d95);
  /* no bottom fade: the glow continues down and pools into the YOU bubble */
  transform: scale(1.16);
  animation: st-you-halo 2.6s ease-in-out infinite;
}
.st-you::before { --st-halo: #ff2d95; }
.st-you::after  { --st-halo: #7b3ff2; animation-delay: 1.3s; }
@keyframes st-you-halo {
  0%, 100% { transform: scale(1.08); }
  50%      { transform: scale(1.32); }
}
.st-you .st-ava-ring {
  position: relative;
  overflow: hidden; /* clips the rotating gradient square to the ring circle */
  background: conic-gradient(#f09433, #ff5a96, #dc2743, #bc1888, #8134af, #7b3ff2, #f09433);
}
.st-you .st-ava-ring::before {
  content: '';
  position: absolute;
  inset: -25%;
  background: conic-gradient(#f09433, #ff5a96, #dc2743, #bc1888, #8134af, #7b3ff2, #f09433);
  animation: st-you-rot 2.8s linear infinite;
}
@keyframes st-you-rot { to { transform: rotate(360deg); } }
.st-you-face {
  position: relative;
  z-index: 1; /* above the ring's rotating gradient pseudo */
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2.5px solid #fff;
  background: radial-gradient(circle at 32% 26%, #fff 0%, #ffe9f2 48%, #f1e6ff 100%);
  display: grid;
  place-items: center;
  color: #111;
  /* the face is the clipper: iOS won't reliably round-clip a <video> layer
     on the video itself, so clip here and force a composited clip */
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.st-you-face img,
.st-you-face video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.st-you-face svg { width: 24px; height: 24px; display: block; }
/* the name is a filled gradient bubble the halo pours into — white ink */
.st-you .st-ava-name {
  font-weight: 800;
  color: #fff;
  background: linear-gradient(45deg, #ff5a96, #ff2d95 45%, #7b3ff2);
  padding: 2px 10px 3px;
  border-radius: 999px;
  margin-top: -3px; /* tuck the bubble up into the glow so they read connected */
  overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
  .st-you .st-ava-ring::before, .st-you::before, .st-you::after { animation: none; }
}

/* row paging chevrons (desktop only) */
.st-rnav {
  position: absolute;
  z-index: 2;
  top: 47px; /* center of the ring: row padding-top + ring/2 */
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: 0 1px 6px rgba(17, 17, 17, .28);
  color: #111;
  cursor: pointer;
  display: none;
  place-items: center;
  padding: 0;
}
.st-rnav svg { width: 14px; height: 14px; display: block; }
.st-rprev { left: 2px; }
.st-rnext { right: 2px; }

/* desktop: exactly 6 rings visible, centered over the feed column */
@media (hover: hover) and (min-width: 768px) {
  .st-shell { max-width: 600px; margin: 0 auto; } /* 6×78 + 5×20 + 2×16 padding */
  .st-row { gap: 20px; padding: 16px 16px 12px; } /* 16px sides: the YOU halo breathes ~15px past the ring */
  .st-ava-ring { width: 78px; height: 78px; padding: 3px; }
  .st-ava-ring img, .st-you-face { border-width: 3px; }
  .st-you::before, .st-you::after { width: 78px; height: 78px; top: 39px; margin: -39px 0 0 -39px; }
  .st-ava-name { max-width: 84px; }
  .st-rnav { top: 55px; }
  .st-rnav[data-on] { display: grid; }
}

/* ── Overlay root ── */
.st-root {
  position: fixed;
  inset: 0;
  /* above all homepage chrome (≤100050), below splash/rotate-lock (≥999999) */
  z-index: 200000;
  display: none;
  /* one card size everywhere: 9:16, 82% of the small viewport height,
     capped so it never exceeds ~92vw on narrow screens */
  --st-h: min(82svh, 163vw);
  --st-w: calc(var(--st-h) * 9 / 16);
}
.st-root.st-on { display: block; }
html.st-lock, html.st-lock body { overflow: hidden; }

/* light veil — page stays faintly readable behind it, like the reference */
.st-veil {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .93);
  opacity: 0;
  transition: opacity .38s ease;
}
.st-root.st-in .st-veil { opacity: 1; }

/* .st-tilt owns the cube-fold transform; the black .st-panel lives INSIDE it,
   so the black rotates with the card and can never escape its silhouette.
   Its squarer corners are what fills the crevices the cards' rounded corners
   open at the seam. Opacity is scroll-driven: invisible at rest. */
.st-tilt {
  position: relative;
  width: var(--st-w);
  height: var(--st-h);
  will-change: transform;
}
.st-panel {
  position: absolute;
  inset: 0;
  /* fully square: any radius here reopens a white pinhole at the seam */
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* ── Snap scroller ── */
.st-scroller {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* slides are CARD-width; this padding centers the first/last card,
     and slide N settles exactly at scrollLeft = N * cardWidth */
  padding-inline: calc(50% - var(--st-w) / 2);
  /* pan-x: browser owns horizontal, JS owns vertical (pull-down dismiss).
     contain: no rubber-band leak, no Safari back/forward, no pull-to-refresh. */
  touch-action: pan-x;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.st-scroller::-webkit-scrollbar { display: none; }

/* Slides are exactly card-width so adjacent cards BUTT at the fold seam
   (the cube illusion). At rest, neighbors sit at 90° — edge-on, invisible. */
.st-slide {
  flex: none;
  width: var(--st-w);
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always; /* one page per fling, like IG */
  display: grid;
  place-items: center;
  perspective: 1300px; /* the cube fold's vanishing point, per slide */
}

.st-card {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
}
/* The cube fold itself is attached from JS as a compositor-driven
   ViewTimeline animation (keyframe offsets depend on viewport/card ratio),
   with a scroll-event fallback where ViewTimeline is unsupported. */

/* FLIP flight (open/close): the real card goes fixed and flies between the
   avatar circle and its resting slot. */
.st-card.st-flying {
  position: fixed;
  z-index: 6;
  margin: 0;
}

/* ── Card layers ── */
.st-back, .st-vid, .st-fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-back { z-index: 1; } /* poster backstop: a decode hiccup shows a frame, never black */
.st-vid  { z-index: 2; }
.st-fade { z-index: 5; display: none; } /* crossfade layer used only during flights */

.st-shade {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; top: 0;
  height: 96px;
  background: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.st-ticks {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  pointer-events: none;
}
.st-tick {
  flex: 1;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .38);
}
.st-tick.on { background: #fff; }

.st-head {
  position: absolute;
  z-index: 4;
  top: 21px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  pointer-events: none;
}
.st-head img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.st-head b { font-size: 13px; font-weight: 700; }
.st-head span { font-size: 13px; color: rgba(255, 255, 255, .85); }

.st-x {
  position: absolute;
  z-index: 4;
  top: 13px;
  right: 6px;
  width: 42px;
  height: 42px;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.st-x svg { width: 20px; height: 20px; display: block; }

/* per-card chrome appears only once the viewer has settled open */
.st-ticks, .st-head, .st-x {
  opacity: 0;
  transition: opacity .25s ease;
}
.st-root.st-set .st-ticks,
.st-root.st-set .st-head,
.st-root.st-set .st-x { opacity: 1; }

/* ── Fixed chrome (outside the fold) ── */
.st-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .14);
  box-shadow: 0 2px 10px rgba(17, 17, 17, .10);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #111;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.st-arrow svg { width: 18px; height: 18px; display: block; }
.st-prev { left: calc(50% - var(--st-w) / 2 - 74px); }
.st-next { right: calc(50% - var(--st-w) / 2 - 74px); }
.st-root.st-set .st-arrow { opacity: 1; pointer-events: auto; }
.st-root.st-set .st-arrow[disabled] { opacity: .3; pointer-events: none; }
@media (hover: none), (max-width: 760px) {
  .st-arrow { display: none; }
}

.st-counter {
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  top: calc(50% + var(--st-h) / 2 + 14px);
  /* solid pill: must stay readable on the light veil AND the mid-turn black */
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 6px rgba(17, 17, 17, .15);
  color: #111;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.st-root.st-set .st-counter { opacity: 1; }