/* =============================================================================
   PAGONI — USES
   Six slides in one deck, pushed through a fixed frame by the scroll.

   The frame never moves. Only the sheets inside it do, which is what makes the
   whole block read as one deck being presented rather than as six cards going
   past a window.
   ============================================================================= */

.uses {
  --bleed: 10vh;
  position: relative;
  padding: 12vh var(--raw-spacing-page);
}

/* Six slides at roughly 62vh of travel each. Enough that a slide holds still
   long enough to be read, not so much that the section feels like a tunnel. */
.uses__scroller { position: relative; height: calc(100vh + var(--cards, 6) * 62vh); }

.uses__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--raw-spacing-md);
  padding-block: 5.5rem 3rem;
}

/* -----------------------------------------------------------------------------
   THE PRESENTER BAR
   ----------------------------------------------------------------------------- */
.uses__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--raw-spacing-md);
  color: var(--foreground-faint);
}
.uses__barLabel { color: var(--accent-text); }
.uses__track {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--raw-ink-050-a08);
  overflow: hidden;
}
.uses__trackFill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--accent-text);
}

/* -----------------------------------------------------------------------------
   THE ROOM
   Agenda down the left, the deck frame filling the rest.
   ----------------------------------------------------------------------------- */
.uses__room {
  max-width: 78rem;
  margin-inline: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--raw-spacing-lg);
  align-items: center;
}

/* --- the agenda -------------------------------------------------------------
   The contents page of the deck, running down the side the way a section list
   does on a real template. It is also the navigation.
   ---------------------------------------------------------------------------- */
.uses__agenda { display: flex; flex-direction: column; gap: 0.125rem; }

.uses__agendaItem {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  align-items: baseline;
  gap: var(--raw-spacing-sm);
  padding: 0.625rem 0.5rem 0.625rem 0.75rem;
  background: none;
  border: 0;
  border-radius: var(--raw-radius-sm);
  text-align: left;
  cursor: pointer;
  color: var(--foreground-faint);
  transition: color var(--raw-duration-normal) var(--raw-ease-soft),
              background-color var(--raw-duration-normal) var(--raw-ease-soft);
}
.uses__agendaItem:hover { color: var(--foreground-muted); background: var(--raw-ink-050-a08); }
.uses__agendaItem.is-current { color: var(--foreground); }
.uses__agendaNum { color: inherit; opacity: 0.7; }

/* The marker on the current line, in that persona's own colour. Six different
   colours arriving one at a time down the left edge is the section's spine. */
.uses__agendaBar {
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  border-radius: 2px;
  background: var(--accent-lit);
  transform: scaleY(0);
  transform-origin: 50% 50%;
  transition: transform var(--raw-duration-slow) var(--raw-ease-entrance);
}
.uses__agendaItem.is-current .uses__agendaBar { transform: scaleY(1); }

/* -----------------------------------------------------------------------------
   THE DECK FRAME
   A fixed 16:9 window. Slides are pushed through it; it does not move.
   ----------------------------------------------------------------------------- */
.uses__deck {
  position: relative;
  width: 100%;
  max-height: 100%;
  min-height: 27rem;
  margin-inline: auto;
  border-radius: var(--rounding-panel);
  overflow: hidden;
  background: var(--raw-abyss-980);
  box-shadow: 0 3rem 6rem -2.5rem rgb(2 8 7 / 0.9);
}

.uses__slide {
  position: relative;
  min-height: 27rem;
  display: flex;
  flex-direction: column;
  padding: var(--raw-spacing-md) var(--raw-spacing-lg) var(--raw-spacing-sm);
  will-change: transform, opacity;
  /* Each persona's own ground: its accent, run very dark, so the six slides
     are six different rooms rather than six copies of one. */
  background:
    radial-gradient(120% 100% at 8% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 62%),
    linear-gradient(160deg, var(--raw-void-850) 0%, var(--raw-void-950) 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-lit) 22%, transparent);
}
.uses__slide[hidden] { display: none; }
.uses__slide:not([hidden]) { animation: audience-arrive 320ms var(--raw-ease-entrance); }
@keyframes audience-arrive { from { transform: translateX(1.5rem); } to { transform: translateX(0); } }

/* --- slide chrome ------------------------------------------------------------ */
.uses__slideChrome {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--raw-spacing-md);
  padding-bottom: var(--raw-spacing-sm);
  border-bottom: 1px solid var(--raw-ink-050-a08);
}
.uses__tag { color: var(--accent-lit); }
.uses__slideNum { color: var(--foreground-faint); }
.uses__chromeRule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, color-mix(in srgb, var(--accent-lit) 45%, transparent), transparent);
}

/* --- the slide's own body ---------------------------------------------------- */
.uses__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--raw-spacing-xl);
  align-items: center;
  padding-block: var(--raw-spacing-md);
}

.uses__art { display: grid; place-items: center; min-width: 0; align-self: stretch; }
.figure { width: 100%; height: auto; max-height: 100%; overflow: visible; }

/* The drawing takes the slide's accent. One set of markup, six colourways.

   Everything here is either a THIN STROKE or a QUIET FILL. An earlier pass had
   the display panel filled at a quarter accent and the audience as solid grey
   silhouettes, and the result was a mustard slab with three headstones under
   it — which is a long way from "a lecture you are looking forward to". */
.figure .fig-screen {
  fill: color-mix(in srgb, var(--accent) 13%, var(--raw-abyss-980));
  stroke: color-mix(in srgb, var(--accent-lit) 34%, transparent);
  stroke-width: 1.5;
}
.figure .fig-solid {
  fill: color-mix(in srgb, var(--accent) 22%, var(--raw-void-950));
  stroke: color-mix(in srgb, var(--accent-lit) 26%, transparent);
  stroke-width: 1.25;
}
.figure .fig-accent      { fill: var(--accent-lit); opacity: 0.92; }
.figure .fig-line        { fill: var(--accent-lit); opacity: 0.30; }
.figure .fig-body        { stroke: var(--accent-lit); stroke-width: 2.4; }
.figure .fig-crowd       { stroke: var(--accent-lit); stroke-width: 1.75; opacity: 0.42; }
.figure .fig-accentSolid { fill: var(--raw-chart-400); }
.figure .fig-bright      { fill: none; stroke: var(--raw-chart-400); stroke-width: 3.5; }
.figure .fig-rule        { stroke: var(--raw-ink-050); stroke-width: 1.25; opacity: 0.14; }

.uses__copy { display: flex; flex-direction: column; gap: var(--raw-spacing-sm); min-width: 0; }
.uses__title { color: var(--foreground); }
.uses__lead  { color: var(--foreground-muted); max-width: 28rem; }

/* What they actually make, drawn as three slide spines on a shelf rather than
   as three pills — the shape says "decks" without a word of explanation. */
.uses__makes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raw-spacing-sm);
  margin-top: var(--raw-spacing-xs);
}
.uses__make {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem 0.375rem 0.375rem;
  border-radius: var(--raw-radius-xs);
  background: var(--raw-ink-050-a08);
}
.uses__makeSpine {
  width: 0.25rem;
  height: 1rem;
  border-radius: 1px;
  background: var(--accent-lit);
}
.uses__makeName { color: var(--foreground-muted); }

/* --- the slide's footer ------------------------------------------------------ */
.uses__slideFoot {
  flex: none;
  display: flex;
  justify-content: space-between;
  padding-top: var(--raw-spacing-sm);
  border-top: 1px solid var(--raw-ink-050-a08);
  color: var(--foreground-faint);
}

/* -----------------------------------------------------------------------------
   NARROW
   The push stops and the deck becomes a column. Six slides sliding sideways in
   a 360px frame is a good idea nobody can read.
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .uses__scroller { height: auto; }
  .uses__pin { position: static; height: auto; padding-block: 0; }
  .uses__room { grid-template-columns: 1fr; gap: var(--raw-spacing-md); }
  .uses__agenda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .uses__agendaItem { min-height: 2.75rem; grid-template-columns: 1fr; padding: 0.6rem 0.75rem; }
  .uses__agendaNum { display: none; }
  .uses__bar { display: none; }

  .uses__deck {
    aspect-ratio: auto;
    display: block;
    min-height: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }
  .uses__slide {
    position: static;
    inset: auto;
    border-radius: var(--rounding-panel);
    padding: var(--raw-spacing-md);
    min-height: 27rem;
  }
  .uses__body { grid-template-columns: 1fr; gap: var(--raw-spacing-md); }
  .uses__art { order: 2; }
  .uses__art .figure { max-width: 20rem; max-height: 12rem; }
  .uses__title { font-size: 2.5rem; line-height: 2.3rem; }
}

@media (max-width: 640px) {
  .uses__title { font-size: 2.125rem; line-height: 2rem; }
  .uses__lead { font-size: 1rem; line-height: 1.45; }
  .uses__agendaName { font-size: 0.8rem; letter-spacing: 0; text-transform: none; }
  .uses__slide { min-height: 29rem; }
}