/* The SVG and its poster remain static unless the host finishes enhancement. */
.hero-visual[data-hero-motion] {
  --hero-tilt-x: 0deg;
  --hero-tilt-y: 0deg;
}

.hero-visual[data-hero-motion] #hero-artwork {
  position: relative;
  width: 100%;
  min-width: 0;
}

.hero-visual[data-hero-motion] .hero-architecture {
  display: block;
  width: 100%;
  height: 620px;
  overflow: visible;
  transform-box: view-box;
  transform-origin: 50% 53%;
  pointer-events: none;
}

.hero-visual[data-hero-motion][data-motion-ready]:not([data-motion-state="reduced"]) [data-hero-poster] {
  display: none;
}

.hero-visual[data-hero-motion][data-motion-ready] .hero-architecture {
  transform: perspective(1000px) rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y));
  transition: transform 350ms cubic-bezier(.2, .7, .2, 1);
}

/* Distances use the SVG's original coordinate space. No layer is rotated. */
.hero-visual[data-hero-motion][data-motion-ready] .architecture-layer--platform {
  --hero-lift: -2.5px;
  --hero-animation: hero-layer-float 10s ease-in-out -1s infinite;
}

.hero-visual[data-hero-motion][data-motion-ready] .architecture-layer--body {
  --hero-lift: -6px;
  --hero-animation: hero-layer-float 9.2s ease-in-out -2.2s infinite;
}

.hero-visual[data-hero-motion][data-motion-ready] .architecture-layer--core {
  --hero-lift: -9px;
  --hero-animation: hero-layer-float 8.8s ease-in-out -3.3s infinite;
}

.hero-visual[data-hero-motion][data-motion-ready] .architecture-layer--crown {
  --hero-lift: -12px;
  --hero-animation: hero-layer-float 9.6s ease-in-out -4.5s infinite;
}

.hero-visual[data-hero-motion][data-motion-ready] .architecture-core-light {
  --hero-animation: hero-core-breathe 8s ease-in-out -2.6s infinite;
}

/* Resting route geometry is reused; only these low-light overlays travel. */
.hero-visual[data-hero-motion][data-motion-ready] .architecture-signals {
  opacity: 1;
}

.hero-visual[data-hero-motion][data-motion-ready] .architecture-signal {
  stroke-dasharray: 18 720;
  stroke-dashoffset: 18;
  opacity: 0;
  --hero-animation: var(--hero-signal-name) 8s linear infinite both;
}

.hero-visual[data-hero-motion][data-motion-ready] .architecture-signal--input {
  --hero-signal-name: hero-signal-input;
}

.hero-visual[data-hero-motion][data-motion-ready] .architecture-signal--output {
  --hero-signal-name: hero-signal-output;
}

.hero-visual[data-hero-motion][data-motion-ready] .architecture-signal--return {
  --hero-signal-name: hero-signal-return;
}

/* Keep the animation object and its current frame when the page is suspended. */
.hero-visual[data-hero-motion][data-motion-ready] :is(.architecture-layer, .architecture-core-light, .architecture-signal) {
  animation: var(--hero-animation);
  animation-play-state: paused;
}

.hero-visual[data-hero-motion][data-motion-ready][data-motion-state="running"]:not([data-motion-suspended="true"]) :is(.architecture-layer, .architecture-core-light, .architecture-signal) {
  animation-play-state: running;
}

.hero-visual[data-hero-motion][data-motion-ready]:is([data-motion-state="paused"], [data-motion-suspended="true"]) .hero-architecture {
  transition: none;
}

/* The control stays outside role=img, with a clear keyboard target. */
.hero-visual[data-hero-motion] #hero-motion-toggle {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 6%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #ffffff26;
  border-radius: 3px;
  background: #17171bd9;
  color: #c6c6ce;
  font: inherit;
  font-size: 11px;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
}

.hero-visual[data-hero-motion] #hero-motion-toggle[hidden] {
  display: none;
}

.hero-visual[data-hero-motion] #hero-motion-toggle:hover {
  border-color: #ff937c80;
  color: #f0e6e2;
  background: #292125;
}

.hero-visual[data-hero-motion] #hero-motion-toggle:focus-visible {
  outline: 2px solid #ffad96;
  outline-offset: 4px;
}

.hero-visual[data-hero-motion] #hero-motion-toggle:disabled {
  cursor: default;
  color: #a3a3af;
}

/* The reduced state is static; an OS-level preview requires explicit page-local opt-in. */
.hero-visual[data-hero-motion][data-motion-state="reduced"] .hero-architecture {
  transform: none;
  transition: none;
}

.hero-visual[data-hero-motion][data-motion-state="reduced"] :is(.architecture-layer, .architecture-core-light, .architecture-signal) {
  animation: none;
  transform: none;
}

.hero-visual[data-hero-motion][data-motion-state="reduced"] .architecture-core-light {
  opacity: 1;
}

.hero-visual[data-hero-motion][data-motion-state="reduced"] .architecture-signals {
  opacity: 0;
}

@keyframes hero-layer-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--hero-lift)); }
}

@keyframes hero-core-breathe {
  0%, 100% { opacity: .86; }
  50% { opacity: 1; }
}

/* One full cycle reads left to right, then back to the validation plane. */
@keyframes hero-signal-input {
  0% { stroke-dashoffset: 18; opacity: 0; }
  3% { stroke-dashoffset: 18; opacity: .6; }
  23% { stroke-dashoffset: -196; opacity: .6; }
  26%, 100% { stroke-dashoffset: -196; opacity: 0; }
}

@keyframes hero-signal-output {
  0%, 29% { stroke-dashoffset: 18; opacity: 0; }
  32% { stroke-dashoffset: 18; opacity: .55; }
  55% { stroke-dashoffset: -306; opacity: .55; }
  58%, 100% { stroke-dashoffset: -306; opacity: 0; }
}

@keyframes hero-signal-return {
  0%, 61% { stroke-dashoffset: 18; opacity: 0; }
  64% { stroke-dashoffset: 18; opacity: .45; }
  94% { stroke-dashoffset: -605; opacity: .45; }
  98%, 100% { stroke-dashoffset: -605; opacity: 0; }
}

@media (max-width: 640px) {
  .hero-visual[data-hero-motion] .hero-architecture {
    max-height: 390px;
    margin-top: -12px;
  }

  .hero-visual[data-hero-motion] #hero-motion-toggle {
    top: 10px;
    right: 7%;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual[data-hero-motion] .hero-architecture {
    transform: none !important;
    transition: none !important;
  }

  .hero-visual[data-hero-motion] :is(.architecture-layer, .architecture-core-light, .architecture-signal) {
    animation: none !important;
  }

  .hero-visual[data-hero-motion]:not([data-motion-optin="true"]) :is(.architecture-layer, .architecture-core-light, .architecture-signal) {
    transform: none !important;
  }

  .hero-visual[data-hero-motion]:not([data-motion-optin="true"]) .architecture-core-light {
    opacity: 1 !important;
  }

  .hero-visual[data-hero-motion]:not([data-motion-optin="true"]) .architecture-signals {
    opacity: 0 !important;
  }

  /* Restore only this artwork after consent, including the site's global reduced-motion rule. */
  .hero-visual[data-hero-motion][data-motion-ready][data-motion-optin="true"] :is(.architecture-layer, .architecture-core-light, .architecture-signal) {
    animation: var(--hero-animation) !important;
    animation-play-state: paused !important;
  }

  .hero-visual[data-hero-motion][data-motion-ready][data-motion-optin="true"][data-motion-state="running"]:not([data-motion-suspended="true"]) :is(.architecture-layer, .architecture-core-light, .architecture-signal) {
    animation-play-state: running !important;
  }
}