/* The original illustration remains the accessible, motion-free fallback. */
.hero-art > img[src*="hero-workshop"],
.hero-scene > img {
  animation: none !important;
  transform: none !important;
}

.hero-art > .hero-scene {
  position: relative;
  z-index: 1;
  flex: 0 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 495px;
  overflow: hidden;
  isolation: isolate;
  filter: drop-shadow(0 9px 12px #37314308);
  pointer-events: none;
}

.hero-scene > img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  opacity: 1;
}

.hero-scene > .hero-stamping-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* No initial animation flash: site.js must explicitly enable motion. */
html[data-motion="on"] .hero-scene[data-ready="true"] > img {
  opacity: 0;
}
html[data-motion="on"] .hero-scene[data-ready="true"] > .hero-stamping-art {
  opacity: 1;
  visibility: visible;
}

.hero-stamp-arm {
  transform-box: view-box;
  transform-origin: 742px 410px;
}
.hero-stamp-imprint,
.hero-stamp-impact {
  transform-box: view-box;
  transform-origin: 762px 558px;
}
html[data-motion="on"] .hero-scene[data-ready="true"] .hero-stamp-arm {
  animation: hero-stamp-press 2.4s ease-in-out infinite;
}
html[data-motion="on"] .hero-scene[data-ready="true"] .hero-stamp-imprint {
  animation: hero-stamp-ink 2.4s ease-in-out infinite;
}
html[data-motion="on"] .hero-scene[data-ready="true"] .hero-stamp-impact {
  animation: hero-stamp-impact 2.4s ease-in-out infinite;
}

@keyframes hero-stamp-press {
  0%, 100% { transform: scaleY(.8) rotate(-3deg); }
  50% { transform: scaleY(1) rotate(0deg); }
}
@keyframes hero-stamp-ink {
  0%, 100% { opacity: .38; transform: scale(.97); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes hero-stamp-impact {
  0%, 100% { opacity: 0; transform: scale(.8); }
  50% { opacity: .65; transform: scale(1.06); }
}

@media (min-width: 1600px) {
  .hero-art > .hero-scene { height: 550px; }
}
@media (max-width: 1180px) {
  .hero-art > .hero-scene { height: 440px; }
}
@media (max-width: 960px) {
  .hero-art > .hero-scene { height: 370px; }
}
@media (max-width: 700px) {
  .hero-art > .hero-scene { height: 355px; }
}
@media (max-width: 370px) {
  .hero-art > .hero-scene { height: 295px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-motion] .hero-scene[data-ready] > img { opacity: 1 !important; }
  html[data-motion] .hero-scene[data-ready] > .hero-stamping-art {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  .hero-scene * { animation: none !important; }
}
html[data-motion="off"] .hero-scene > img { opacity: 1; }
html[data-motion="off"] .hero-scene > .hero-stamping-art {
  opacity: 0;
  visibility: hidden;
}