html, body { margin: 0; padding: 0; width: 100%; height: auto; min-height: 100%; background: #30324f; }
body { overflow-x: hidden; overflow-y: auto; }
main { display: block; }
.canvas-section { position: relative; width: 100%; overflow: hidden; }
.canvas-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; visibility: hidden; }
.canvas-stage .DF_utQ { pointer-events: none; }
.art-link { position: absolute; inset: 0; display: block; z-index: 10; pointer-events: auto; cursor: pointer; }
.art-link:focus-visible { outline: 4px dashed #fff7ae; outline-offset: 4px; }
.mobile { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.keyboard-navigation { position: fixed; z-index: 100; left: 8px; top: 8px; display: flex; flex-wrap: wrap; gap: 16px; padding: 12px; background: #fff6e9; transform: translateY(-200%); font: 16px/1.4 sans-serif; }
.keyboard-navigation:focus-within { transform: none; }
.keyboard-navigation a { color: #30324f; }
.cart-access { position: fixed; z-index: 90; bottom: 18px; right: 18px; padding: 10px 16px; background: #f2aec6; color: #262038; border: 2px solid #262038; border-radius: 5px; font: 16px/1.4 sans-serif; text-decoration: none; }
.cart-access[hidden] { display: none; }
@media (max-width: 760px) { .desktop { display: none; } .mobile { display: block; } }

/* Source positions remain on DF_utQ; motion stays inside each original frame. */
.art-rig, .art-assembly, .art-motion, .art-impact, .art-swing { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.art-motion { transform-origin: 50% 50%; transition: translate 180ms ease, scale 180ms ease, filter 180ms ease; }
.art-swing { transform-origin: 50% 0; }
.art-title-word { transform-origin: 50% 78%; }
.art-pendulum { animation: art-pendulum var(--sway-duration, 7s) ease-in-out var(--sway-delay, 0s) infinite; }
.art-interactive.art-hovered > .art-motion,
.art-interactive.art-focused > .art-motion { translate: 0 -3px; scale: 1.015; filter: drop-shadow(0 0 9px rgba(247, 242, 234, .55)); }
.art-interactive:has(.art-pendulum).art-hovered > .art-motion,
.art-interactive:has(.art-pendulum).art-focused > .art-motion,
.art-pendulum .art-interactive.art-hovered > .art-motion,
.art-pendulum .art-interactive.art-focused > .art-motion,
.art-title-link.art-hovered > .art-motion,
.art-title-link.art-focused > .art-motion { translate: none; scale: none; }
.art-interactive:has(> .art-link:active) > .art-motion { translate: 0 1px; scale: .985; }
.art-paused .art-pendulum { animation-play-state: paused; }

/* Lean against the wall at rest, then straighten and lift toward the visitor. */
.art-about-board > .art-motion > .art-impact > .art-swing {
  transform-origin: 50% 100%;
  transform: perspective(var(--about-perspective, 640px)) translateY(0) rotateX(22deg) scale(1);
  transition: transform 440ms cubic-bezier(.22, .8, .28, 1);
}
.art-about-board::before {
  content: "";
  position: absolute;
  left: 4%;
  bottom: -.5%;
  width: 92%;
  height: 2%;
  border-radius: 50%;
  background: rgba(8, 9, 17, .35);
  filter: blur(var(--about-shadow-blur, 2.8px));
  transition: opacity 440ms ease, transform 440ms ease;
  pointer-events: none;
}
.art-about-board.art-hovered > .art-motion,
.art-about-board.art-focused > .art-motion,
.art-about-board:has(> .art-link:active) > .art-motion {
  translate: none;
  scale: none;
  filter: none;
}
.art-about-board.art-hovered > .art-motion > .art-impact > .art-swing,
.art-about-board.art-focused > .art-motion > .art-impact > .art-swing {
  transform: perspective(var(--about-perspective, 640px)) translateY(-4%) rotateX(0deg) scale(1.035);
}
.art-about-board.art-hovered::before,
.art-about-board.art-focused::before {
  opacity: .25;
  transform: scaleX(.92);
}

@keyframes art-pendulum {
  0%, 100% { transform: rotate(-.45deg); }
  50% { transform: rotate(.45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .art-motion { transition: none; }
  .art-about-board > .art-motion > .art-impact > .art-swing,
  .art-about-board::before { transition: none; }
  .art-about-board.art-hovered > .art-motion > .art-impact > .art-swing,
  .art-about-board.art-focused > .art-motion > .art-impact > .art-swing {
    transform: perspective(var(--about-perspective, 640px)) translateY(0) rotateX(0deg) scale(1);
  }
  .art-pendulum { animation: none; }
  .art-interactive.art-hovered > .art-motion,
  .art-interactive.art-focused > .art-motion,
  .art-interactive:has(> .art-link:active) > .art-motion { translate: none; scale: none; }
}