/* =========================================================
   Scroll-storytelling upgrades · Process → Impact
   Isolated additions (behaviour in case-ts-scroll.js).
   Initial "hidden" states live under no-preference so
   reduced-motion users always see the final state.
   ========================================================= */

/* ---------------------------------------------------------
   A · IMPACT — ratio bars grow, numbers ride out on scroll
   --------------------------------------------------------- */
.imp-ratio .imp-bar-fill {
  transition: width 1200ms cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-reduced-motion: no-preference) {
  .imp-ratio.r:not(.in) .imp-bar.created .imp-bar-fill { width: 0; min-width: 0; padding-inline: 0; }
  .imp-ratio.r:not(.in) .imp-bar.used .imp-bar-fill { width: 0; padding-inline: 0; }
}

/* ---------------------------------------------------------
   B · TIMELINE ribbon — line draws, stops step in
   --------------------------------------------------------- */
.ts-ribbon.r .ts-ribbon-track::before {
  transition: transform 1100ms cubic-bezier(.2, .8, .2, 1);
}
.ts-ribbon.r.in .ts-ribbon-track::before { transform: scaleX(1); }
.ts-ribbon.r.in .ts-ribbon-stop { opacity: 1; translate: 0 0; }
.ts-ribbon.r.in .ts-ribbon-stop:nth-child(1) { transition-delay: 220ms; }
.ts-ribbon.r.in .ts-ribbon-stop:nth-child(2) { transition-delay: 420ms; }
.ts-ribbon.r.in .ts-ribbon-stop:nth-child(3) { transition-delay: 620ms; }
.ts-ribbon.r.in .ts-ribbon-stop:nth-child(4) { transition-delay: 820ms; }
.ts-ribbon.r.in .ts-ribbon-stop i { animation: tsr-pop 480ms cubic-bezier(.2, .8, .2, 1) both; }
.ts-ribbon.r.in .ts-ribbon-stop:nth-child(1) i { animation-delay: 320ms; }
.ts-ribbon.r.in .ts-ribbon-stop:nth-child(2) i { animation-delay: 520ms; }
.ts-ribbon.r.in .ts-ribbon-stop:nth-child(3) i { animation-delay: 720ms; }
.ts-ribbon.r.in .ts-ribbon-stop:nth-child(4) i { animation-delay: 920ms; }
@keyframes tsr-pop { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .ts-ribbon.r .ts-ribbon-track::before { transform-origin: left center; transform: scaleX(0); }
  .ts-ribbon.r .ts-ribbon-stop { opacity: 0; translate: 0 16px; transition: opacity 560ms ease, translate 560ms cubic-bezier(.2, .8, .2, 1); }
}

/* ---------------------------------------------------------
   C · FLOWCHARTS — self-build on scroll
   .fc-anim tagged in JS (skips the full-detail view)
   --------------------------------------------------------- */
.fc-panel.r.in .fc-anim { opacity: 1; transform: none; }
.fc-panel.r.in .fc-anim.fc-wire { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .fc-panel.r .fc-anim {
    opacity: 0;
    transform: translateY(12px) scale(.97);
    transition: opacity 460ms ease, transform 460ms cubic-bezier(.2, .8, .2, 1);
    transition-delay: calc(var(--fi, 0) * 68ms);
  }
  .fc-panel.r .fc-anim.fc-wire {
    transform-origin: left center;
    transform: scaleX(0);
    transition: opacity 380ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1);
    transition-delay: calc(var(--fi, 0) * 68ms);
  }
}

/* ---------------------------------------------------------
   D · STICKY errand tracker (replaces repeated checklists)
   --------------------------------------------------------- */
.vd-track-scope { position: relative; }
.vd-track {
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 16px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  position: fixed;
  bottom: clamp(14px, 3vh, 26px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .3s ease, transform .34s cubic-bezier(.2, .9, .3, 1), visibility 0s linear .34s;
}
.vd-track.is-fixed {
  position: fixed;
  bottom: clamp(14px, 3vh, 26px);
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .3s ease, transform .34s cubic-bezier(.2, .9, .3, 1), visibility 0s;
}
.vd-track.is-docked {
  position: absolute;
  bottom: auto;
  left: 0;
  right: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: none;
}
.vd-track-anchor { pointer-events: none; }

/* confetti burst on completion */
.vd-confetti { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 6; }
.vd-confetti i {
  position: absolute;
  left: var(--lx, 50%);
  bottom: 52%;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  background: var(--c, var(--bp));
  border: 1.5px solid rgb(16 20 23 / .32);
  box-shadow: 0 1px 2px rgb(16 20 23 / .18);
  opacity: 0;
  animation: vd-conf 1200ms cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes vd-conf {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(calc(var(--sz, 1) * .5)); }
  12% { opacity: 1; }
  58% { opacity: 1; transform: translate(calc(var(--dx) * .75), var(--dy)) rotate(calc(var(--rot) * .65)) scale(var(--sz, 1)); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) * -0.2 + 58px)) rotate(var(--rot)) scale(calc(var(--sz, 1) * .85)); }
}
@media (prefers-reduced-motion: reduce) { .vd-confetti { display: none; } }
.vd-track-time {
  flex: 0 0 auto;
  padding: 5px 13px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ts-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background 320ms ease;
}
.vd-track.is-complete .vd-track-time { background: var(--bp); }
.vd-track-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.vd-track-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fffdf5;
  font-family: var(--ts-mono);
  font-size: 12px;
  font-weight: 800;
  color: rgb(16 20 23 / .45);
  transition: color 300ms ease, background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.vd-track-step i {
  position: relative;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: #fff;
  font-style: normal;
  font-size: 11px;
  line-height: 1;
  color: var(--ink);
}
.vd-track-step i::after {
  content: "\2713";
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
  opacity: 0;
  transform: scale(0) rotate(-40deg);
}
.vd-track-step.active { color: var(--ink); background: #fff; border-color: var(--bp); box-shadow: 3px 3px 0 var(--bp); }
.vd-track-step.active i { border-color: var(--bp); }
.vd-track-step.done { color: rgb(16 20 23 / .6); text-decoration: line-through; text-decoration-thickness: 2px; }
.vd-track-step.done i { background: var(--yellow); }
.vd-track-step.done i::after { opacity: 1; transform: scale(1) rotate(0); }
/* delight: pop + tick draw + burst when a step lands as done */
.vd-track-step.done { animation: vdt-step 520ms cubic-bezier(.2, 1.3, .4, 1) both; }
.vd-track-step.done i { animation: vdt-box 640ms cubic-bezier(.2, 1.5, .4, 1) both, vdt-burst 680ms ease-out both; }
.vd-track-step.done i::after { animation: vdt-tick 640ms cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes vdt-step { 0% { transform: scale(1); } 42% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes vdt-box { 0% { transform: scale(1); } 35% { transform: scale(1.4) rotate(7deg); } 62% { transform: scale(.9) rotate(-4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes vdt-tick { 0% { opacity: 0; transform: scale(0) rotate(-45deg); } 55% { opacity: 1; transform: scale(1.55) rotate(9deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes vdt-burst { 0% { box-shadow: 0 0 0 0 rgb(93 118 255 / .55); } 100% { box-shadow: 0 0 0 15px rgb(93 118 255 / 0); } }
/* all three done: the time pill cheers */
.vd-track.is-complete .vd-track-time { animation: vdt-cheer 720ms cubic-bezier(.2, 1.35, .4, 1) both; }
@keyframes vdt-cheer { 0% { transform: scale(1) rotate(0); } 38% { transform: scale(1.18) rotate(-4deg); } 70% { transform: scale(.96) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  .vd-track-step.done, .vd-track-step.done i, .vd-track-step.done i::after, .vd-track.is-complete .vd-track-time { animation: none; }
  .vd-track-step.done i::after { opacity: 1; transform: none; }
}
.vd-track-arrow { color: rgb(16 20 23 / .28); font-weight: 900; }

/* narrative note that replaces each repeated checklist card */
.vd-note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 720px);
  padding: clamp(16px, 2vw, 24px);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: #fffdf5;
  box-shadow: 5px 5px 0 var(--bp-soft);
}
.vd-note-tag {
  width: fit-content;
  padding: 4px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ts-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.vd-note p { margin: 0; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.vd-note p b { font-weight: 800; }

@media (max-width: 720px) {
  .vd-track { border-radius: 18px; bottom: 12px; padding: 9px 12px; }
  .vd-track-step { font-size: 11px; padding: 5px 10px; }
  .vd-track-arrow { display: none; }
}

/* ---------------------------------------------------------
   E · variable walkthrough — switcher removed (multi-scope)
   --------------------------------------------------------- */

/* single-scope aside */
.vd-single {
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
  padding: clamp(20px, 2.6vw, 32px);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: #fffdf5;
  box-shadow: 6px 6px 0 var(--bp-soft);
}
.vd-single-k {
  width: fit-content;
  padding: 4px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ts-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.vd-single-copy { display: flex; flex-direction: column; gap: 10px; }
.vd-single-copy h4 { margin: 0; font-family: var(--ts-display); font-size: clamp(19px, 2.1vw, 27px); font-weight: 700; text-transform: uppercase; line-height: 1.03; }
.vd-single-copy p { margin: 0; font-size: clamp(14px, 1.4vw, 16px); line-height: 1.55; color: rgb(16 20 23 / .78); text-wrap: pretty; }
.vd-single-copy p b { background: var(--yellow); padding: 0 4px; border-radius: 3px; font-weight: 700; }
.vd-single-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 24px); }
.vd-single-shots figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.vd-single-shots img { display: block; width: 100%; height: auto; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 4px 4px 0 rgb(16 20 23 / .18); }
.vd-single-shots figcaption { font-family: var(--ts-mono); font-size: 11px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / .55); }
@media (max-width: 720px) { .vd-single-shots { grid-template-columns: 1fr; } }