:root {
  --crane-cycle: 16s;
  --worker-cycle: 32s;
  --motion-ease: cubic-bezier(.45, 0, .2, 1);
}

.copy { min-width: 0; }
.spinner { animation-duration: 2.8s; }
.illustration {
  width: 100%;
  height: auto;
  max-width: 440px;
  min-width: 0;
  margin: auto;
  transform: none;
}
.construction-scene {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* El carro se traslada cuando la carga ya está sobre el techo.
   El cable y el gancho comparten pivote y tiempos de elevación. */
.crane-trolley {
  animation: trolley-travel var(--crane-cycle) var(--motion-ease) infinite;
}
.crane-pendulum {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: load-sway var(--crane-cycle) ease-in-out infinite;
}
.hoist-line {
  transform-box: fill-box;
  transform-origin: top center;
  animation: cable-hoist var(--crane-cycle) var(--motion-ease) infinite;
}
.hoist-rig {
  animation: hook-hoist var(--crane-cycle) var(--motion-ease) infinite;
}

/* Cada cono se levanta antes del traslado. Las manos comparten exactamente
   su elevación; el operario vuelve a su posición inicial sin saltos. */
.worker-route {
  --worker-stride: 0;
  animation: worker-route var(--worker-cycle) linear infinite,
             worker-gait var(--worker-cycle) steps(1, end) infinite;
}
.worker-leg {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: worker-step .64s ease-in-out infinite;
}
.worker-leg-right { animation-delay: -.32s; }
.worker-arm-left { animation: worker-grip-left var(--worker-cycle) linear infinite; }
.worker-arm-right { animation: worker-grip-right var(--worker-cycle) linear infinite; }
.safety-cone-left { animation: cone-transfer-left var(--worker-cycle) linear infinite; }
.safety-cone-right { animation: cone-transfer-right var(--worker-cycle) linear infinite; }

.scene-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 25px;
  margin-top: -15px;
}
.construction-label { color: var(--gold); font-size: 11px; }
.motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font: 11px Arial, Helvetica, sans-serif;
  cursor: pointer;
  transition: color 180ms ease;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { color: var(--navy); }
.motion-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.motion-toggle-icon {
  display: block;
  width: 10px;
  height: 10px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.motion-toggle[data-paused="true"] .motion-toggle-icon {
  height: 0;
  border: 5px solid transparent;
  border-left: 8px solid currentColor;
  border-right: 0;
}
.hero[data-motion-paused="true"] *,
.hero[data-motion-paused="true"] *::before,
.hero[data-motion-paused="true"] *::after {
  animation-play-state: paused;
}

@keyframes trolley-travel {
  0%, 38% { transform: translateX(72px); }
  55%, 65% { transform: translateX(0); }
  82%, 100% { transform: translateX(72px); }
}
@keyframes cable-hoist {
  0%, 8%, 100% { transform: scaleY(10.4); }
  30%, 90% { transform: scaleY(1); }
}
@keyframes hook-hoist {
  0%, 8%, 100% { transform: translateY(94px); }
  30%, 90% { transform: translateY(0); }
}
@keyframes load-sway {
  0%, 38%, 65%, 90%, 100% { transform: rotate(0); }
  48% { transform: rotate(-1.4deg); }
  55% { transform: rotate(1.3deg); }
  60% { transform: rotate(-.6deg); }
  73% { transform: rotate(1.4deg); }
  82% { transform: rotate(-1.3deg); }
  87% { transform: rotate(.6deg); }
}

@keyframes worker-route {
  0%, 6% { transform: translateX(0); }
  16%, 23% { transform: translateX(56px); }
  33%, 37% { transform: translateX(0); }
  53%, 59% { transform: translateX(257px); }
  67%, 74% { transform: translateX(201px); }
  82%, 86% { transform: translateX(257px); }
  100% { transform: translateX(0); }
}
@keyframes worker-gait {
  0%, 16%, 33%, 53%, 67%, 82%, 100% { --worker-stride: 0; }
  6%, 23%, 37%, 59%, 74%, 86% { --worker-stride: 1; }
}
@keyframes worker-step {
  0%, 50%, 100% { transform: rotate(0); }
  25% { transform: rotate(calc(var(--worker-stride) * 14deg)); }
  75% { transform: rotate(calc(var(--worker-stride) * -14deg)); }
}
@keyframes worker-grip-left {
  0%, 4%, 18%, 20%, 35%, 100% { transform: translateY(0); }
  6%, 16%, 23%, 33% { transform: translateY(-12px); }
}
@keyframes worker-grip-right {
  0%, 57%, 69%, 71%, 84%, 100% { transform: translateY(0); }
  59%, 67%, 74%, 82% { transform: translateY(-12px); }
}
@keyframes cone-transfer-left {
  0%, 4% { transform: translate(0, 0); }
  6% { transform: translate(0, -12px); }
  16% { transform: translate(56px, -12px); }
  18%, 20% { transform: translate(56px, 0); }
  23% { transform: translate(56px, -12px); }
  33% { transform: translate(0, -12px); }
  35%, 100% { transform: translate(0, 0); }
}
@keyframes cone-transfer-right {
  0%, 57% { transform: translate(0, 0); }
  59% { transform: translate(0, -12px); }
  67% { transform: translate(-56px, -12px); }
  69%, 71% { transform: translate(-56px, 0); }
  74% { transform: translate(-56px, -12px); }
  82% { transform: translate(0, -12px); }
  84%, 100% { transform: translate(0, 0); }
}

@media (max-width: 850px) {
  .scene-caption { padding: 0 12px; }
}
@media (max-width: 650px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .illustration { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-toggle { display: none; }
}