/* Paper-stage motion. No rendering library, external assets, or continuous loops. */
.slide { perspective: 1400px; }
.panel { transform-origin: 50% 55%; }
.g6, .g3, .srow, .tline, .cover-grid, .founder-layout, .vision-layout { perspective: 1000px; }
.motion-art { rotate: y var(--art-tilt, 0deg); transition: rotate .35s ease; backface-visibility: hidden; }

#s5 .motion-scene.is-animating .card {
  transform-origin: center bottom;
  animation: paper-unfold .75s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(.16s + var(--reveal-order, 0) * .12s);
}
#s5 .motion-scene.is-animating .ficon {
  animation: icon-stamp .5s cubic-bezier(.2,.85,.25,1.15) both;
  animation-delay: calc(.5s + var(--reveal-order, 0) * .12s);
}
#s6 .motion-scene.is-animating .sbox {
  transform-origin: center bottom;
  animation: stat-build .8s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(.12s + var(--reveal-order, 0) * .18s);
}
#s6 .motion-scene.is-animating .snum {
  animation: number-focus .6s ease-out both;
  animation-delay: calc(.4s + var(--reveal-order, 0) * .18s);
}
#s6 .motion-scene.is-animating .card,
#s10 .motion-scene.is-animating .flist li,
#s11 .motion-scene.is-animating .alist li {
  animation: paper-unfold .7s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(.24s + var(--reveal-order, 0) * .15s);
}
#s7 .motion-scene.is-animating tbody tr {
  animation: row-reveal .55s ease-out both;
  animation-delay: calc(.16s + var(--reveal-order, 0) * .1s);
}
#s9 .tline { position: relative; padding-top: 40px; }
#s9 .phase { position: relative; }
#s9 .phase::before {
  content: ''; position: absolute; width: 12px; height: 12px;
  top: -28px; left: calc(50% - 6px); border: 2px solid var(--ink);
  background: var(--accent, var(--blue)); border-radius: 50%;
}
#s9 .tline::before {
  content: ''; position: absolute; top: 18px; left: 16.66%; right: 16.66%;
  height: 2px; background: var(--ink); transform-origin: left center;
}
#s9 .motion-scene.is-animating .tline::before { animation: roadmap-draw 1.25s ease-in-out .2s both; }
#s9 .motion-scene.is-animating .phase {
  animation: paper-unfold .8s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(.25s + var(--reveal-order, 0) * .4s);
}
#s9 .motion-scene.is-animating .phase::before {
  animation: icon-stamp .4s ease-out both;
  animation-delay: calc(.3s + var(--reveal-order, 0) * .4s);
}
#s12 .motion-scene.is-animating .vquote { animation: paper-unfold .9s cubic-bezier(.22,1,.36,1) .15s both; }
#s12 .motion-scene.is-animating .cchip {
  animation: paper-unfold .65s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(.65s + var(--reveal-order, 0) * .14s);
}
/* Illustrations settle into the paper stage once, leaving the copy still. */
#s1 .motion-scene.is-animating .cover-art,
#s6 .motion-scene.is-animating .market-art,
#s10 .motion-scene.is-animating .founder-art,
#s12 .motion-scene.is-animating .vision-art {
  transform-origin: 50% 75%;
  animation: illustration-depth 1.5s cubic-bezier(.22,1,.36,1) .15s both;
}
#s8 .motion-scene.is-animating .pcrd:nth-child(n) {
  animation-name: paper-unfold;
  transform-origin: center bottom;
}
/* Release transforms after the reveal so existing hover feedback still works. */
#s5 .motion-scene.is-animating .card,
#s6 .motion-scene.is-animating .card,
#s6 .motion-scene.is-animating .sbox,
#s8 .motion-scene.is-animating .pcrd:nth-child(n),
#s9 .motion-scene.is-animating .phase,
#s11 .motion-scene.is-animating .alist li { animation-fill-mode: backwards; }
#s9 .phase:nth-child(2) { transform: none; }
@keyframes paper-unfold {
  from { opacity: 0; transform: translateY(22px) perspective(900px) rotateX(20deg) scale(.97); }
  to { opacity: 1; transform: translateY(0) perspective(900px) rotateX(0) scale(1); }
}
@keyframes stat-build {
  from { opacity: 0; transform: translateY(30px) rotateX(-18deg) scale(.94); }
  to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}
@keyframes number-focus {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes icon-stamp {
  0% { opacity: 0; scale: .6; }
  70% { opacity: 1; scale: 1.1; }
  100% { opacity: 1; scale: 1; }
}
@keyframes row-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes roadmap-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes illustration-depth {
  0% { opacity: 0; transform: perspective(1000px) translateY(24px) rotateY(-14deg) rotateX(6deg) scale(.94); }
  65% { opacity: 1; transform: perspective(1000px) translateY(-5px) rotateY(3deg) rotateX(0) scale(1); }
  100% { opacity: 1; transform: perspective(1000px) translateY(0) rotateY(0) rotateX(0) scale(1); }
}
#motion-controls { position: fixed; left: 22px; bottom: 18px; display: flex; gap: 8px; z-index: 300; }
#motion-controls .nbtn { font-size: 1.2rem; }
.nbtn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.nbtn:disabled:hover { background: #fff; color: var(--ink); }
#bmotion[aria-pressed='true'] { background: var(--ink); color: var(--surface); }
[data-motion='off'] *, [data-motion='off'] *::before, [data-motion='off'] *::after {
  animation: none !important; transition: none !important;
}
[data-motion='off'] .motion-art { rotate: none; }
[data-motion='off'] .exam-tree :is(.branch, .twig) { stroke-dasharray: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-art { rotate: none; }
  .exam-tree.is-animating :is(.branch, .twig) { stroke-dasharray: none; stroke-dashoffset: 0; }
}
@media (max-width: 900px) {
  .motion-art { rotate: none; }
}
@media (max-width: 680px) {
  #motion-controls { left: 12px; bottom: 14px; gap: 6px; }
  #nav { right: 12px; bottom: 14px; gap: 6px; }
  #ctr { bottom: 22px; padding: 5px 10px; }
  #s9 .tline { padding-top: 0; padding-left: 24px; }
  #s9 .tline::before { top: 12px; bottom: 12px; left: 5px; right: auto; width: 2px; height: auto; transform-origin: top center; }
  #s9 .phase::before { top: 16px; left: -25px; }
  #s9 .motion-scene.is-animating .tline::before { animation-name: roadmap-draw-vertical; }
  .cchip { min-width: 0; overflow-wrap: anywhere; }
  .cchip .icon { flex: 0 0 14px; }
  #s4 .flow { flex-wrap: wrap; gap: 16px 8px; }
  #s4 .fstep { flex: 1 1 80px; }
  /* Keep chart and table text in their own scrollable region, never off-screen. */
  .exam-tree { width: 100%; flex-shrink: 0; }
  .twrap { overflow-x: auto; flex-shrink: 0; }
  .ctbl { min-width: 430px; }
  .panel > * { flex-shrink: 0; }
}
@keyframes roadmap-draw-vertical { from { transform: scaleY(0); } to { transform: scaleY(1); } }