/* Small, finite gestures; the images carry the atmosphere. */
:root { --quiet-ease: cubic-bezier(.22,.61,.36,1); }
.hero-media img { animation-name: quiet-drift; animation-duration: 36s; }
@keyframes quiet-drift {
  from { transform: scale(1.01); }
  to { transform: scale(1.025); }
}
.js-ready .hero-content > * { animation: quiet-enter 760ms var(--quiet-ease) both; }
.js-ready .hero-content > :nth-child(2) { animation-delay: 80ms; }
.js-ready .hero-content > :nth-child(3) { animation-delay: 150ms; }
.js-ready .hero-content > :nth-child(4) { animation-delay: 220ms; }
@keyframes quiet-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.js-ready .reveal {
  transform: translateY(8px);
  transition: opacity 650ms var(--quiet-ease), transform 650ms var(--quiet-ease);
}
.js-ready .reveal.is-visible { transform: none; }
.button, .header-action, .round-button, .text-button {
  transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, transform 280ms var(--quiet-ease);
}
.button:hover { transform: translateY(-1px); }
.button > span, .header-action > span, .text-link > span, .zone-description a > span {
  display: inline-block;
  transition: transform 320ms var(--quiet-ease);
}
.button:hover > span, .header-action:hover > span { transform: translate(2px,-2px); }
.text-link:hover > span, .zone-description a:hover > span { transform: translateX(3px); }
.machine-picture img { transition: opacity 320ms ease, transform 700ms var(--quiet-ease); }
.machine-picture:hover img { transform: scale(1.015); }
.machine-select { transition: color 280ms ease; }
.machine-select:is(:hover,.is-active) { padding-inline: 0; }
.machine-select > span:last-child { transition: opacity 280ms ease; }
.evidence-image img { transition: transform 850ms var(--quiet-ease); }
.evidence-grid article:hover img { transform: scale(1.015); }
.learning-options > a { transition: background-color 300ms ease; }
.learning-options > a:hover { padding-inline: 0; }
.hotspot > span, .hotspot i { transition: opacity 320ms ease, background-color 320ms ease, box-shadow 400ms ease, transform 400ms var(--quiet-ease); }
.workflow-tabs button:after { transition: right 360ms var(--quiet-ease); }
.closing-grain { animation: grain-turn 60s linear infinite; }
.closing-grain:before { animation: grain-breathe 14s ease-in-out infinite alternate; }
.closing-grain:after { animation: grain-breathe 18s ease-in-out infinite alternate-reverse; }
@keyframes grain-turn { from { transform: rotate(-35deg); } to { transform: rotate(325deg); } }
@keyframes grain-breathe { from { transform: rotate(-3deg) scale(.98); opacity: .7; } to { transform: rotate(4deg) scale(1.025); opacity: 1; } }
.inline-play { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:13px; white-space:nowrap; padding:16px 23px; background:#111b16df; border:1px solid #ffffff42; font-size:12px; z-index:2; backdrop-filter:blur(6px); transition:opacity 280ms ease,background 280ms ease; }
.inline-play span { font-size:10px; }
.inline-play:hover { background:#263b2a; }
.video-stage.is-playing .inline-play { opacity:0; visibility:hidden; pointer-events:none; }
.video-stage.media-unavailable .inline-play { display:none; }
.media-status { font-size:12px; color:var(--muted); padding:15px 0; margin:0; }
.media-status a { color:var(--accent); margin-left:16px; text-decoration:underline; text-underline-offset:4px; }
.hero-actions a.text-button { color:inherit; }
.motion-paused *, .motion-paused *:before, .motion-paused *:after { transition: none !important; }
.motion-paused .hero-content > * { animation: none !important; }
.motion-paused .reveal { opacity: 1; transform: none; }
@media(prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .js-ready .reveal { opacity: 1; transform: none; }
}