/* ============================================================
   Day91 — motion layer
   One distinct animation per fold. Layered on top of styles.css;
   never overrides a token, never introduces a colour.
   Everything is wrapped in prefers-reduced-motion: no-preference,
   and the reduced-motion state is always the finished state.
   ============================================================ */

/* ---------- shared: fold entrance ---------- */

[data-anim] { --t: 0; }

@media (prefers-reduced-motion: no-preference) {
  .fx { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
  .is-on .fx, .fx.is-on { opacity: 1; transform: none; }
}

/* ---------- scroll progress rail ---------- */

.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--signal); z-index: 60; pointer-events: none;
}

/* ---------- FOLD 1 — hero: the extraction ---------- */

.xhero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; padding: 3.2rem 0 2.4rem; }
@media (max-width: 61.99rem) { .xhero { grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; } }

.xhero h1 { font-size: clamp(2.3rem, 5.2vw, 3.65rem); max-width: 15ch; }
.xhero .lede { font-size: 1.14rem; color: var(--muted); max-width: 34rem; margin: 1rem 0 1.6rem; }

/* rotating noun */
.rot { display: inline-grid; vertical-align: bottom; overflow: hidden; height: 1.06em; }
.rot > span { grid-area: 1 / 1; opacity: 0; transform: translateY(90%); }
.rot > span.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .rot > span { transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
  .rot > span.out { opacity: 0; transform: translateY(-90%); }
}
.rot > span { color: var(--signal); }

/* extraction stage */
.stage {
  position: relative; border: 1px solid var(--rule); background: var(--paper-3);
  border-radius: 10px; padding: 1rem; box-shadow: 0 22px 50px -34px rgba(23,24,27,.5);
}
.stage-head {
  display: flex; align-items: center; gap: .5rem; font-family: var(--mono);
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--rule-soft); padding-bottom: .6rem; margin-bottom: .8rem;
}
.stage-head .live { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); }
@media (prefers-reduced-motion: no-preference) { .stage-head .live { animation: blip 1.9s ease-in-out infinite; } }
@keyframes blip { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

.stage svg { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: no-preference) {
  .stage .scan { animation: scan 6s cubic-bezier(.6,0,.4,1) infinite; }
  @keyframes scan { 0%,6% { transform: translateY(0); opacity: 0 } 10% { opacity: .9 } 46% { transform: translateY(128px); opacity: .9 } 52%,100% { opacity: 0; transform: translateY(128px) } }

  .stage .lift { animation: lift 6s cubic-bezier(.5,0,.2,1) infinite; }
  @keyframes lift { 0%,46% { transform: translate(0,0) scale(.96); opacity: 0 } 52% { opacity: 1 } 70% { transform: translate(118px,-34px) scale(1); opacity: 1 } 88%,100% { transform: translate(118px,-34px) scale(1); opacity: 1 } }

  .stage .stamp { animation: thud 6s cubic-bezier(.3,1.6,.5,1) infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes thud { 0%,74% { transform: scale(1.5) rotate(-7deg); opacity: 0 } 80% { transform: scale(1) rotate(-3deg); opacity: 1 } 100% { transform: scale(1) rotate(-3deg); opacity: 1 } }

  .stage .link { animation: linkin 6s ease infinite; }
  @keyframes linkin { 0%,84% { opacity: 0; transform: translateY(6px) } 90%,100% { opacity: 1; transform: none } }

  .stage .paper { animation: settle 6s ease infinite; transform-box: fill-box; }
  @keyframes settle { 0% { transform: translateY(8px) } 8%,100% { transform: none } }
}

/* pointer parallax */
.stage .par { transition: transform .35s cubic-bezier(.2,.8,.2,1); }

/* ---------- FOLD 2 — tools: spotlight + tilt ---------- */

.xtools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.8rem; }
@media (max-width: 47.99rem) { .xtools { grid-template-columns: 1fr; } }

.xtool {
  position: relative; display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--rule); background: var(--paper-3); border-radius: 10px;
  padding: 1.15rem 1.25rem 1.25rem; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
  transform-style: preserve-3d;
}
.xtool::before {
  content: ""; position: absolute; inset: -1px; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, 0%), color-mix(in oklab, var(--signal) 12%, transparent), transparent 65%);
  pointer-events: none;
}
.xtool:hover { border-color: color-mix(in oklab, var(--signal) 45%, var(--rule)); box-shadow: 0 20px 40px -30px rgba(23,24,27,.6); }
.xtool:hover::before { opacity: 1; }
.xtool .k { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.xtool h3 { margin: .45rem 0 .3rem; font-size: 1.22rem; }
.xtool p { margin: 0; font-size: .95rem; color: var(--muted); }
.xtool .go { display: inline-block; margin-top: .9rem; font-family: var(--display); font-weight: 600; font-size: .88rem; color: var(--signal); }
.xtool:hover .go { transform: translateX(3px); }
.xtool .go { transition: transform .25s ease; }

/* ---------- FOLD 3 — pipeline: scroll-scrubbed line ---------- */

.xpipe { position: relative; margin-top: 2rem; padding-left: 2.4rem; }
.xpipe::before { content: ""; position: absolute; left: .72rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--rule); }
.xpipe .fill { position: absolute; left: .72rem; top: .4rem; width: 2px; background: var(--signal); height: calc(var(--p, 0) * 1%); max-height: calc(100% - .8rem); }
.xpipe .node { position: relative; padding: .1rem 0 1.9rem; }
.xpipe .node::before {
  content: ""; position: absolute; left: -1.79rem; top: .45rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--rule); transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.xpipe .node.lit::before { border-color: var(--signal); background: var(--signal); box-shadow: 0 0 0 5px color-mix(in oklab, var(--signal) 14%, transparent); }
.xpipe .node h3 { font-size: 1.06rem; }
.xpipe .node p { margin: .3rem 0 0; color: var(--muted); font-size: .96rem; max-width: 34rem; }
.xpipe .node { opacity: .45; transition: opacity .4s ease; }
.xpipe .node.lit { opacity: 1; }

/* ---------- FOLD 4 — grades: dealt cards ---------- */

.xgrades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.8rem; }
@media (max-width: 47.99rem) { .xgrades { grid-template-columns: 1fr; } }
.xgrade { border: 1px solid var(--rule); background: var(--paper-3); border-radius: 10px; padding: 1.1rem 1.15rem; }
.xgrade p { margin: .55rem 0 0; font-size: .94rem; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .xgrade { opacity: 0; transform: translateY(20px) rotate(-2deg); transition: opacity .5s ease, transform .55s cubic-bezier(.2,1.3,.4,1); transition-delay: calc(var(--i,0) * 110ms); }
  .is-on .xgrade { opacity: 1; transform: none; }
}

/* ---------- FOLD 5 — proof band: counters ---------- */

@media (prefers-reduced-motion: no-preference) {
  .band .stat dt { transition: transform .5s cubic-bezier(.2,1.4,.4,1); }
  .band .stat:hover dt { transform: translateY(-3px); }
}

/* ---------- FOLD 6 — repricing ticker ---------- */

.xtick { margin-top: 1.6rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-3); overflow: hidden; }
.xtick .row { display: grid; grid-template-columns: 1.4fr .9fr .9fr auto; gap: .8rem; align-items: center; padding: .72rem 1rem; border-top: 1px solid var(--rule-soft); font-family: var(--mono); font-size: .82rem; }
.xtick .row:first-child { border-top: 0; }
.xtick .row .co { font-family: var(--display); font-weight: 600; font-size: .92rem; }
.xtick .old { color: var(--faint); text-decoration: line-through; }
.xtick .new { color: var(--ink); font-weight: 700; }
.xtick .delta { justify-self: end; font-size: .74rem; padding: .12rem .45rem; border-radius: 3px; background: color-mix(in oklab, var(--neg) 10%, transparent); color: var(--neg); }
.xtick .delta.up { background: color-mix(in oklab, var(--pos) 10%, transparent); color: var(--pos); }
@media (prefers-reduced-motion: no-preference) {
  .xtick .row { opacity: 0; transform: translateX(-10px); transition: opacity .45s ease, transform .45s ease; transition-delay: calc(var(--i,0) * 90ms); }
  .is-on .xtick .row { opacity: 1; transform: none; }
  .xtick .new { transition: color .3s ease; }
}

/* ---------- FOLD 7 — readers: hover reveal ---------- */

.xwho { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.6rem; }
@media (max-width: 61.99rem) { .xwho { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 35.99rem) { .xwho { grid-template-columns: 1fr; } }
.xwho div {
  border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-3);
  padding: 1rem; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.xwho div:hover { transform: translateY(-5px); border-color: color-mix(in oklab, var(--signal) 45%, var(--rule)); }
.xwho b { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); display: block; }
.xwho h3 { font-size: 1rem; margin: .4rem 0 .25rem; }
.xwho p { margin: 0; font-size: .9rem; color: var(--muted); }

/* ---------- FOLD 8 — closer: magnetic + seat meter ---------- */

.mag { transition: transform .25s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.seatbar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.16); overflow: hidden; margin: 1rem 0 .5rem; max-width: 26rem; }
.seatbar i { display: block; height: 100%; width: 0; background: var(--paper); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }

/* rotator sizes itself to the current word */
.rot { transition: width .45s cubic-bezier(.2,.8,.2,1); }