/*
 * UFC Analytics — Story Kit choreography patterns
 * Battle-tested scroll mechanics as reusable classes. Stories compose these
 * and supply only the per-story creative decisions (cue points, card skin,
 * stage backdrop). Do NOT re-implement these mechanics per story.
 *
 * PATTERN: pinned scene with individually-cued cards
 * ───────────────────────────────────────────────────
 * <section class="pin-scene">            ← tall; pins its stage; owns --scene timeline
 *   <div class="pin-stage">              ← sticky 100svh: graphic + rail-clip
 *     <svg>…<path class="draw-path …">   ← needs pathLength="100"; draws contain 0-90%
 *     <div class="rail-clip">            ← clips flying cards
 *       <div class="cue-cards">
 *         <div class="cue-card" style="animation-range: contain 6% contain 18%">…
 *         <div class="cue-card" style="animation-range: contain 46% contain 58%">…
 *
 * Per-story decisions:
 *  - Cue ranges: inline animation-range per card. For a drawing line, compute
 *    cues from CUMULATIVE PATH LENGTH at the landmark x-positions, never by
 *    x-distance (jagged data can eat half the path). Cue span ~12%.
 *  - .cue-reveal for annotations (inline animation-range likewise).
 *  - --pin-length on .pin-scene (default 240svh; anti-jank cap is 250svh).
 *  - --card-stack-bg: OPAQUE color for the mobile stack (defaults to --card).
 *
 * Behaviour: desktop rests cards side by side; <768px each card lands exactly
 * on top of the previous (identical rect, stretched height, opaque — no
 * offsets, no rotation). Browsers without scroll timelines get a fully-drawn
 * graphic and a swipeable snap rail instead of the pin.
 */

/* ── Layout (all browsers) ── */
.pin-stage{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.5rem; padding:1.5rem 0;
}
.pin-graphic, .pin-stage > svg{ width:min(64rem,94vw); height:auto; flex:none; }
.rail-clip{ width:100%; overflow:hidden; }
.cue-cards{ display:flex; gap:1rem; justify-content:center; width:100%; padding:0 2vw .5rem; }
.cue-card{ flex:0 1 24rem; display:block; --rest:translateX(0); }
@media (max-width:767px){
  .cue-cards{ display:grid; align-items:stretch; justify-items:center; padding:0 1rem .5rem; }
  .cue-card{ grid-area:1/1; width:min(86vw,24rem); }
  .cue-card > *{ height:100%; box-sizing:border-box;
    background:var(--card-stack-bg, var(--card)); backdrop-filter:none; }
}

/* ── Pinned choreography (scroll-timeline browsers) ── */
@supports (animation-timeline: view()){
  .pin-scene{ position:relative; height:var(--pin-length, 240svh); view-timeline:--scene block; }
  .pin-stage{ position:sticky; top:0; height:100svh; }
  .draw-path{ stroke-dasharray:100; stroke-dashoffset:100;
    animation:sk-drawline linear both; animation-timeline:--scene;
    animation-range:contain 0% contain 90%; }
  .cue-card{ animation:sk-cardin linear both; animation-timeline:--scene; }
  .cue-reveal{ opacity:0; animation:sk-fadein linear both; animation-timeline:--scene; }
}
@keyframes sk-drawline{ to{ stroke-dashoffset:0; } }
@keyframes sk-cardin{
  from{ transform:translateX(110vw); opacity:.4; }
  to{ transform:var(--rest); opacity:1; }
}
@keyframes sk-fadein{ to{ opacity:1; } }

/*
 * PATTERN: fighter cutout with wrapped prose
 * ──────────────────────────────────────────
 * A transparent full-body PNG runs large, floated, with the text wrapping the
 * fighter's actual silhouette. Glow follows the story's theme (--primary-glow).
 *
 * <div class="cutout-wrap">
 *   <img class="figure-cutout" src="/stories/<slug>/assets/cutout-….png"
 *        style="shape-outside:url('/stories/<slug>/assets/cutout-….png')"
 *        alt="…" loading="lazy">
 *   <p>…prose wraps the silhouette…</p>
 * </div>
 *
 * Per-figure: the inline shape-outside (MUST repeat the img src — CSS cannot
 * read it — and must be same-origin, so always the mirrored local asset).
 * Add .cutout-left to float the figure left instead of right.
 * Mobile: figure stands centered above the prose; no wrap.
 */
.cutout-wrap{ position:relative; }
.cutout-wrap p{ max-width:65ch; line-height:1.7; }
.cutout-wrap::after{ content:""; display:block; clear:both; }
.figure-cutout{
  display:block; width:100%; max-width:22rem; margin:0 auto 1.5rem;
  filter:drop-shadow(0 0 70px var(--primary-glow)) drop-shadow(0 24px 48px rgba(0,0,0,.65));
}
@media (min-width:768px){
  .figure-cutout{
    float:right; width:min(42vw, 28rem); max-width:none; margin:0 -2vw 1rem 1.5rem;
    shape-image-threshold:.2; shape-margin:1.5rem;
  }
  .figure-cutout.cutout-left{ float:left; margin:0 1.5rem 1rem -2vw; }
}

/*
 * PATTERN: history plate — a newspaper front page from the era
 * ────────────────────────────────────────────────────────────
 * "The first time it happened" presented as an aged newsprint clipping pasted
 * onto the dark page: masthead, dateline, condensed banner headline, italic
 * deck, justified two-column serif body with column rules, photo multiplied
 * into the paper (auto black-and-white). Honesty stays in the artifact: the
 * masthead is our own "Archive Edition", the dateline carries the REAL event
 * date/location, and an editor's-note footnote carries any data caveat.
 *
 * <aside class="history-plate">
 *   <p class="np-masthead">UFC Analytics · Archive Edition</p>
 *   <div class="np-dateline"><span>Denver, Colorado</span><span>March 11, 1994</span><span>25¢</span></div>
 *   <h3 class="np-headline">GRACIE DRAGS PARDOEL TO THE FLOOR</h3>
 *   <p class="np-deck">Italic sub-deck setting the scene…</p>
 *   <figure class="np-photo"><img src="…"><figcaption>…</figcaption></figure>
 *   <div class="np-body"><p>…</p><p>…</p></div>
 *   <p class="np-footnote">Editor's note: first *recorded* — …</p>
 * </aside>
 */
.history-plate{
  max-width:46rem; margin:3.5rem auto; padding:1.5rem 1.75rem 1.75rem;
  background:linear-gradient(160deg, #ece5d3, #ded6c1);
  color:#151310;
  transform:rotate(-0.6deg);
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 0 70px rgba(120,100,60,.16);
  font-family:Georgia, "Times New Roman", serif;
}
.history-plate .np-masthead{
  font-family:var(--font-display); font-weight:900; font-stretch:118%;
  text-transform:uppercase; text-align:center; letter-spacing:.06em;
  font-size:clamp(1.1rem, 3.2vw, 1.7rem); color:#151310;
  border-bottom:2.5px solid #151310; padding-bottom:.4rem; margin:0 0 .3rem;
}
.history-plate .np-dateline{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:#33302a;
  border-bottom:1px solid #151310; padding-bottom:.35rem; margin-bottom:1.1rem;
}
.history-plate .np-headline, .history-plate h3{
  font-family:var(--font-display); font-weight:900; font-stretch:82%;
  text-transform:uppercase; line-height:.95; letter-spacing:-.01em; text-align:left;
  font-size:clamp(1.9rem, 6vw, 3.4rem); margin:0 0 .6rem; color:#151310;
}
.history-plate .np-deck{
  font-style:italic; font-size:1.02rem; line-height:1.45; color:#33302a;
  border-bottom:1px solid rgba(21,19,16,.35); padding-bottom:.75rem; margin:0 0 1rem;
}
.history-plate .np-photo{
  float:right; width:min(11rem, 42%); margin:0 0 .6rem 1.1rem;
  border:1px solid #151310; padding:3px; background:#f4efe2;
}
.history-plate .np-photo figcaption{
  font-size:.62rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.3rem .1rem 0; color:#33302a;
}
.history-plate img{
  display:block; width:100%;
  filter:grayscale(1) contrast(1.3) brightness(1.05) !important;
  mix-blend-mode:multiply;
}
.history-plate .np-body{
  font-size:.9rem; line-height:1.55; text-align:justify; hyphens:auto;
  column-gap:1.5rem; column-rule:1px solid rgba(21,19,16,.3);
}
@media (min-width:640px){ .history-plate .np-body{ columns:2; } }
.history-plate .np-body p{ margin:0 0 .7rem; color:#1d1a15; }
.history-plate .np-body p:first-child::first-letter{
  font-family:var(--font-display); font-weight:900; color:#151310;
  font-size:2.7em; float:left; line-height:.8; padding:.04em .1em 0 0;
}
.history-plate .np-footnote{
  clear:both; margin:1rem 0 0; padding-top:.5rem;
  border-top:1px solid rgba(21,19,16,.35);
  font-size:.72rem; font-style:italic; color:#4a443a;
}

/* ── Fallback (no scroll timelines): static graphic + swipeable snap rail ── */
@supports not (animation-timeline: view()){
  .pin-scene .rail-clip{ overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .pin-scene .rail-clip::-webkit-scrollbar{ display:none; }
  .pin-scene .cue-cards{ display:flex; width:max-content; justify-content:flex-start; padding:0 6vw .5rem; }
  .pin-scene .cue-card{ flex:0 0 min(24rem,80vw); grid-area:auto; width:auto; scroll-snap-align:center; }
}