/* The features part: five numbered chapters in the film's visual language.

   What the film does, continued as a page: a mono chapter number, one violet word
   per headline, a near black stage with corner marks for anything shown, the dot
   field in one corner, and the pipeline in the film's five inks. Everything is laid
   out and visible without the motion block at the end of this file. Loaded after
   sections.css, whose panels (.art, .rows, the plan mock, the gate) the chapters
   reuse, and before motion.css. */

:root {
  --accent-ink: oklch(0.8 0.1 290);   /* the film's highlight word, #b9b0ff */
  --stage: oklch(0.11 0.008 285);
}

/* --- the rail: where you are in the five ------------------------------------*/

.crail {
  position: sticky; top: 2.95rem; z-index: 10; border-bottom: 1px solid var(--edge);
  background: color-mix(in oklab, var(--surface-0) 86%, transparent); backdrop-filter: blur(12px);
}
.crail .shell { display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; padding: 0.45rem 0; }
.crail a {
  display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.32rem 0.7rem;
  border-radius: 999px; font: 500 0.72rem var(--mono); letter-spacing: 0.04em;
  color: var(--fg-2); text-decoration: none; white-space: nowrap;
}
.crail a b { font-weight: 600; color: var(--accent-ink); }
.crail a:hover { color: var(--fg); }
.crail a[aria-current] { background: color-mix(in oklab, var(--accent) 24%, transparent); color: var(--fg); }
/* Five names do not fit one row of a phone, and a rail that wraps to three rows
   covers the chapter it names. The numbers stay; only the current one says its name. */
@media (width < 720px) {
  .crail a { padding-inline: 0.5rem; }
  .crail a:not([aria-current]) span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* --- a chapter ---------------------------------------------------------------*/

.ch { position: relative; overflow: clip; scroll-margin-top: 5.5rem; padding-block: clamp(3.5rem, 9vw, 6.5rem); }
/* The Violet Signal field, as a quiet corner texture: top right, then bottom left. */
.ch::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(circle, var(--accent-hi) 1.1px, transparent 1.7px);
  background-size: 13px 13px;
  mask-image: radial-gradient(75% 60% at 84% 10%, #000 0, transparent 78%);
}
.ch:nth-of-type(even)::before { mask-image: radial-gradient(70% 60% at 8% 88%, #000 0, transparent 78%); }
.ch > .shell { position: relative; }

.ch .head { max-width: none; margin-bottom: clamp(1.5rem, 3.6vw, 2.5rem); }
.ch .eyebrow { letter-spacing: 0.16em; }
.ch .eyebrow b { margin-right: 0.7rem; font-weight: 600; color: var(--accent-ink); }
.ch h2 {
  margin-top: 0.9rem; max-width: 17em; color: oklch(0.99 0 0);
  font-size: clamp(1.75rem, 5.4vw, 3.1rem); font-weight: 650; line-height: 1.05; letter-spacing: -0.03em;
}
.ch h2 em, .tile h3 em { font-style: normal; color: var(--accent-ink); }
.ch .head > p:last-child { max-width: 54ch; font-size: clamp(1rem, 1.9vw, 1.15rem); }
.ch .head > p em { font-style: normal; color: var(--fg); }

/* --- the stage: anything shown sits on one -----------------------------------*/

.stg {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--stage);
  box-shadow: 0 -1px 0 0 oklch(0.8 0.1 290 / 0.3), 0 40px 90px -40px oklch(0 0 0 / 0.85);
}
.stg + .facts, .duo + .stg { margin-top: 1rem; }
.stg figcaption { margin: 0; padding: 0.75rem 1rem 0.95rem; max-width: none; font-size: 0.8rem; }
.hud i { position: absolute; z-index: 2; width: 12px; height: 12px; border: 1.5px solid var(--edge-3); pointer-events: none; }
.hud i:nth-child(1) { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.hud i:nth-child(2) { right: 10px; top: 10px; border-left: 0; border-bottom: 0; }
.hud i:nth-child(3) { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.hud i:nth-child(4) { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }

.lanepills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 1rem 1.6rem 0.9rem; list-style: none; }
.lanepills li {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.28rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--edge-2); background: var(--surface-1);
  font: 500 0.7rem var(--mono); color: var(--fg-2); white-space: nowrap; --hue: var(--todo);
}
.lanepills li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hue); }
.lanepills [data-s="prog"] { --hue: var(--progress); }
.lanepills [data-s="rev"] { --hue: var(--review); }
.lanepills [data-s="done"] { --hue: var(--done); }
/* You are in the middle of it: the one lane that is yours is the one that is lit. */
.lanepills [data-s="pend"] {
  --hue: var(--pending); color: oklch(0.9 0.09 85);
  border-color: color-mix(in oklab, var(--pending) 55%, transparent);
  background: color-mix(in oklab, var(--pending) 13%, transparent);
}

.shot { overflow: hidden; }
.shot-in { position: relative; }
.shot img { display: block; width: 100%; height: auto; }
.shot.zoom .shot-in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--stage) 0, transparent 34%);
}
/* Around the two cards in Your turn, in percent of the capture so it holds at any size. */
.ring {
  position: absolute; left: 50.2%; top: 19.5%; width: 15.8%; height: 55.5%; border-radius: 10px;
  box-shadow: 0 0 0 2px var(--accent-hi), 0 0 30px 4px oklch(0.585 0.155 277 / 0.45);
}
/* At phone width the whole board is 127px tall and nothing on it can be read. Show the
   part the chapter is about instead: the capture at 2.3 times, centred on Your turn. */
@media (width < 720px) {
  .shot.zoom .shot-in { width: 230%; margin-left: -84%; }
  .shot.zoom.left .shot-in { margin-left: 0; }   /* the plan's note is at its left edge */
}

/* --- facts: the smaller things a chapter also says ---------------------------*/

.facts {
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  margin-top: 1rem; overflow: hidden; border-radius: var(--r); border: 1px solid var(--edge-2);
  background: var(--surface-1);
}
/* The hairlines are each cell's own shadow, so a row that wraps short leaves no stripe. */
.facts > div { padding: 1.05rem 1.15rem; box-shadow: 0 0 0 1px var(--edge-2); }
.facts p { margin-top: 0.35rem; font-size: 0.9rem; color: var(--fg-2); }
.facts .chips, .tile .chips { margin: 0.65rem 0 0; }

/* --- two panels side by side -------------------------------------------------*/

.duo { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: stretch; }
.duo > * { min-width: 0; }
/* The live plan gets the room; what it also says stands beside it, top aligned so the
   pair does not stretch when the plan's composer opens. */
.duo-plan { align-items: start; }
.facts.col { grid-template-columns: 1fr; margin-top: 0; }
@media (width >= 900px) { .duo-plan { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.ch .art, .tile { padding: 1.2rem; border-radius: var(--r-lg); }
.ch .pel { padding: 0.75rem 0.9rem; font-size: 0.93rem; }
.ch .pel-k { font-size: 0.64rem; }
.ch .plan-opts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.ch .rows li { padding: 0.6rem 0.75rem; }
.ch .fx-t, .ch .quote { font-size: 0.9rem; }
.art-head[data-s="done"] i { background: var(--done); }
.stg .dag { max-width: 460px; margin: 0 auto; padding: 1.6rem 1rem 0.4rem; }

.bignum { margin: 0.2rem 0 0.9rem; font-size: clamp(2.2rem, 7vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.bignum s { text-decoration: none; color: var(--fg-3); }
.bignum b { font-weight: 700; color: var(--done); }

/* --- the pipeline, in the film's inks ----------------------------------------*/

.dag text { font: 600 10.5px var(--sans); fill: var(--fg); }
.edges path { stroke: var(--accent-hi); stroke-width: 1.6; opacity: 0.5; }
.flow path { stroke: oklch(0.9 0.06 290); stroke-width: 1.8; opacity: 0; }
.nodes > g { --ink: #2fb7a4; }                 /* an agent */
.nodes > [data-k="trigger"] { --ink: #7c87ec; }
.nodes > [data-k="join"] { --ink: #43c289; }
.nodes > [data-k="gate"] { --ink: #e6ac3d; }
.nodes > [data-k="out"] { --ink: #ad87ed; }
.nb { fill: oklch(0.19 0.01 285); stroke: var(--edge-3); }
.ni, .np { fill: var(--ink); }
.nt { fill: var(--edge-2); }

/* --- the bento: what it reaches beyond the repo -------------------------------*/

.bento { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.tile { background: var(--surface-1); border: 1px solid var(--edge); min-width: 0; }
.tile h3 { font-size: 1.22rem; font-weight: 650; line-height: 1.15; letter-spacing: -0.02em; }
.tile > p { margin-top: 0.6rem; font-size: 0.9rem; color: var(--fg-2); }
.tile .rows { margin-top: 0.8rem; }
.tile .phone-wrap { margin-top: 1.1rem; }
.tile .phone { width: min(100%, 220px); height: 400px; border-radius: 32px; }
.tile .phone-screen { border-radius: 23px; }
@media (width >= 720px) { .tile.w { grid-column: span 2; } }
@media (width >= 980px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile.tall { grid-row: span 2; }
}

/* --- motion -------------------------------------------------------------------
   Film level, and all of it on top of a page that is complete without it. */

@media (prefers-reduced-motion: no-preference) {
  .ring { animation: ring-pulse 2.6s ease-in-out infinite; }
  @keyframes ring-pulse {
    50% { box-shadow: 0 0 0 2px var(--accent-ink), 0 0 46px 10px oklch(0.585 0.155 277 / 0.6); }
  }

  /* Each node works, row after row: the three agents share a delay, which is the claim. */
  .np { transform-box: fill-box; transform-origin: left; animation: node-work 4.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
  @keyframes node-work { 0% { transform: scaleX(0.05); } 30%, 100% { transform: scaleX(1); } }

  @supports (animation-timeline: view()) {
    /* Headlines rise word by word as they enter, the way the film's captions do.
       Longhands after the shorthand: it resets animation-duration to 0s. */
    .ch h2 { view-timeline: --head block; }
    .ch h2 .w {
      display: inline-block;
      animation: word-in linear both; animation-duration: auto; animation-timeline: --head;
      animation-range: entry calc(var(--i) * 16%) entry calc(var(--i) * 16% + 130%);
    }
    @keyframes word-in {
      from { opacity: 0; transform: translateY(0.45em); filter: blur(6px); }
      to { opacity: 1; transform: none; filter: blur(0); }
    }

    /* The capture settles from the film's camera angle to flat as it scrolls in. */
    @media (width >= 720px) {
      .shot-in {
        transform-origin: 50% 0;
        animation: shot-settle linear both; animation-duration: auto; animation-timeline: view();
        animation-range: entry 0% cover 42%;
      }
      @keyframes shot-settle {
        from { transform: perspective(1400px) rotateX(13deg) rotateY(-7deg) scale(1.05); }
        to { transform: none; }
      }
    }
  }
}