/* One ball, two representations: a mechanism carries it during the push;
   the transfer span takes it only on the connecting chute. Their visibility
   windows meet exactly, and both use the station's existing 80-second clock. */
.scenes { position: relative; grid-template-columns: minmax(0, 1fr); max-width: 600px; width: calc(100% - 64px); }
.machine-station { grid-row: var(--row); grid-column: 1; --pickup-x: 50%; --pickup-y: 160px; --release-x: 70%; --release-y: 180px; }
.machine-route { transform: none; height: 294px; }
.trip-lever { display: none; }
.machine-station::before { content: '→'; left: 24%; right: auto; top: 305px; }
/* Right-side drop, cross the gap, then the left-side inlet of the next scene. */
.machine-station:not(.station-finale)::after {
  content: ''; display: block; position: absolute; top: 244px; right: -26px; left: auto;
  width: 26px; height: 91px; border: 5px solid #bc9556; border-left: 0;
  border-radius: 0 24px 24px 0; transform: none; box-shadow: none;
}
.machine-station:not(.station-finale) .machine-route::before {
  display: block; top: 330px; left: 0; width: 100%; height: 5px;
}
.machine-station:not(.station-finale) .machine-route::after {
  content: ''; position: absolute; top: 330px; left: -26px; right: auto;
  width: 26px; height: 261px; border: 5px solid #bc9556; border-right: 0;
  border-radius: 24px 0 0 24px; background: none;
}
.station-finale .machine-route::before, .station-finale .machine-route::after { display: none; }
.station-number { top: 44px; }
.relay-marble, .payload {
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fffef0 0 9%, #d5f7ed 15%, #78cbc6 38%, #358493 64%, #143e57 85%);
  border: 1px solid #d0fffba8;
  box-shadow: inset -3px -3px 4px #102d4b88, 0 0 10px #b1ffee40, 0 4px 4px #0005;
}
.payload { position: absolute; opacity: 0; z-index: 8; }
.payload::after { content: ''; position: absolute; inset: 7px; border: 2px solid #fff8; border-width: 2px 0 0 2px; border-radius: 50%; box-sizing: border-box; }
.scenes .machine-station .relay-marble {
  margin: -18px; offset-path: none;
  animation: ball-transfer 80s linear var(--station-delay) infinite;
}
.scenes .machine-station .payload { animation: ball-present 80s linear var(--station-delay) infinite; }
@keyframes ball-present {
  0%, 1.7499% { opacity: 0; }
  1.75%, 4.2499% { opacity: 1; }
  4.25%, 100% { opacity: 0; }
}
@keyframes ball-transfer {
  0% { opacity: 1; left: 0; top: 226px; transform: rotate(0deg); }
  1.7499% { opacity: 1; left: var(--pickup-x); top: var(--pickup-y); transform: rotate(360deg); }
  1.75% { opacity: 0; left: var(--pickup-x); top: var(--pickup-y); }
  4.2499% { opacity: 0; left: var(--release-x); top: var(--release-y); }
  4.25% { opacity: 1; left: var(--release-x); top: var(--release-y); transform: rotate(720deg); }
  4.35% { opacity: 1; left: 100%; top: 226px; }
  4.5% { opacity: 1; left: calc(100% + 20px); top: 255px; }
  4.65% { opacity: 1; left: calc(100% + 20px); top: 290px; }
  4.75% { opacity: 1; left: 100%; top: 312px; }
  4.85% { opacity: 1; left: 0; top: 312px; }
  4.9% { opacity: 1; left: -20px; top: 340px; }
  4.95% { opacity: 1; left: -20px; top: 540px; }
  4.9999% { opacity: 1; left: 0; top: 568px; transform: rotate(1440deg); }
  5%, 100% { opacity: 0; left: 0; top: 568px; }
}
/* The ball is genuinely inside these moving carriers, not a progress marker. */
.scenes .machine-station .sisyphus-group { left: 20%; bottom: 50px; animation-name: story-hill; animation-timing-function: linear; }
.rock.payload { position: relative; }
.hill { bottom: 50px; height: 110px; clip-path: polygon(0 100%, calc(20% + 18px) 100%, calc(68% + 18px) 26.36%, 100% 100%); }
@keyframes story-hill {
  0%, 1.75%, 4.5%, 100% { transform: translate(0, 0); }
  3.25%, 4.25% { transform: translate(48cqw, -81px); }
}
.snow-pile, .cart-item, .dirt, .swing-kid, .envelope, .notif, .btn-finger, .elev-finger, .door-hand { visibility: hidden; }
.payload-11 { left: 98px; bottom: 0; }
.scenes .machine-station .shovel-group { animation-name: story-shovel; animation-timing-function: linear; }
@keyframes story-shovel {
  0%, 1.75%, 4.5%, 100% { transform: translateX(calc(55cqw - 116px)); }
  4.25% { transform: translateX(calc(100cqw - 156px)); }
}
.payload-4 { top: -4px; left: 7px; }
.scenes .machine-station .cart-group { animation-name: story-cart; animation-timing-function: linear; }
@keyframes story-cart {
  0%, 1.75%, 4.5%, 100% { transform: translateX(calc(35cqw - 25px)); }
  4.25% { transform: translateX(calc(75cqw - 25px)); }
}
.stroller-hood { opacity: .4; }
.payload-9 { left: 14px; top: 3px; }
.scenes .machine-station .stroller-group { animation-name: story-stroll; animation-timing-function: linear; }
@keyframes story-stroll {
  0%, 1.75%, 4.5%, 100% { transform: translateX(calc(40cqw - 76px)); }
  4.25% { transform: translateX(calc(80cqw - 76px)); }
}
.payload-12 { left: 70px; bottom: 0; }
.scenes .machine-station .mower-group { animation-name: story-mower; animation-timing-function: linear; }
@keyframes story-mower {
  0%, 1.75%, 4.5%, 100% { transform: translateX(calc(50cqw - 88px)); }
  4.25% { transform: translateX(calc(90cqw - 88px)); }
}
.scenes .machine-station .tall-grass { animation-name: story-grass; }
.scenes .machine-station .lawn-cut { animation-name: story-cut; }
@keyframes story-grass { 0%, 1.75%, 4.5%, 100% { clip-path: inset(0 0 0 calc(50% - 18px)); } 4.25% { clip-path: inset(0 0 0 calc(90% - 18px)); } }
@keyframes story-cut { 0%, 1.75%, 4.5%, 100% { clip-path: inset(0 calc(50% + 18px) 0 0); } 4.25% { clip-path: inset(0 calc(10% + 18px) 0 0); } }
.payload-8 { left: 100px; bottom: 0; }
.scenes .machine-station .dozer { animation-name: story-dozer; animation-timing-function: linear; }
@keyframes story-dozer {
  0%, 1.75%, 4.5%, 100% { transform: translateX(calc(55cqw - 118px)); }
  4.25% { transform: translateX(calc(90cqw - 118px)); }
}
.payload-3 { left: 24px; top: -36px; }
.scenes .machine-station .payload-3 { animation: story-lift 80s linear var(--station-delay) infinite, ball-present 80s linear var(--station-delay) infinite; }
@keyframes story-lift { 0%, 1.75%, 3.25%, 4.5%, 100% { transform: translate(0, 0); } 4.25% { transform: translate(70px, -35px); } }
.payload-6 { left: -18px; top: 72px; }
.scenes .machine-station .swing-rope-group { animation-name: story-swing; }
@keyframes story-swing { 0%, 1.75%, 4.5%, 100% { transform: rotate(-24deg); } 3.5%, 4.25% { transform: rotate(24deg); } }
.pawn.payload { position: relative; }
.pawn.payload > div { visibility: hidden; }
.scenes .machine-station .pawn-group { animation-name: story-pawn; animation-timing-function: linear; }
.pawn-hand { bottom: 13px; }
@keyframes story-pawn { 0%, 1.75%, 4.5%, 100% { transform: translateX(25cqw); } 4.25% { transform: translateX(75cqw); } }
.payload-7 { left: -36px; bottom: 40px; }
.scenes .machine-station .payload-7 { animation: story-domino-ball 80s linear var(--station-delay) infinite, ball-present 80s linear var(--station-delay) infinite; }
.domino-hand { visibility: hidden; }
@keyframes story-domino-ball { 0%, 1.75%, 4.5%, 100% { transform: translateX(0); } 2.1% { transform: translateX(5px); } 2.5% { transform: translate(calc(18.6cqw - 12.67px), 21px); } 4.25% { transform: translate(calc(100cqw - 90px), 21px); } }
.payload-5 { left: 32px; top: 4px; }
.scenes .machine-station .payload-5 { animation: story-button-ball 80s ease-in-out var(--station-delay) infinite, ball-present 80s linear var(--station-delay) infinite; }
@keyframes story-button-ball { 0%, 1.75%, 4.25%, 100% { transform: translateY(0); } 2.875%, 3.125% { transform: translateY(15px); } }
.payload-13 { left: 172px; top: 53px; }
.scenes .machine-station .payload-13 { animation: story-elevator-ball 80s ease-in-out var(--station-delay) infinite, ball-present 80s linear var(--station-delay) infinite; }
@keyframes story-elevator-ball { 0%, 1.75%, 4.25%, 100% { transform: translateX(18px); } 2.125%, 3.5% { transform: translateX(0); } }
@property --story-door-angle { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.scenes .machine-station .door-stage { animation: story-door-turn 80s ease-in-out var(--station-delay) infinite; }
.scenes .machine-station .door-panel { animation: none; transform: rotateY(var(--story-door-angle)); }
.payload-17 { left: calc(38px + 110px * cos(var(--story-door-angle))); top: 80px; }
@keyframes story-door-turn { 0%, 1.75%, 4.5%, 100% { --story-door-angle: 0deg; } 2.9%, 4.25% { --story-door-angle: -68deg; } }
.mail-slot { top: 28px; width: 40px; height: 40px; border-radius: 50%; }
.mail-slot::after { display: none; }
.payload-2 { left: 42px; top: 30px; }
.scenes .machine-station .payload-2 { animation: story-post 80s linear var(--station-delay) infinite, ball-present 80s linear var(--station-delay) infinite; }
@keyframes story-post { 0%, 1.75%, 2.2%, 4.5%, 100% { transform: translateY(0); } 4.25% { transform: translate(36px, 68px); } }
.payload-10 { left: calc(50% - 18px); top: 2px; }
.scenes .machine-station .payload-10 { animation: story-phone 80s ease-in-out var(--station-delay) infinite, ball-present 80s linear var(--station-delay) infinite; }
@keyframes story-phone { 0%, 1.75%, 4.5%, 100% { transform: translateY(0); } 2.6% { transform: translateY(70px); } 3.1% { transform: translateY(35px); } 4.25% { transform: translateY(70px); } }
.payload-15 { left: 22px; top: -36px; }
.payload-20 { left: 34px; top: 0; }
.scenes .machine-station .payload-16 { animation: relay-springLaunch 80s ease-in-out var(--station-delay) infinite, ball-present 80s linear var(--station-delay) infinite; }
.scenes .machine-station .payload-18 { animation: relay-marbleRoll 80s linear var(--station-delay) infinite, ball-present 80s linear var(--station-delay) infinite; }
/* The final ball docks in a transparent cargo window and stays inside the
   rocket until it reaches the first station. Scene paint containment would
   clip that flight, so only the finale opens its bounds. */
.scene-rocket { overflow: visible; contain: layout; z-index: 50; }
.rocket-window.payload { left: 2px; top: 20px; width: 36px; height: 36px; border: 2px solid #bfd8df; }
.scenes .machine-station .payload-19 { animation: rocket-cargo 80s linear var(--station-delay) infinite; }
.scenes .machine-station .rocket { animation: rocket-home 80s linear var(--station-delay) infinite; z-index: 60; }
.scenes .station-finale .relay-marble { animation-name: rocket-loading; }
@keyframes rocket-loading {
  0% { opacity: 1; left: 0; top: 226px; transform: rotate(0deg); }
  1.7499% { opacity: 1; left: var(--pickup-x); top: var(--pickup-y); transform: rotate(360deg); }
  1.75%, 100% { opacity: 0; left: var(--pickup-x); top: var(--pickup-y); }
}
@keyframes rocket-cargo { 0%, 1.7499% { opacity: 0; } 1.75%, 4.9999% { opacity: 1; } 5%, 100% { opacity: 0; } }
/* 6498px = 19 handoffs × (260px scene + 34px inlet + 48px gap). */
@keyframes rocket-home {
  0%, 1.75%, 2.35%, 5%, 100% { transform: translate(0, 0); }
  2.8% { transform: translate(calc(-50cqw - 56px), -80px); }
  4.65% { transform: translate(calc(-50cqw - 56px), calc(-6498px + 64px)); }
  4.9999% { transform: translate(calc(-50cqw - 38px), calc(-6498px + 64px)); }
}
.scenes::before { content: ''; position: absolute; top: 226px; bottom: 150px; left: -18px; width: 2px; background: repeating-linear-gradient(#76c9c650 0 5px, transparent 5px 12px); pointer-events: none; }
@media (max-width: 420px) { body { padding-inline: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .scenes *, .scenes *::before, .scenes *::after { animation: none !important; }
  .scenes .machine-station .relay-marble { opacity: 0; }
  .scenes .machine-station .payload { opacity: 1; }
  .scenes .machine-station .rocket { transform: none; }
  .scenes .machine-station .sisyphus-group { transform: translate(24cqw, -40px); }
  .scenes .machine-station .shovel-group { transform: translateX(calc(65cqw - 116px)); left: 0; }
  .scenes .machine-station .cart-group { transform: translateX(calc(50cqw - 25px)); left: 0; }
  .scenes .machine-station .stroller-group { transform: translateX(calc(55cqw - 76px)); left: 0; }
  .scenes .machine-station .mower-group { transform: translateX(calc(65cqw - 88px)); left: 0; }
  .scenes .machine-station .dozer { transform: translateX(calc(65cqw - 118px)); left: 0; }
  .scenes .machine-station .pawn-group { transform: translateX(45cqw); left: 0; }
  .door-stage { --story-door-angle: -55deg; }
}

/* Keep the button panel and the first domino inside the ball's working area. */
.elevator-shaft { left: calc(50% - 36px); }
.domino-row { left: 44px; right: 44px; }
.scenes .machine-station .payload-18 { animation-name: story-marble-roll, ball-present; }
@keyframes story-marble-roll { 0%, 1.75%, 4.5%, 100% { offset-distance: 0%; } 3.8%, 4.25% { offset-distance: var(--run-end); } }

/* Pickup and release positions are the actual carrier centers. Percentages
   account for card width; pixel offsets account for each mechanism. */
.station-object-1 { --pickup-x: calc(20% + 18.594px); --pickup-y: 225px; --release-x: calc(68% + 17.634px); --release-y: 144px; }
.station-object-11 { --pickup-x: calc(55% - 0.1px); --pickup-y: 213px; --release-x: calc(100% - 41px); --release-y: 213px; }
.station-object-4 { --pickup-x: calc(35% + 3.3px); --pickup-y: 225px; --release-x: calc(75% + 2.5px); --release-y: 225px; }
.station-object-9 { --pickup-x: calc(40% + 0.2px); --pickup-y: 218px; --release-x: calc(80% - 0.6px); --release-y: 218px; }
.station-object-12 { --pickup-x: 50%; --pickup-y: 211px; --release-x: calc(90% - 0.8px); --release-y: 211px; }
.station-object-8 { --pickup-x: calc(55% - 0.1px); --pickup-y: 223px; --release-x: calc(90% - 0.8px); --release-y: 223px; }
.station-object-3 { --pickup-x: calc(50% + 5.368px); --pickup-y: 194.056px; --release-x: calc(50% + 68.227px); --release-y: 147.432px; }
.station-object-6 { --pickup-x: calc(50% + 36.606px); --pickup-y: 141.219px; --release-x: calc(50% - 36.606px); --release-y: 141.219px; }
.station-object-14 { --pickup-x: calc(25% + 18.5px); --pickup-y: 197.609px; --release-x: calc(75% + 17.5px); --release-y: 197.609px; }
.station-object-7 { --pickup-x: 27px; --pickup-y: 181px; --release-x: calc(100% - 65px); --release-y: 202px; }
.station-object-5 { --pickup-x: 50%; --pickup-y: 132px; --release-x: 50%; --release-y: 132px; }
.station-object-13 { --pickup-x: calc(50% + 102px); --pickup-y: 128px; --release-x: calc(50% + 102px); --release-y: 128px; }
.station-object-17 { --pickup-x: calc(50% + 71px); --pickup-y: 153px; --release-x: calc(50% + 2.203px); --release-y: 153px; }
.station-object-2 { --pickup-x: 50%; --pickup-y: 137px; --release-x: calc(50% + 36px); --release-y: 205px; }
.station-object-10 { --pickup-x: 50%; --pickup-y: 106px; --release-x: 50%; --release-y: 176px; }
.station-object-15 { --pickup-x: calc(50% + 16.011px); --pickup-y: 65.976px; --release-x: calc(50% + 16.011px); --release-y: 65.976px; }
.station-object-20 { --pickup-x: calc(50% + 98px); --pickup-y: 159px; --release-x: calc(50% + 98px); --release-y: 159px; }
.station-object-16 { --pickup-x: calc(50% + 41px); --pickup-y: 197px; --release-x: calc(50% + 41px); --release-y: 197px; }
.station-object-18 { --pickup-x: calc(8% + 17.64px); --pickup-y: 99.8px; --release-x: calc(20% + 12.6px); --release-y: 209.68px; }
.station-object-19 { --pickup-x: calc(50% + 38px); --pickup-y: 163px; }
/* Leave room for the spring's highest forward bounce on small cards. */
.spring-stage { left: calc(50% - 8px); }
.station-object-16 { --pickup-x: calc(50% + 33px); --release-x: calc(50% + 33px); }

/* The older fixed SVG-style path has the same pickup and release contract. */
@supports not (offset-path: shape(from 0% 0%, line to 100% 100%)) {
  .station-object-18 {
    --pickup-x: calc(50% - 99.8px); --pickup-y: 99.8px;
    --release-x: calc(50% - 71px); --release-y: 209.68px;
  }
}
/* A loading ramp leads the incoming ball directly into the cargo window. */
.scene-rocket::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, #f5d593, #bc9556);
  clip-path: polygon(0 210px, calc(50% + 38px) 147px, calc(50% + 38px) 151px, 0 214px);
}

/* The button calls the next station's elevator before the ball arrives. The
   inherited lift distance keeps the car, cable, cargo, and exit in sync. */
@property --lift-drop { syntax: '<length>'; inherits: true; initial-value: 0px; }
.entry-marble { display: none; }
.station-number { top: 10px; }
.machine-station > .scene-label {
  top: 5px; bottom: auto; left: auto; right: 40px; padding: 0;
  max-width: calc(100% - 80px); background: none; font-size: .8rem; line-height: 1.3; white-space: normal;
}
.scenes .machine-station .elevator-shaft { animation: lift-descent 80s cubic-bezier(.45, 0, .55, 1) var(--station-delay) infinite; }
.elevator-cable { position: absolute; left: 69px; top: 0; width: 2px; height: calc(20px + var(--lift-drop)); background: #879bac; }
.elevator-car { position: absolute; left: 20px; top: 20px; width: 100px; height: 50px; transform: translateY(var(--lift-drop)); z-index: 1; }
.elevator-car::before { content: ''; position: absolute; inset: -5px 0 0; border: 2px solid #94a9b870; border-bottom: 0; background: linear-gradient(90deg, #a9dce522, #a9dce505); }
.elevator-car-floor { position: absolute; left: 0; top: 46px; width: 100px; height: 6px; border-radius: 3px; background: linear-gradient(#d9e6ed, #637889); box-shadow: 0 4px 6px #0005; }
.scenes .machine-station .payload-13 { left: 32px; top: 10px; animation: ball-present 80s linear var(--station-delay) infinite; }
.station-object-13 { --pickup-x: calc(50% - 36px); --pickup-y: 105px; --release-x: calc(50% - 36px); --release-y: 225px; }
@keyframes lift-descent {
  0%, 2.6%, 4.5%, 100% { --lift-drop: 0px; }
  3.7%, 4.25% { --lift-drop: 120px; }
}
.elev-door-l, .elev-door-r { background: linear-gradient(90deg, #93b1bd40, #bfe5eb18 45%, #93b1bd40); border-color: #607f8c; }
.scenes .machine-station .elev-door-l { animation-name: called-elevator-left; }
.scenes .machine-station .elev-door-r { animation-name: called-elevator-right; }
.scenes .machine-station .elev-btn.active { animation-name: called-elevator-light; }
@keyframes called-elevator-left {
  0%, 1.85%, 4.1%, 4.45%, 98.45%, 100% { transform: translateX(-96%); }
  2.6%, 3.7%, 4.8%, 97.8749% { transform: translateX(0); }
}
@keyframes called-elevator-right {
  0%, 1.85%, 4.1%, 4.45%, 98.45%, 100% { transform: translateX(96%); }
  2.6%, 3.7%, 4.8%, 97.8749% { transform: translateX(0); }
}
@keyframes called-elevator-light {
  0%, 4.45%, 97.875%, 100% { background: #f5cd72; box-shadow: 0 0 8px #f5cd7260; }
  4.8%, 97.8749% { background: #3a2a1a; box-shadow: none; }
}
/* Traveling carriers decelerate into the release rather than abruptly stop.
   Grass clipping uses the same easing as the mower's movement. */
.scenes .machine-station .sisyphus-group,
.scenes .machine-station .shovel-group,
.scenes .machine-station .cart-group,
.scenes .machine-station .stroller-group,
.scenes .machine-station .mower-group,
.scenes .machine-station .dozer,
.scenes .machine-station .pawn-group,
.scenes .machine-station .tall-grass,
.scenes .machine-station .lawn-cut { animation-timing-function: cubic-bezier(.45, 0, .55, 1); }

/* Each bridge owns the ball all the way to the next mechanism's pickup.
   Its two-second journey spans the scene boundary on the same 80s clock.
   The path is explicitly retraced because shape() closes its reference path;
   only its outward half (0–50% distance) is animated. Older browsers keep the
   previous chute animation, while the elevator car works in either mode. */
@supports (offset-path: shape(from 0% 0%, line to 100% 100%)) and (clip-path: shape(from 0% 0%, line to 100% 100%, close)) {
  .machine-route { container-type: inline-size; }
  .machine-station {
    --handoff-path: shape(from var(--release-x) var(--release-y),
      curve to calc(100cqw + 20px) 312px with min(calc(var(--release-x) + 80px), calc(100cqw + 20px)) calc(var(--release-y) + 20px) / calc(100cqw + 20px) 260px,
      curve to var(--next-pickup-x) calc(342px + var(--next-pickup-y)) with calc(100cqw + 20px) 390px / var(--next-pickup-x) calc(282px + var(--next-pickup-y)),
      curve to calc(100cqw + 20px) 312px with var(--next-pickup-x) calc(282px + var(--next-pickup-y)) / calc(100cqw + 20px) 390px,
      curve to var(--release-x) var(--release-y) with calc(100cqw + 20px) 260px / min(calc(var(--release-x) + 80px), calc(100cqw + 20px)) calc(var(--release-y) + 20px), close);
  }
  .machine-station::before, .machine-station::after, .machine-route::after { display: none !important; }
  .scenes .machine-station .machine-route::before {
    display: block; top: 18px; left: 0; width: calc(100cqw + 24px); height: 640px;
    border-radius: 0; box-shadow: none; background: linear-gradient(135deg, #efd18d90, #bb9255b0);
    /* Container units share one coordinate system even beyond the card edge. */
    clip-path: shape(from calc(var(--release-x) - 2px) calc(var(--release-y) + 2px),
      curve to calc(100cqw + 18px) 312px with calc(min(calc(var(--release-x) + 80px), calc(100cqw + 20px)) - 2px) calc(var(--release-y) + 22px) / calc(100cqw + 18px) 262px,
      curve to calc(var(--next-pickup-x) - 2px) calc(340px + var(--next-pickup-y)) with calc(100cqw + 18px) 388px / calc(var(--next-pickup-x) - 2px) calc(280px + var(--next-pickup-y)),
      line to calc(var(--next-pickup-x) + 2px) calc(344px + var(--next-pickup-y)),
      curve to calc(100cqw + 22px) 312px with calc(var(--next-pickup-x) + 2px) calc(284px + var(--next-pickup-y)) / calc(100cqw + 22px) 392px,
      curve to calc(var(--release-x) + 2px) calc(var(--release-y) - 2px) with calc(100cqw + 22px) 258px / calc(min(calc(var(--release-x) + 80px), calc(100cqw + 20px)) + 2px) calc(var(--release-y) + 18px), close);
  }
  .scenes .machine-station .relay-marble {
    left: 0; top: 0; margin: 0; offset-path: var(--handoff-path); offset-anchor: center; offset-rotate: 0deg;
    animation: integrated-handoff 80s cubic-bezier(.4, 0, .3, 1) var(--station-delay) infinite;
  }
  .relay-marble::after { inset: 7px; animation: handoff-spin 80s linear var(--station-delay) infinite; }
  .station-finale .relay-marble, .station-finale .machine-route::before { display: none !important; }
  .entry-marble {
    display: block; position: absolute; width: 36px; height: 36px; margin: -18px;
    border-radius: 50%; border: 1px solid #d0fffba8;
    background: radial-gradient(circle at 30% 25%, #fffef0 0 9%, #d5f7ed 15%, #78cbc6 38%, #358493 64%, #143e57 85%);
    box-shadow: inset -3px -3px 4px #102d4b88, 0 0 10px #b1ffee40, 0 4px 4px #0005;
    animation: starter-delivery 80s cubic-bezier(.45, 0, .55, 1) var(--station-delay) infinite;
  }
  .entry-marble::after { content: ''; position: absolute; inset: 7px; border: 2px solid #fff8; border-width: 2px 0 0 2px; border-radius: 50%; }
  @keyframes integrated-handoff {
    0%, 4.2499% { opacity: 0; offset-distance: 0%; }
    4.25% { opacity: 1; offset-distance: 0%; }
    6.7499% { opacity: 1; offset-distance: 50%; }
    6.75%, 100% { opacity: 0; offset-distance: 50%; }
  }
  @keyframes handoff-spin { 0%, 4.25% { transform: rotate(0deg); } 6.75%, 100% { transform: rotate(720deg); } }
  @keyframes starter-delivery {
    0% { opacity: 1; left: 0; top: 226px; transform: rotate(0deg); }
    1.7499% { opacity: 1; left: var(--pickup-x); top: var(--pickup-y); transform: rotate(360deg); }
    1.75%, 100% { opacity: 0; left: var(--pickup-x); top: var(--pickup-y); }
  }
  .station-object-1 { --next-pickup-x: calc(55cqw - 0.1px); --next-pickup-y: 213px; }
  .station-object-11 { --next-pickup-x: calc(35cqw + 3.3px); --next-pickup-y: 225px; }
  .station-object-4 { --next-pickup-x: calc(40cqw + 0.2px); --next-pickup-y: 218px; }
  .station-object-9 { --next-pickup-x: 50cqw; --next-pickup-y: 211px; }
  .station-object-12 { --next-pickup-x: calc(55cqw - 0.1px); --next-pickup-y: 223px; }
  .station-object-8 { --next-pickup-x: calc(50cqw + 5.368px); --next-pickup-y: 194.056px; }
  .station-object-3 { --next-pickup-x: calc(50cqw + 36.606px); --next-pickup-y: 141.219px; }
  .station-object-6 { --next-pickup-x: calc(25cqw + 18.5px); --next-pickup-y: 197.609px; }
  .station-object-14 { --next-pickup-x: 27px; --next-pickup-y: 181px; }
  .station-object-7 { --next-pickup-x: 50cqw; --next-pickup-y: 132px; }
  .station-object-5 { --next-pickup-x: calc(50cqw - 36px); --next-pickup-y: 105px; }
  .station-object-13 { --next-pickup-x: calc(50cqw + 71px); --next-pickup-y: 153px; }
  .station-object-17 { --next-pickup-x: 50cqw; --next-pickup-y: 137px; }
  .station-object-2 { --next-pickup-x: 50cqw; --next-pickup-y: 106px; }
  .station-object-10 { --next-pickup-x: calc(50cqw + 16.011px); --next-pickup-y: 65.976px; }
  .station-object-15 { --next-pickup-x: calc(50cqw + 98px); --next-pickup-y: 159px; }
  .station-object-20 { --next-pickup-x: calc(50cqw + 33px); --next-pickup-y: 197px; }
  .station-object-16 { --next-pickup-x: calc(8cqw + 17.64px); --next-pickup-y: 99.8px; }
  .station-object-18 { --next-pickup-x: calc(50cqw + 38px); --next-pickup-y: 163px; }
  /* Pressing the button opens the lift; its ball then rolls directly into
     the waiting car rather than circling around another side rail. */
  .station-object-5 {
    --handoff-path: shape(from var(--release-x) var(--release-y),
      curve to var(--next-pickup-x) calc(342px + var(--next-pickup-y)) with var(--release-x) calc(var(--release-y) + 96px) / var(--next-pickup-x) calc(246px + var(--next-pickup-y)),
      curve to var(--release-x) var(--release-y) with var(--next-pickup-x) calc(246px + var(--next-pickup-y)) / var(--release-x) calc(var(--release-y) + 96px), close);
  }
  .scenes .station-object-5 .machine-route::before {
    clip-path: shape(from calc(var(--release-x) - 2px) calc(var(--release-y) - 2px),
      curve to calc(var(--next-pickup-x) - 2px) calc(340px + var(--next-pickup-y)) with calc(var(--release-x) - 2px) calc(var(--release-y) + 94px) / calc(var(--next-pickup-x) - 2px) calc(244px + var(--next-pickup-y)),
      line to calc(var(--next-pickup-x) + 2px) calc(344px + var(--next-pickup-y)),
      curve to calc(var(--release-x) + 2px) calc(var(--release-y) + 2px) with calc(var(--next-pickup-x) + 2px) calc(248px + var(--next-pickup-y)) / calc(var(--release-x) + 2px) calc(var(--release-y) + 98px), close);
  }


  .station-object-1 { --release-x: calc(68cqw + 17.634px); --release-y: 144px; }
  .station-object-11 { --release-x: calc(100cqw - 41px); --release-y: 213px; }
  .station-object-4 { --release-x: calc(75cqw + 2.5px); --release-y: 225px; }
  .station-object-9 { --release-x: calc(80cqw - 0.6px); --release-y: 218px; }
  .station-object-12 { --release-x: calc(90cqw - 0.8px); --release-y: 211px; }
  .station-object-8 { --release-x: calc(90cqw - 0.8px); --release-y: 223px; }
  .station-object-3 { --release-x: calc(50cqw + 68.227px); --release-y: 147.432px; }
  .station-object-6 { --release-x: calc(50cqw - 36.606px); --release-y: 141.219px; }
  .station-object-14 { --release-x: calc(75cqw + 17.5px); --release-y: 197.609px; }
  .station-object-7 { --release-x: calc(100cqw - 65px); --release-y: 202px; }
  .station-object-5 { --release-x: 50cqw; --release-y: 132px; }
  .station-object-13 { --release-x: calc(50cqw - 36px); --release-y: 225px; }
  .station-object-17 { --release-x: calc(50cqw + 2.203px); --release-y: 153px; }
  .station-object-2 { --release-x: calc(50cqw + 36px); --release-y: 205px; }
  .station-object-10 { --release-x: 50cqw; --release-y: 176px; }
  .station-object-15 { --release-x: calc(50cqw + 16.011px); --release-y: 65.976px; }
  .station-object-20 { --release-x: calc(50cqw + 98px); --release-y: 159px; }
  .station-object-16 { --release-x: calc(50cqw + 33px); --release-y: 197px; }
  .station-object-18 { --release-x: calc(20cqw + 12.6px); --release-y: 209.68px; }
}
@media (prefers-reduced-motion: reduce) {
  .entry-marble { display: none; }
  .scenes .machine-station .elevator-shaft { --lift-drop: 60px; }
  .elev-door-l { transform: translateX(-96%); }
  .elev-door-r { transform: translateX(96%); }
}

/* The switch also releases the ball into the lift: the center gate opens
   after the press, stays open until delivery, then closes for the next loop. */
@property --button-opening { syntax: '<length>'; inherits: true; initial-value: 0px; }
.scenes .machine-station .button-stage { animation: button-release-gate 80s linear var(--station-delay) infinite; }
.btn-dome, .btn-base {
  mask-image: linear-gradient(90deg, #000 calc(50% - var(--button-opening)), transparent calc(50% - var(--button-opening)), transparent calc(50% + var(--button-opening)), #000 calc(50% + var(--button-opening)));
}
@keyframes button-release-gate {
  0%, 4.15%, 7%, 100% { --button-opening: 0px; }
  4.25%, 6.75% { --button-opening: 20px; }
}