.motion-suite {
  --bg: var(--paper);
  --surface: var(--card);
  --surface-2: var(--paper-2);
  --border: var(--line);
  --gold: var(--accent);
  --gold-dim: var(--accent-soft);
  --gold-line: color-mix(in srgb, var(--accent) 38%, transparent);
  --white: var(--ink);
  --soft: color-mix(in srgb, var(--muted) 62%, transparent);
  --loop: 8s;
  margin-top: clamp(3rem, 7vw, 6rem);
  min-width: 0;
}

.motion-section {
  border-block: 1px solid var(--line);
  overflow: hidden;
}

.motion-section .motion-suite { margin-top: 0; }

.engine .motion-suite-head > p,
.engine .motion-rail-head p,
.engine .motion-rail-hint {
  color: color-mix(in srgb, var(--paper) 64%, transparent);
}

.engine .motion-card .motion-meta p { color: var(--muted); }

.motion-suite-head {
  align-items: end;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.motion-suite-head h2,
.motion-suite-head h3 {
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1.02;
  margin-top: 1rem;
  max-width: 13ch;
  text-wrap: balance;
}

.motion-suite-head > p,
.motion-rail-head p {
  color: var(--muted);
  font-size: clamp(.95rem, 1.35vw, 1.12rem);
  max-width: 58ch;
}

.motion-featured {
  margin-bottom: clamp(4rem, 8vw, 7rem);
}

.motion-featured .motion-card {
  display: block;
}

.motion-featured .motion-stage {
  border-bottom: 1px solid var(--line);
  border-right: 0;
}

.motion-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: .45rem;
  box-shadow: 0 18px 55px color-mix(in srgb, var(--ink) 9%, transparent);
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: start;
}

.motion-stage {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  display: grid;
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 2.25rem);
  place-items: center;
}

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

.motion-meta {
  align-items: start;
  display: grid;
  gap: .5rem clamp(2rem, 6vw, 7rem);
  grid-template-columns: minmax(15rem, .7fr) minmax(0, 1.3fr);
  min-width: 0;
  padding: clamp(1.6rem, 3.5vw, 3rem);
}

.motion-tag {
  color: var(--accent);
  font-family: var(--mono, var(--font-mono));
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.motion-meta h3 {
  font-size: clamp(1.55rem, 3vw, 2.7rem);
  grid-column: 1;
  letter-spacing: -.035em;
  line-height: 1.06;
  margin: .75rem 0 .8rem;
}

.motion-meta p {
  align-self: center;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  grid-column: 2;
  grid-row: 1 / span 2;
  line-height: 1.7;
  max-width: 58ch;
}

.motion-rail-head {
  align-items: end;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin: 0 0 clamp(2rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.motion-rail-head + .motion-grid + .motion-rail-head {
  margin-top: clamp(6rem, 12vw, 10rem);
}

.motion-rail-head h3 {
  font-size: clamp(1.8rem, 3.5vw, 3.4rem);
  letter-spacing: -.035em;
}

.motion-rail-hint {
  display: none;
}

.motion-grid {
  display: grid;
  gap: clamp(3.5rem, 8vw, 7rem);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow: visible;
  padding: 0;
}

.motion-grid .motion-card {
  display: block;
}

.motion-grid .motion-meta {
  min-height: 0;
}

.motion-ready .motion-card:not(.motion-playing) * {
  animation-play-state: paused !important;
}

/* Shared SVG drawing primitives. */
.motion-suite .s-line { fill: none; stroke: var(--border); stroke-width: 1; }
.motion-suite .s-gold { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.motion-suite .s-goldsoft { fill: none; stroke: var(--gold-line); stroke-width: 1; }
.motion-suite .s-dash { fill: none; stroke: var(--gold-line); stroke-dasharray: 3 4; stroke-width: 1; }
.motion-suite .f-surf { fill: var(--surface-2); }
.motion-suite .f-gold { fill: var(--gold); }
.motion-suite .f-white { fill: var(--white); }
.motion-suite .t,
.motion-suite .t-g,
.motion-suite .t-w { font-family: "IBM Plex Mono", monospace; }
.motion-suite .t { fill: var(--muted); font-size: 8px; letter-spacing: .12em; }
.motion-suite .t-g { fill: var(--gold); font-size: 8px; letter-spacing: .12em; }
.motion-suite .t-w { fill: var(--white); font-size: 8.5px; letter-spacing: .1em; }
.motion-suite .bar { fill: color-mix(in srgb, var(--ink) 14%, transparent); }
.motion-suite .bar-g { fill: var(--gold-dim); }

/* Every reveal stage shares one clock. Completed stages hold together, then
   the entire composition resets as one frame instead of eight drifting loops. */
@keyframes motion-stage-1 { 0%, 2% { opacity: 0; transform: translateY(5px); } 8%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes motion-stage-2 { 0%, 10% { opacity: 0; transform: translateY(5px); } 16%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes motion-stage-3 { 0%, 18% { opacity: 0; transform: translateY(5px); } 24%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes motion-stage-4 { 0%, 26% { opacity: 0; transform: translateY(5px); } 32%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes motion-stage-5 { 0%, 34% { opacity: 0; transform: translateY(5px); } 40%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes motion-stage-6 { 0%, 42% { opacity: 0; transform: translateY(5px); } 48%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes motion-stage-7 { 0%, 50% { opacity: 0; transform: translateY(5px); } 56%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes motion-stage-8 { 0%, 58% { opacity: 0; transform: translateY(5px); } 64%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

.motion-suite .w1,
.motion-suite .w2,
.motion-suite .w3,
.motion-suite .w4,
.motion-suite .w5,
.motion-suite .w6,
.motion-suite .w7,
.motion-suite .w8 {
  animation-duration: var(--loop);
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.22, .72, .22, 1);
  transform-box: fill-box;
}
.motion-suite .w1 { animation-name: motion-stage-1; }
.motion-suite .w2 { animation-name: motion-stage-2; }
.motion-suite .w3 { animation-name: motion-stage-3; }
.motion-suite .w4 { animation-name: motion-stage-4; }
.motion-suite .w5 { animation-name: motion-stage-5; }
.motion-suite .w6 { animation-name: motion-stage-6; }
.motion-suite .w7 { animation-name: motion-stage-7; }
.motion-suite .w8 { animation-name: motion-stage-8; }

@keyframes motion-travel-x {
  0%, 8% { opacity: 0; transform: translateX(0); }
  14% { opacity: 1; }
  58%, 90% { opacity: 1; transform: translateX(var(--tx, 240px)); }
  100% { opacity: 0; transform: translateX(var(--tx, 240px)); }
}
@keyframes motion-draw-in {
  0%, 20% { stroke-dashoffset: var(--len, 40); }
  45%, 92% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: var(--len, 40); }
}
@keyframes motion-seal-pop {
  0%, 42% { opacity: 0; transform: scale(.4); }
  52% { opacity: 1; transform: scale(1.1); }
  60%, 92% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes motion-gate-shut {
  0%, 38% { transform: translateY(var(--gy, -26px)); }
  50%, 92% { transform: translateY(0); }
  100% { transform: translateY(var(--gy, -26px)); }
}
@keyframes motion-soft-pulse { 0%, 100% { opacity: .25; } 50% { opacity: .75; } }
@keyframes motion-grow-x { 0%, 16% { transform: scaleX(0); } 42%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes motion-grow-y { 0%, 16% { transform: scaleY(0); } 42%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes motion-snap-in { 0%, 14% { opacity: 0; transform: translateY(-14px); } 26%, 92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes motion-flow-in { 0%, 10% { opacity: 0; transform: translateX(-18px); } 24%, 92% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes motion-wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes motion-blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes motion-swap-a { 0%, 44% { opacity: 1; } 52%, 92% { opacity: .12; } 100% { opacity: 1; } }
@keyframes motion-swap-b { 0%, 44% { opacity: .12; } 52%, 92% { opacity: 1; } 100% { opacity: .12; } }
@keyframes motion-shake { 0%, 58% { transform: translateX(0); } 62% { transform: translateX(-3px); } 66% { transform: translateX(3px); } 70% { transform: translateX(-2px); } 74%, 100% { transform: translateX(0); } }
@keyframes motion-repel {
  0%, 30% { opacity: 0; transform: translateX(0); }
  38% { opacity: 1; }
  54% { transform: translateX(var(--rx, 64px)); }
  62% { transform: translateX(calc(var(--rx, 64px) - 8px)); }
  74% { opacity: 1; transform: translateX(0); }
  84%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes motion-drift-back {
  0%, 34% { opacity: 0; transform: translateY(var(--dy, 16px)); }
  42% { opacity: 1; }
  66%, 88% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}
@keyframes motion-slide-corpus {
  0%, 20% { opacity: 0; transform: translate(0, 0); }
  30% { opacity: 1; }
  70%, 88% { opacity: 1; transform: translate(var(--sx, 0), var(--sy, -52px)); }
  100% { opacity: 0; }
}
@keyframes motion-rise-out {
  0%, 40% { opacity: 1; transform: translateY(0); }
  56%, 88% { opacity: .12; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.motion-suite .travel { animation: motion-travel-x var(--loop) linear infinite; transform-box: fill-box; }
.motion-suite .draw { animation: motion-draw-in var(--loop) linear infinite; stroke-dasharray: var(--len, 40) var(--len, 40); stroke-linecap: round; }
.motion-suite .seal { animation: motion-seal-pop var(--loop) cubic-bezier(.2, .8, .3, 1) infinite; transform-box: fill-box; transform-origin: center; }
.motion-suite .gate { animation: motion-gate-shut var(--loop) cubic-bezier(.4, 0, .2, 1) infinite; transform-box: fill-box; }
.motion-suite .pulse { animation: motion-soft-pulse calc(var(--loop) / 2) ease-in-out infinite; }
.motion-suite .grow { animation: motion-grow-x var(--loop) cubic-bezier(.4, 0, .2, 1) infinite; transform-box: fill-box; transform-origin: left center; }
.motion-suite .growy { animation: motion-grow-y var(--loop) cubic-bezier(.4, 0, .2, 1) infinite; transform-box: fill-box; transform-origin: bottom center; }
.motion-suite .snap { animation: motion-snap-in var(--loop) cubic-bezier(.3, .8, .3, 1) infinite; transform-box: fill-box; }
.motion-suite .flow { animation: motion-flow-in var(--loop) cubic-bezier(.3, .8, .3, 1) infinite; transform-box: fill-box; }
.motion-suite .wv { animation: motion-wave calc(var(--loop) / 8) ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.motion-suite .blink { animation: motion-blink calc(var(--loop) / 4) steps(1) infinite; }
.motion-suite .swapA { animation: motion-swap-a var(--loop) linear infinite; }
.motion-suite .swapB { animation: motion-swap-b var(--loop) linear infinite; }
.motion-suite .shake { animation: motion-shake var(--loop) linear infinite; transform-box: fill-box; }
.motion-suite .repel { animation: motion-repel var(--loop) cubic-bezier(.3, .7, .4, 1) infinite; transform-box: fill-box; }
.motion-suite .drift { animation: motion-drift-back var(--loop) cubic-bezier(.3, .7, .4, 1) infinite; transform-box: fill-box; }
.motion-suite .tocorpus { animation: motion-slide-corpus var(--loop) cubic-bezier(.4, 0, .2, 1) infinite; transform-box: fill-box; }
.motion-suite .rise { animation: motion-rise-out var(--loop) cubic-bezier(.4, 0, .2, 1) infinite; transform-box: fill-box; }

.motion-suite .travel,
.motion-suite .draw,
.motion-suite .seal,
.motion-suite .gate,
.motion-suite .pulse,
.motion-suite .grow,
.motion-suite .growy,
.motion-suite .snap,
.motion-suite .flow,
.motion-suite .wv,
.motion-suite .blink,
.motion-suite .swapA,
.motion-suite .swapB,
.motion-suite .shake,
.motion-suite .repel,
.motion-suite .drift,
.motion-suite .tocorpus,
.motion-suite .rise {
  animation-fill-mode: both;
}

@media (max-width: 900px) {
  .motion-suite-head { grid-template-columns: 1fr; }
  .motion-meta { grid-template-columns: 1fr; }
  .motion-meta p { grid-column: 1; grid-row: auto; }
}

@media (max-width: 600px) {
  .motion-rail-head { align-items: flex-start; flex-direction: column; gap: .45rem; }
  .motion-stage { padding: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-suite *,
  .motion-suite *::before,
  .motion-suite *::after {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
}