/* The relay is an 80-second clock: 20 stations × 4 seconds.
   --step belongs to the station, so artwork, latch, light, and marble share
   exactly the same phase. The rail follows DOM order at either breakpoint. */
.scenes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  width: calc(100% - 56px);
  max-width: 960px;
  padding-bottom: 30px;
}
.gallery-heading { max-width: 1016px; }
.machine-control, .machine-note {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font: 0.85rem/1.6 system-ui, sans-serif;
  color: #d6c5a6;
  margin: 12px auto;
}
.machine-control { width: fit-content; cursor: pointer; border: 1px solid #b8945550; padding: 9px 16px; border-radius: 999px; background: #0a1626; }
.machine-control input { accent-color: #efc477; width: 17px; height: 17px; }
.machine-control:focus-within { outline: 2px solid #efc477; outline-offset: 4px; }
.machine-note { margin-bottom: 34px; text-align: center; max-width: 520px; }
.machine-station {
  --station-delay: calc(var(--step) * 4s - 80s);
  position: relative;
  grid-row: var(--row);
  grid-column: var(--column);
  min-width: 0;
  padding-top: 34px;
}
.machine-station .scene {
  grid-column: auto;
  border-color: #b08b4c70;
  border-radius: 9px;
  box-shadow: 0 14px 28px #0004, inset 0 0 0 3px #d2b5760c;
  animation: station-light 80s linear var(--station-delay) infinite;
}
.station-number {
  position: absolute;
  top: 44px;
  left: 10px;
  z-index: 30;
  border: 1px solid #c09c5c70;
  border-radius: 4px;
  padding: 4px 7px;
  color: #f7db9f;
  background: #101a24d9;
  font: 600 0.65rem/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
}
.machine-station::after, .machine-route::after, .trip-lever::before { box-sizing: border-box; }
.machine-route {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  z-index: 40;
  pointer-events: none;
}
.machine-route::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: calc(100% + 48px);
  height: 5px;
  border-radius: 4px;
  background: linear-gradient(#f5d593, #8d6837 48%, #ddae63);
  box-shadow: 0 3px 0 #050b13, 0 -1px 0 #ffe5ad30;
}
/* The last station in each row bends down into the next row. */
.station-turn .machine-route::before { width: 100%; }
.station-turn::after {
  content: '';
  position: absolute;
  top: 8px;
  right: -26px;
  width: 26px;
  height: 347px;
  border: 5px solid #bc9556;
  border-left: 0;
  border-radius: 0 24px 24px 0;
  box-shadow: 2px 0 0 #050b13;
}
.station-reverse .machine-route { transform: scaleX(-1); }
.station-reverse.station-turn::after { right: auto; left: -26px; transform: scaleX(-1); }
.trip-lever {
  position: absolute;
  left: calc(50% - 3px);
  top: 9px;
  width: 6px;
  height: 30px;
  border-radius: 4px;
  background: linear-gradient(90deg, #8d6535, #f3d18b, #976f39);
  transform-origin: 50% 5px;
  animation: relay-latch 80s ease-in-out var(--station-delay) infinite;
}
.trip-lever::before { content: ''; position: absolute; left: -4px; top: -4px; width: 14px; height: 14px; border: 3px solid #d7b272; background: #162534; border-radius: 50%; }
.trip-lever::after { content: ''; position: absolute; left: -8px; bottom: -4px; width: 22px; height: 9px; border-radius: 3px; background: #bd975c; box-shadow: 0 2px 3px #0006; }
.relay-marble {
  position: absolute;
  top: -1px;
  left: 0;
  width: 18px;
  height: 18px;
  margin: -9px;
  z-index: 2;
  border-radius: 50%;
  opacity: 0;
  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 12px #b1ffee50, 0 4px 4px #0006;
  animation: relay-travel 80s linear var(--station-delay) infinite;
}
.machine-station .marble-finger { width: 22px; left: calc(8% - 34px); }
.marble-ball, .spring-ball { background: radial-gradient(circle at 30% 25%, #fffef0 0 9%, #d5f7ed 15%, #78cbc6 38%, #358493 64%, #143e57 85%); }
.relay-marble::after { content: ''; position: absolute; inset: 3px; border: 2px solid #fff9; border-width: 2px 0 0 2px; border-radius: 50%; }
.station-turn .relay-marble { animation-name: relay-turn; }
.station-finale::after { display: none; }
.station-finale .machine-route::before { width: 100%; }
.station-finale .relay-marble { animation-name: relay-finish; }
/* Arrowheads remain readable when the machine is paused. */
.machine-station::before { content: '→'; position: absolute; top: -17px; left: 24%; color: #c7a36c; font: 16px/1 system-ui, sans-serif; }
.station-reverse::before { content: '←'; left: auto; right: 24%; }
@keyframes relay-travel {
  0% { opacity: 1; left: 0; top: -1px; transform: rotate(0deg); }
  1.6%, 2.4% { opacity: 1; left: 50%; top: -1px; transform: rotate(360deg); }
  4.25% { opacity: 1; left: 100%; top: -1px; transform: rotate(720deg); }
  4.999% { opacity: 1; left: calc(100% + 48px); top: -1px; transform: rotate(810deg); }
  5%, 100% { opacity: 0; left: calc(100% + 48px); top: -1px; }
}
@keyframes relay-turn {
  0% { opacity: 1; left: 0; top: -1px; transform: rotate(0deg); }
  1.6%, 2.4% { opacity: 1; left: 50%; top: -1px; transform: rotate(360deg); }
  4.25% { opacity: 1; left: 100%; top: -1px; transform: rotate(720deg); }
  4.35% { opacity: 1; left: calc(100% + 24px); top: 28px; }
  4.85% { opacity: 1; left: calc(100% + 24px); top: 314px; }
  4.999% { opacity: 1; left: 100%; top: 341px; transform: rotate(1080deg); }
  5%, 100% { opacity: 0; left: 100%; top: 341px; }
}
@keyframes relay-finish {
  0% { opacity: 1; left: 0; top: -1px; transform: rotate(0deg); }
  1.6%, 2.4% { opacity: 1; left: 50%; top: -1px; transform: rotate(360deg); }
  4.5% { opacity: 1; left: 100%; top: -1px; transform: rotate(720deg); }
  5%, 100% { opacity: 0; left: 100%; top: -1px; }
}
@keyframes relay-latch { 0%, 1.6%, 3%, 100% { transform: rotate(0deg); } 1.75%, 2.4% { transform: rotate(-28deg); } }
@keyframes station-light {
  0%, 1.6%, 4.5%, 100% { border-color: #b08b4c70; box-shadow: 0 14px 28px #0004, inset 0 0 0 3px #d2b5760c; }
  1.75%, 4.25% { border-color: #ffe2a5; box-shadow: 0 14px 28px #0004, 0 0 22px #e4b46a40, inset 0 0 0 3px #d2b57618; }
}
.scenes .machine-station .sisyphus-group { animation-name: relay-climbHill; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .rock { animation-name: relay-rockRoll; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-climbHill {
  0% { transform: translate(0, 0); }
  1.75% { transform: translate(0, 0); }
  3% { transform: translate(140px, -90px); }
  3.05% { transform: translate(140px, -90px); }
  4.25% { transform: translate(0, 0); }
  4.5%, 100% { transform: translate(0, 0); }
}
@keyframes relay-rockRoll {
  0% { transform: rotate(0deg); }
  1.75% { transform: rotate(0deg); }
  3% { transform: rotate(360deg); }
  4.25% { transform: rotate(0deg); }
  4.5%, 100% { transform: rotate(0deg); }
}
.scenes .machine-station .envelope { animation-name: relay-pushMail; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-pushMail {
  0% { transform: translate(-50%, 0) scaleY(1); opacity: 1; }
  1.75%, 2.125% { transform: translate(-50%, 0) scaleY(1); opacity: 1; }
  2.7% { transform: translate(-50%, 68px) scaleY(1); opacity: 1; }
  3.125% { transform: translate(-50%, 100px) scaleY(0.08); opacity: 1; }
  3.25% { transform: translate(-50%, 102px) scaleY(0); opacity: 0; }
  3.375%, 3.625% { transform: translate(-50%, 0) scaleY(1); opacity: 0; }
  4%, 4.25% { transform: translate(-50%, 0) scaleY(1); opacity: 1; }
  4.5%, 100% { transform: translate(-50%, 0) scaleY(1); opacity: 1; }
}
.scenes .machine-station .pushup-figure .pu-head { animation-name: relay-pushupHead; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .pushup-figure .pu-body { animation-name: relay-pushupBody; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .pushup-figure .pu-arm-l { animation-name: relay-pushupArmL; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .pushup-figure .pu-arm-r { animation-name: relay-pushupArmR; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .pushup-figure .pu-legs { animation-name: relay-pushupLegs; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .sweat { animation-name: relay-sweatDrop; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-pushupHead {
  0% { transform: translateY(0); }
  1.75%, 4.25% { transform: translateY(0); }
  3% { transform: translateY(8px) rotate(3deg); }
  4.5%, 100% { transform: translateY(0); }
}
@keyframes relay-pushupBody {
  0% { transform: translateY(0) rotate(-10deg); }
  1.75%, 4.25% { transform: translateY(0) rotate(-10deg); }
  3% { transform: translateY(8px) rotate(-3deg); }
  4.5%, 100% { transform: translateY(0) rotate(-10deg); }
}
@keyframes relay-pushupArmL {
  0% { transform: rotate(12deg) scaleY(1); }
  1.75%, 4.25% { transform: rotate(12deg) scaleY(1); }
  3% { transform: rotate(24deg) scaleY(0.7); }
  4.5%, 100% { transform: rotate(12deg) scaleY(1); }
}
@keyframes relay-pushupArmR {
  0% { transform: rotate(2deg) scaleY(1); }
  1.75%, 4.25% { transform: rotate(2deg) scaleY(1); }
  3% { transform: rotate(12deg) scaleY(0.7); }
  4.5%, 100% { transform: rotate(2deg) scaleY(1); }
}
@keyframes relay-pushupLegs {
  0% { transform: rotate(16deg); }
  1.75%, 4.25% { transform: rotate(16deg); }
  3% { transform: rotate(0deg); }
  4.5%, 100% { transform: rotate(16deg); }
}
@keyframes relay-sweatDrop {
  0% { opacity: 0; transform: translateY(0); }
  1.75% { opacity: 0; transform: translateY(0); }
  2.5% { opacity: 1; }
  4.25% { opacity: 0; transform: translateY(20px); }
  4.5%, 100% { opacity: 0; transform: translateY(0); }
}
.scenes .machine-station .cart-group { animation-name: relay-pushCart; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-pushCart {
  0% { left: -80px; }
  1.75% { left: -80px; }
  4.25% { left: 110%; }
  4.5%, 100% { left: -80px; }
}
.scenes .machine-station .btn-dome { animation-name: relay-buttonPush; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .btn-finger { animation-name: relay-fingerPush; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .btn-sparkle { animation-name: relay-sparkle; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-buttonPush {
  0% { transform: scaleY(1); }
  1.75%, 4.25% { transform: scaleY(1); }
  2.875%, 3.125% { transform: scaleY(0.7); }
  4.5%, 100% { transform: scaleY(1); }
}
@keyframes relay-fingerPush {
  0% { transform: translateY(0); }
  1.75%, 4.25% { transform: translateY(0); }
  2.875%, 3.125% { transform: translateY(35px); }
  4.5%, 100% { transform: translateY(0); }
}
@keyframes relay-sparkle {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.5); }
  1.75%, 2.75% { opacity: 0; transform: translate(-50%, 0) scale(0.5); }
  3% { opacity: 1; transform: translate(-50%, -10px) scale(1.2); }
  3.375%, 4.25% { opacity: 0; transform: translate(-50%, -20px) scale(0.8); }
  4.5%, 100% { opacity: 0; transform: translate(-50%, 0) scale(0.5); }
}
.scenes .machine-station .swing-rope-group { animation-name: relay-swingMotion; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .swing-parent .sp-arm { animation-name: relay-parentPush; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-swingMotion {
  0% { transform: translateX(-50%) rotate(25deg); }
  1.75% { transform: translateX(-50%) rotate(25deg); }
  4.25% { transform: translateX(-50%) rotate(-25deg); }
  4.5%, 100% { transform: translateX(-50%) rotate(25deg); }
}
@keyframes relay-parentPush {
  0% { transform: rotate(-15deg); }
  1.75% { transform: rotate(-15deg); }
  4.25% { transform: rotate(15deg); }
  4.5%, 100% { transform: rotate(-15deg); }
}
.scenes .machine-station .domino:nth-of-type(1) { animation-name: relay-tip1; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .domino:nth-of-type(2) { animation-name: relay-tip2; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .domino:nth-of-type(3) { animation-name: relay-tip3; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .domino:nth-of-type(4) { animation-name: relay-tip4; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .domino:nth-of-type(5) { animation-name: relay-tip5; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .domino:nth-of-type(6) { animation-name: relay-tip6; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .domino:nth-of-type(7) { animation-name: relay-tip7; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .domino:nth-of-type(8) { animation-name: relay-tip8; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .domino:nth-of-type(9) { animation-name: relay-tip9; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .domino-hand { animation-name: relay-handNudge; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-handNudge {
  0% { transform: rotate(0deg) translateX(0); }
  1.75%, 2.05%, 4.25% { transform: rotate(0deg) translateX(0); }
  2.15% { transform: rotate(-12deg) translateX(6px); }
  2.25% { transform: rotate(0deg) translateX(0); }
  4.5%, 100% { transform: rotate(0deg) translateX(0); }
}
@keyframes relay-tip1 {
  0% { transform: rotate(0deg); }
  1.75%, 2.1%, 4.25% { transform: rotate(0deg); }
  2.25%, 3.95% { transform: rotate(78deg); }
  4.5%, 100% { transform: rotate(0deg); }
}
@keyframes relay-tip2 {
  0% { transform: rotate(0deg); }
  1.75%, 2.2%, 4.25% { transform: rotate(0deg); }
  2.35%, 3.95% { transform: rotate(78deg); }
  4.5%, 100% { transform: rotate(0deg); }
}
@keyframes relay-tip3 {
  0% { transform: rotate(0deg); }
  1.75%, 2.3%, 4.25% { transform: rotate(0deg); }
  2.45%, 3.95% { transform: rotate(78deg); }
  4.5%, 100% { transform: rotate(0deg); }
}
@keyframes relay-tip4 {
  0% { transform: rotate(0deg); }
  1.75%, 2.4%, 4.25% { transform: rotate(0deg); }
  2.55%, 3.95% { transform: rotate(78deg); }
  4.5%, 100% { transform: rotate(0deg); }
}
@keyframes relay-tip5 {
  0% { transform: rotate(0deg); }
  1.75%, 2.5%, 4.25% { transform: rotate(0deg); }
  2.65%, 3.95% { transform: rotate(78deg); }
  4.5%, 100% { transform: rotate(0deg); }
}
@keyframes relay-tip6 {
  0% { transform: rotate(0deg); }
  1.75%, 2.6%, 4.25% { transform: rotate(0deg); }
  2.75%, 3.95% { transform: rotate(78deg); }
  4.5%, 100% { transform: rotate(0deg); }
}
@keyframes relay-tip7 {
  0% { transform: rotate(0deg); }
  1.75%, 2.7%, 4.25% { transform: rotate(0deg); }
  2.85%, 3.95% { transform: rotate(78deg); }
  4.5%, 100% { transform: rotate(0deg); }
}
@keyframes relay-tip8 {
  0% { transform: rotate(0deg); }
  1.75%, 2.8%, 4.25% { transform: rotate(0deg); }
  2.95%, 3.95% { transform: rotate(78deg); }
  4.5%, 100% { transform: rotate(0deg); }
}
@keyframes relay-tip9 {
  0% { transform: rotate(0deg); }
  1.75%, 2.9%, 4.25% { transform: rotate(0deg); }
  3.05%, 3.95% { transform: rotate(78deg); }
  4.5%, 100% { transform: rotate(0deg); }
}
.scenes .machine-station .dirt { animation-name: relay-moundMove; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .dirt::before { animation-name: relay-dirtCompression; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .dirt::after { animation-name: relay-dirtSpray; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .dozer { animation-name: relay-dozerDrive; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .dozer::after { animation-name: relay-dozerShadow; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .dozer-blade { animation-name: relay-bladeFlex; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-dozerDrive {
  0% { left: -110px; }
  1.75% { left: -110px; }
  4.25% { left: 108%; }
  4.5%, 100% { left: -110px; }
}
@keyframes relay-moundMove {
  0% { left: -8px; }
  1.75% { left: -8px; }
  4.25% { left: calc(108% + 102px); }
  4.5%, 100% { left: -8px; }
}
@keyframes relay-dozerShadow {
  0% { transform: scaleX(1); opacity: 0.22; }
  1.75%, 4.25% { transform: scaleX(1); opacity: 0.22; }
  3% { transform: scaleX(0.96); opacity: 0.28; }
  4.5%, 100% { transform: scaleX(1); opacity: 0.22; }
}
@keyframes relay-bladeFlex {
  0% { transform: rotate(0deg) scaleX(1); }
  1.75%, 2.2%, 4.25% { transform: rotate(0deg) scaleX(1); }
  2.45%, 3.85% { transform: rotate(-4deg) scaleX(1.03); }
  4.5%, 100% { transform: rotate(0deg) scaleX(1); }
}
@keyframes relay-dirtCompression {
  0% { transform: scaleX(1) scaleY(1); }
  1.75%, 2.2%, 4.25% { transform: scaleX(1) scaleY(1); }
  2.45%, 3.85% { transform: scaleX(1.35) scaleY(0.82); }
  4.5%, 100% { transform: scaleX(1) scaleY(1); }
}
@keyframes relay-dirtSpray {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  1.75%, 2.25%, 4.25% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  2.5% { opacity: 0.75; transform: translate(8px, -3px) scale(0.8); }
  2.8% { opacity: 0.55; transform: translate(18px, -9px) scale(1); }
  3.125% { opacity: 0; transform: translate(28px, -2px) scale(0.7); }
  4.5%, 100% { opacity: 0; transform: translate(0, 0) scale(0.5); }
}
.scenes .machine-station .stroller-group { animation-name: relay-stroll; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-stroll {
  0% { left: -140px; }
  1.75% { left: -140px; }
  4.25% { left: 108%; }
  4.5%, 100% { left: -140px; }
}
.scenes .machine-station .notif { animation-name: relay-notifDrop; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .notif-ring { animation-name: relay-ringPulse; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-notifDrop {
  0% { transform: translateY(-48px); opacity: 0; }
  1.75%, 4.25% { transform: translateY(-48px); opacity: 0; }
  2.25% { transform: translateY(0); opacity: 1; }
  3.5% { transform: translateY(0); opacity: 1; }
  3.875% { transform: translateY(-12px); opacity: 0; }
  4.5%, 100% { transform: translateY(-48px); opacity: 0; }
}
@keyframes relay-ringPulse {
  0% { transform: scale(0.4); opacity: 0; }
  1.75%, 2.2% { transform: scale(0.4); opacity: 0; }
  2.3% { transform: scale(0.4); opacity: 0.9; }
  3.05%, 4.25% { transform: scale(2.4); opacity: 0; }
  4.5%, 100% { transform: scale(0.4); opacity: 0; }
}
.scenes .machine-station .shovel-group { animation-name: relay-shovelWalk; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .snow-pile { animation-name: relay-snowSquish; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-shovelWalk {
  0% { left: -110px; }
  1.75% { left: -110px; }
  4.25% { left: 110%; }
  4.5%, 100% { left: -110px; }
}
@keyframes relay-snowSquish {
  0% { transform: scaleX(1) scaleY(1); }
  1.75%, 4.25% { transform: scaleX(1) scaleY(1); }
  2.75%, 3.25% { transform: scaleX(1.14) scaleY(0.84); }
  4.5%, 100% { transform: scaleX(1) scaleY(1); }
}
.scenes .machine-station .tall-grass { animation-name: relay-cropGrass; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-cropGrass {
  0%, 1.749% { clip-path: inset(0 0 0 calc(25% + 70px)); }
  1.75% { clip-path: inset(0 0 0 -50px); }
  4.25% { clip-path: inset(0 0 0 calc(110% + 70px)); }
  4.5%, 100% { clip-path: inset(0 0 0 calc(25% + 70px)); }
}
.scenes .machine-station .lawn-cut { animation-name: relay-cutExpand; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .mower-group { animation-name: relay-mowerWalk; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-mowerWalk {
  0% { left: -120px; }
  1.75% { left: -120px; }
  4.25% { left: 110%; }
  4.5%, 100% { left: -120px; }
}
@keyframes relay-cutExpand {
  0%, 1.749% { clip-path: inset(0 calc(75% - 70px) 0 0); }
  1.75% { clip-path: inset(0 calc(100% + 50px) 0 0); }
  4.25% { clip-path: inset(0 calc(-10% - 70px) 0 0); }
  4.5%, 100% { clip-path: inset(0 calc(75% - 70px) 0 0); }
}
.scenes .machine-station .elev-door-l { animation-name: relay-doorOpenL; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .elev-door-r { animation-name: relay-doorOpenR; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .elev-btn.active { animation-name: relay-btnLight; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .elev-finger { animation-name: relay-elevFingerPush; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-doorOpenL {
  0% { transform: translateX(0); }
  1.75%, 2.05%, 4%, 4.25% { transform: translateX(0); }
  2.4%, 3.65% { transform: translateX(-96%); }
  4.5%, 100% { transform: translateX(0); }
}
@keyframes relay-doorOpenR {
  0% { transform: translateX(0); }
  1.75%, 2.05%, 4%, 4.25% { transform: translateX(0); }
  2.4%, 3.65% { transform: translateX(96%); }
  4.5%, 100% { transform: translateX(0); }
}
@keyframes relay-btnLight {
  0% { background: #3a2a1a; box-shadow: none; }
  1.75%, 2%, 3.8%, 4.25% { background: #3a2a1a; box-shadow: none; }
  2.2%, 3.7% { background: #f0c040; box-shadow: 0 0 8px 2px rgba(240,192,64,0.55); }
  4.5%, 100% { background: #3a2a1a; box-shadow: none; }
}
@keyframes relay-elevFingerPush {
  0% { transform: translateX(0); }
  1.75%, 1.95%, 2.35%, 4.25% { transform: translateX(0); }
  2.125% { transform: translateX(-24px); }
  4.5%, 100% { transform: translateX(0); }
}
.scenes .machine-station .pawn-group { animation-name: relay-pawnAdvance; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .pawn-hand { animation-name: relay-pawnHandPush; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-pawnAdvance {
  0% { left: 6%; }
  1.75% { left: 6%; }
  3.7% { left: 72%; }
  3.9% { left: 72%; opacity: 1; }
  4.05% { opacity: 0; }
  4.075% { left: 6%; opacity: 0; }
  4.25% { left: 6%; opacity: 1; }
  4.5%, 100% { left: 6%; }
}
@keyframes relay-pawnHandPush {
  0% { transform: translateX(0); }
  1.75%, 3.875%, 4.25% { transform: translateX(0); }
  2%, 3.55% { transform: translateX(5px); }
  4.5%, 100% { transform: translateX(0); }
}
@supports (container-type: inline-size) and (width: 1cqw) {
@keyframes relay-climbHill {
  0% { transform: translate(0, 0); }
  1.75%, 4.25% { transform: translate(0, 0); }
  3%, 3.125% { transform: translate(48cqw, -81px); }
  4.5%, 100% { transform: translate(0, 0); }
}
@keyframes relay-pushCart {
  0%, 1.749% { transform: translateX(25cqw); }
  1.75% { transform: translateX(-80px); }
  4.25% { transform: translateX(110cqw); }
  4.5%, 100% { transform: translateX(25cqw); }
}
@keyframes relay-dozerDrive {
  0%, 1.749% { transform: translateX(25cqw); }
  1.75% { transform: translateX(-110px); }
  4.25% { transform: translateX(108cqw); }
  4.5%, 100% { transform: translateX(25cqw); }
}
@keyframes relay-moundMove {
  0%, 1.749% { transform: translateX(calc(25cqw + 102px)); }
  1.75% { transform: translateX(-8px); }
  4.25% { transform: translateX(calc(108cqw + 102px)); }
  4.5%, 100% { transform: translateX(calc(25cqw + 102px)); }
}
@keyframes relay-stroll {
  0%, 1.749% { transform: translateX(25cqw); }
  1.75% { transform: translateX(-140px); }
  4.25% { transform: translateX(108cqw); }
  4.5%, 100% { transform: translateX(25cqw); }
}
@keyframes relay-shovelWalk {
  0%, 1.749% { transform: translateX(25cqw); }
  1.75% { transform: translateX(-110px); }
  4.25% { transform: translateX(110cqw); }
  4.5%, 100% { transform: translateX(25cqw); }
}
@keyframes relay-mowerWalk {
  0%, 1.749% { transform: translateX(25cqw); }
  1.75% { transform: translateX(-120px); }
  4.25% { transform: translateX(110cqw); }
  4.5%, 100% { transform: translateX(25cqw); }
}
@keyframes relay-pawnAdvance {
  0% { transform: translateX(6cqw); opacity: 1; }
  1.75%, 4.25% { transform: translateX(6cqw); opacity: 1; }
  3.7%, 3.9% { transform: translateX(72cqw); opacity: 1; }
  4.05% { transform: translateX(72cqw); opacity: 0; }
  4.075% { transform: translateX(6cqw); opacity: 0; }
  4.5%, 100% { transform: translateX(6cqw); opacity: 1; }
}
}
.scenes .machine-station .gear { animation-name: relay-gearForward; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .gear-middle { animation-name: relay-gearReverse; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .gear-finger { animation-name: relay-gearNudge; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-gearForward {
  0% { transform: rotate(0deg); }
  1.75%, 2.3% { transform: rotate(0deg); }
  3.6%, 4.25% { transform: rotate(360deg); }
  4.5%, 100% { transform: rotate(0deg); }
}
@keyframes relay-gearReverse {
  0% { transform: rotate(15deg); }
  1.75%, 2.3% { transform: rotate(15deg); }
  3.6%, 4.25% { transform: rotate(-345deg); }
  4.5%, 100% { transform: rotate(15deg); }
}
@keyframes relay-gearNudge {
  0% { transform: translate(0, 0) rotate(-35deg); }
  1.75%, 2%, 2.9%, 4.25% { transform: translate(0, 0) rotate(-35deg); }
  2.3%, 2.5% { transform: translate(-4px, -12px) rotate(-35deg); }
  4.5%, 100% { transform: translate(0, 0) rotate(-35deg); }
}
.scenes .machine-station .spring-coil { animation-name: relay-springCompression; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .spring-plate { animation-name: relay-springPlate; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .spring-ball { animation-name: relay-springLaunch; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .spring-ball-shadow { animation-name: relay-springBallShadow; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .spring-hand { animation-name: relay-springPush; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-springCompression {
  0% { transform: scaleX(1); }
  1.75%, 2%, 3.15%, 4.25% { transform: scaleX(1); }
  2.45%, 2.6% { transform: scaleX(0.6); }
  2.7% { transform: scaleX(1.12); }
  2.85% { transform: scaleX(0.95); }
  3% { transform: scaleX(1.03); }
  4.5%, 100% { transform: scaleX(1); }
}
@keyframes relay-springPlate {
  0% { transform: translateX(0); }
  1.75%, 2%, 3.15%, 4.25% { transform: translateX(0); }
  2.45%, 2.6% { transform: translateX(-36px); }
  2.7% { transform: translateX(10.8px); }
  2.85% { transform: translateX(-4.5px); }
  3% { transform: translateX(2.7px); }
  4.5%, 100% { transform: translateX(0); }
}
@keyframes relay-springPush {
  0% { transform: translateX(0); }
  1.75%, 2%, 4.15%, 4.25% { transform: translateX(0); }
  2.45%, 2.6% { transform: translateX(-36px); }
  2.7%, 3.85% { transform: translateX(42px); }
  4.5%, 100% { transform: translateX(0); }
}
@keyframes relay-springLaunch {
  0% { transform: translate(0, 0); }
  1.75%, 2%, 4.05%, 4.25% { transform: translate(0, 0); }
  2.45%, 2.6% { transform: translate(-36px, 0); }
  2.7% { transform: translate(12px, -18px); }
  2.95% { transform: translate(64px, -48px); }
  3.25% { transform: translate(42px, -12px); }
  3.5% { transform: translate(34px, 0); }
  3.7% { transform: translate(22px, -6px); }
  3.85% { transform: translate(16px, 0); }
  4.5%, 100% { transform: translate(0, 0); }
}
@keyframes relay-springBallShadow {
  0% { transform: translateX(0) scaleX(1); opacity: 0.65; }
  1.75%, 2%, 4.05%, 4.25% { transform: translateX(0) scaleX(1); opacity: 0.65; }
  2.45%, 2.6% { transform: translateX(-36px) scaleX(1); opacity: 0.65; }
  2.7% { transform: translateX(12px) scaleX(0.75); opacity: 0.4; }
  2.95% { transform: translateX(64px) scaleX(0.45); opacity: 0.2; }
  3.25% { transform: translateX(42px) scaleX(0.8); opacity: 0.5; }
  3.5% { transform: translateX(34px) scaleX(1); opacity: 0.65; }
  3.7% { transform: translateX(22px) scaleX(0.9); opacity: 0.55; }
  3.85% { transform: translateX(16px) scaleX(1); opacity: 0.65; }
  4.5%, 100% { transform: translateX(0) scaleX(1); opacity: 0.65; }
}
.scenes .machine-station .door-panel { animation-name: relay-pushDoor; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .door-light { animation-name: relay-doorLight; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .door-shadow { animation-name: relay-doorShadow; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .door-hand { animation-name: relay-doorPush; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-pushDoor {
  0% { transform: rotateY(0deg); }
  1.75%, 2.15%, 4.1%, 4.25% { transform: rotateY(0deg); }
  2.9%, 3.55% { transform: rotateY(-68deg); }
  4.5%, 100% { transform: rotateY(0deg); }
}
@keyframes relay-doorPush {
  0% { transform: translateX(0); }
  1.75%, 2%, 3.75%, 4.25% { transform: translateX(0); }
  2.35% { transform: translateX(-14px); }
  2.6% { transform: translateX(-46px); }
  2.9%, 3.125% { transform: translateX(-86px); }
  4.5%, 100% { transform: translateX(0); }
}
@keyframes relay-doorLight {
  0% { opacity: 0; transform: scaleX(0.1); }
  1.75%, 2.15%, 4.1%, 4.25% { opacity: 0; transform: scaleX(0.1); }
  2.9%, 3.55% { opacity: 1; transform: scaleX(1); }
  4.5%, 100% { opacity: 0; transform: scaleX(0.1); }
}
@keyframes relay-doorShadow {
  0% { transform: scaleX(1) skewY(0deg); opacity: 0.6; }
  1.75%, 2.15%, 4.1%, 4.25% { transform: scaleX(1) skewY(0deg); opacity: 0.6; }
  2.9%, 3.55% { transform: scaleX(0.5) skewY(-18deg); opacity: 0.3; }
  4.5%, 100% { transform: scaleX(1) skewY(0deg); opacity: 0.6; }
}
.scenes .machine-station .marble-ball { animation-name: relay-marbleRoll; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .marble-ball::after { animation-name: relay-marbleSpin; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .marble-finger { animation-name: relay-marblePush; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-marbleRoll {
  0% { offset-distance: 0%; opacity: 1; }
  1.75%, 2.05% { offset-distance: 0%; opacity: 1; }
  3.8%, 4% { offset-distance: var(--run-end); opacity: 1; }
  4.075% { offset-distance: var(--run-end); opacity: 0; }
  4.1% { offset-distance: 0%; opacity: 0; }
  4.25% { offset-distance: 0%; opacity: 1; }
  4.5%, 100% { offset-distance: 0%; opacity: 1; }
}
@keyframes relay-marbleSpin {
  0% { transform: rotate(0deg); }
  1.75%, 2.05% { transform: rotate(0deg); }
  3.8%, 4.25% { transform: rotate(720deg); }
  4.5%, 100% { transform: rotate(0deg); }
}
@keyframes relay-marblePush {
  0% { transform: translateX(0); }
  1.75%, 1.9%, 2.4%, 4.25% { transform: translateX(0); }
  2.05%, 2.15% { transform: translateX(3px); }
  4.5%, 100% { transform: translateX(0); }
}
.scenes .machine-station .rocket { animation-name: relay-rocketLift; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .rocket-exhaust { animation-name: relay-rocketIgnite; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .launch-button::before { animation-name: relay-launchButtonPress; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .launch-finger { animation-name: relay-launchFingerPress; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .rocket-particle { animation-name: relay-launchParticle; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
@keyframes relay-launchButtonPress {
  0% { transform: translateY(0); }
  1.75%, 2%, 2.7%, 4.25% { transform: translateY(0); }
  2.2%, 2.4% { transform: translateY(4px); }
  4.5%, 100% { transform: translateY(0); }
}
@keyframes relay-launchFingerPress {
  0% { transform: translateY(0); }
  1.75%, 2%, 2.7%, 4.25% { transform: translateY(0); }
  2.2%, 2.4% { transform: translateY(16px); }
  4.5%, 100% { transform: translateY(0); }
}
@keyframes relay-rocketLift {
  0% { transform: translateY(0); opacity: 1; }
  1.75%, 2.35% { transform: translateY(0); opacity: 1; }
  3.6% { transform: translateY(-240px); opacity: 1; }
  3.75% { transform: translateY(-240px); opacity: 0; }
  4.05% { transform: translateY(0); opacity: 0; }
  4.25% { transform: translateY(0); opacity: 1; }
  4.5%, 100% { transform: translateY(0); opacity: 1; }
}
@keyframes relay-rocketIgnite {
  0% { opacity: 0; }
  1.75%, 2.15%, 3.75%, 4.25% { opacity: 0; }
  2.3%, 3.6% { opacity: 1; }
  4.5%, 100% { opacity: 0; }
}
@keyframes relay-launchParticle {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  1.75%, 2.2% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  2.5% { opacity: 0.65; transform: translate(calc(var(--spread) * 7px), calc(var(--i) * -1px)) scale(1); }
  3.1%, 4.25% { opacity: 0; transform: translate(calc(var(--spread) * 12px), calc(22px + var(--i) * 2px)) scale(2.4); }
  4.5%, 100% { opacity: 0; transform: translate(0, 0) scale(0.3); }
}
@supports (width: calc(1px * sqrt(4))) and (transform: rotate(calc(atan2(1, 2)))) {
.scenes .machine-station .crank-stage { animation-name: relay-crankTurn; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
.scenes .machine-station .crank-hand { animation-name: relay-crankNudge; animation-duration: 80s; animation-delay: var(--station-delay); animation-direction: normal; }
}
@keyframes relay-crankTurn {
  0% { --crank-angle: 0deg; }
  1.75%, 2.05% { --crank-angle: 0deg; }
  4%, 4.25% { --crank-angle: 360deg; }
  4.5%, 100% { --crank-angle: 0deg; }
}
@keyframes relay-crankNudge {
  0% { transform: translate(0, 0) rotate(-35deg); }
  1.75%, 1.9%, 2.4%, 4.25% { transform: translate(0, 0) rotate(-35deg); }
  2.05%, 2.2% { transform: translate(-8px, -10px) rotate(-35deg); }
  4.5%, 100% { transform: translate(0, 0) rotate(-35deg); }
}
/* Native checkbox pauses every part together, including secondary motion. */
main:has(#machine-pause:checked) .scenes *,
main:has(#machine-pause:checked) .scenes *::before,
main:has(#machine-pause:checked) .scenes *::after { animation-play-state: paused !important; }

/* A narrow viewport becomes a single descending chute in DOM order. */
@media (max-width: 700px) {
  .scenes { grid-template-columns: minmax(0, 1fr); max-width: 464px; width: calc(100% - 28px); }
  .machine-station { grid-column: 1; grid-row: auto; }
  .station-reverse .machine-route { transform: none; }
  .machine-station::before { content: '→'; left: 24%; right: auto; }
  .machine-route::before { width: 100%; }
  .machine-station:not(.station-finale)::after {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    right: -26px;
    left: 0;
    width: auto;
    height: 347px;
    border: 5px solid #bc9556;
    border-top: 0;
    border-left: 0;
    border-radius: 0 0 24px 0;
    clip-path: polygon(calc(100% - 26px) 26px, 100% 26px, 100% 100%, 0 100%, 0 calc(100% - 5px), calc(100% - 26px) calc(100% - 5px));
    transform: none;
    box-shadow: none;
  }
  .machine-station:not(.station-finale) .machine-route::after {
    content: ''; position: absolute; top: 8px; right: -26px;
    width: 26px; height: 26px; border: 5px solid #bc9556;
    border-left: 0; border-bottom: 0; border-radius: 0 24px 0 0;
  }
.machine-station:not(.station-finale) .relay-marble { animation-name: relay-descend; }
  @keyframes relay-descend {
    0% { opacity: 1; left: 0; top: -1px; transform: rotate(0deg); }
    1.6%, 2.4% { opacity: 1; left: 50%; top: -1px; transform: rotate(360deg); }
    3.8% { opacity: 1; left: 100%; top: -1px; transform: rotate(720deg); }
    4% { opacity: 1; left: calc(100% + 24px); top: 28px; }
    4.5% { opacity: 1; left: calc(100% + 24px); top: 317px; }
    4.999% { opacity: 1; left: 0; top: 341px; transform: rotate(1440deg); }
    5%, 100% { opacity: 0; left: 0; top: 341px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .scenes *, .scenes *::before, .scenes *::after { animation: none !important; }
  .relay-marble { opacity: 0; }
  .machine-station:first-child .relay-marble { opacity: 1; left: 20%; }
  .machine-control, .machine-note { display: none; }
}

/* An inherited discrete state stops wheels, walking legs, and exhaust while
   their station is waiting. Primary motions continue on the shared clock. */
.machine-station { --detail-state: paused; animation: station-engaged 80s steps(1, end) var(--station-delay) infinite; }
@keyframes station-engaged {
  0%, 1.749% { --detail-state: paused; }
  1.75%, 4.249% { --detail-state: running; }
  4.25%, 100% { --detail-state: paused; }
}
.scenes .machine-station .pusher .legs::after,
.scenes .machine-station .cart-wheel,
.scenes .machine-station .stroller-wheel,
.scenes .machine-station .dozer-body,
.scenes .machine-station .dozer-cabin,
.scenes .machine-station .dozer-track,
.scenes .machine-station .dozer-track::before,
.scenes .machine-station .shoveler-body::before,
.scenes .machine-station .shoveler-body::after,
.scenes .machine-station .shoveler-head::after,
.scenes .machine-station .tg,
.scenes .machine-station .lawn-sun,
.scenes .machine-station .mower-leg,
.scenes .machine-station .mower-body,
.scenes .machine-station .mower-blade-spin,
.scenes .machine-station .mower-exhaust,
.scenes .machine-station .mower-shadow,
.scenes .machine-station .mower-wheel,
.scenes .machine-station .grass-bit,
.scenes .machine-station .rocket-flame,
.scenes .machine-station .cart-person .cp-body::before,
.scenes .machine-station .cart-person .cp-body::after,
.scenes .machine-station .walker-body::before,
.scenes .machine-station .walker-body::after {
  animation-play-state: var(--detail-state);
}