.reference-hero .key-motion {
  position: absolute;
  z-index: 3;
  left: 47.5%;
  bottom: 18%;
  width: min(calc(var(--scene-size) * 570 / 1254), calc(100vw - 32px));
  aspect-ratio: 16 / 9;
  transform: translateX(-50%);
  pointer-events: none;
  isolation: isolate;
}

.reference-hero .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 43% 30% at 47% 67%, rgba(81, 183, 211, .17), transparent 80%);
  pointer-events: none;
}

.reference-hero .key-motion::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 25% -5% -3%;
  background: radial-gradient(ellipse at 50% 68%, rgba(131, 241, 255, .18), rgba(46, 181, 209, .06) 40%, transparent 72%);
  pointer-events: none;
}

.key-motion-board {
  position: absolute;
  inset: 0;
}

.key-motion-key {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 17%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  appearance: none;
  --key-arrival-x: 0px;
  --key-arrival-y: -18px;
}

/* Positions retain the proportions of the original 640 × 360 artwork. */
.key-motion-key:nth-child(1) { left: 15.3125%; top: 17.7778%; width: 17.8125%; height: 28.3333%; --key-order: 0; --key-arrival-x: -14px; }
.key-motion-key:nth-child(2) { left: 33.125%; top: 17.7778%; width: 16.25%; height: 28.3333%; --key-order: 1; --key-arrival-x: -5px; }
.key-motion-key:nth-child(3) { left: 49.375%; top: 17.7778%; width: 16.25%; height: 28.3333%; --key-order: 2; --key-arrival-x: 5px; }
.key-motion-key:nth-child(4) { left: 65.625%; top: 17.7778%; width: 17.8125%; height: 28.3333%; --key-order: 3; --key-arrival-x: 14px; }
.key-motion-key:nth-child(n+5) { top: 46.1111%; height: 31.6667%; --key-arrival-y: 20px; }
.key-motion-key:nth-child(5) { left: 5%; width: 19.375%; --key-order: 4; --key-arrival-x: -16px; }
.key-motion-key:nth-child(6) { left: 24.375%; width: 18.125%; --key-order: 5; --key-arrival-x: -8px; }
.key-motion-key:nth-child(7) { left: 42.5%; width: 16.875%; --key-order: 6; }
.key-motion-key:nth-child(8) { left: 59.375%; width: 16.875%; --key-order: 7; --key-arrival-x: 8px; }
.key-motion-key:nth-child(9) { left: 76.25%; width: 17.5%; --key-order: 8; --key-arrival-x: 16px; }

.key-motion-cap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform: translateY(0) scale(1);
  transform-origin: 50% 74%;
  transition: transform .34s cubic-bezier(.2, .8, .25, 1);
}

.key-motion-cap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  -webkit-user-drag: none;
}

.key-motion-cap::after {
  content: "";
  position: absolute;
  inset: 7% 10% 28% 17%;
  border-radius: 20%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(215, 255, 255, .05) 70%);
  box-shadow: inset 0 0 0 1px rgba(240, 255, 255, .5);
  opacity: 0;
  transition: opacity .26s ease;
  pointer-events: none;
}

.key-motion-key:focus { outline: none; }
.key-motion-key:focus-visible {
  outline: 2px solid #d6faff;
  outline-offset: 4px;
}
.key-motion-key:focus-visible .key-motion-cap::after { opacity: .4; }

@media (hover: hover) and (pointer: fine) {
  .key-motion-key:hover .key-motion-cap { transform: translateY(-2px) scale(1.012); }
  .key-motion-key:hover .key-motion-cap::after { opacity: .28; }
}

.key-motion-key.is-pressed .key-motion-cap,
.key-motion-key:active .key-motion-cap {
  transform: translateY(4px) scale(.965);
  transition-duration: .09s;
}
.key-motion-key.is-pressed .key-motion-cap::after,
.key-motion-key:active .key-motion-cap::after { opacity: .58; transition-duration: .09s; }

/* One rendered surface at a time: the final video frame matches the board. */
.key-motion-board { opacity: 1; }
.key-motion-video, .key-motion-animation { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.key-motion-enabled .key-motion:not(.is-ready) .key-motion-board { opacity: 0; visibility: hidden; }
.key-motion.is-video-running .key-motion-video, .key-motion.is-image-running .key-motion-animation { opacity: 1; }
.key-motion.is-video-running .key-motion-board, .key-motion.is-image-running .key-motion-board { opacity: 0; visibility: hidden; }

@media (max-width: 700px) {
  .reference-hero .key-motion {
    left: 47%;
    bottom: 24%;
    width: min(80vw, 360px);
  }
  .reference-hero .key-motion::before {
    background: radial-gradient(ellipse at 50% 68%, rgba(131, 241, 255, .12), transparent 72%);
  }
  .key-motion-key { --key-arrival-y: -12px; }
  .key-motion-key:nth-child(n+5) { --key-arrival-y: 14px; }
  .key-motion-key.is-pressed .key-motion-cap,
  .key-motion-key:active .key-motion-cap { transform: translateY(3px) scale(.965); }
}

@media (max-width: 360px) {
  .reference-hero .key-motion { bottom: 18%; }
}

@media (prefers-reduced-motion: reduce) {
  .key-motion-cap,
  .key-motion-cap::after { transition: none; }
  .key-motion-key:hover .key-motion-cap,
  .key-motion-key.is-pressed .key-motion-cap,
  .key-motion-key:active .key-motion-cap { transform: none; }
}

/* One short light sweep after assembly; only transform and opacity animate. */
.key-glint { position: absolute; inset: 7% 10% 28% 17%; overflow: hidden; border-radius: 18%; pointer-events: none; }
.key-glint i { position: absolute; inset: -25% auto -25% -60%; width: 55%; opacity: 0; background: linear-gradient(110deg, transparent, #f2ffffce 48%, transparent); transform: translateX(0); }
.is-sparkling .key-glint i { animation: key-glint-pass .64s cubic-bezier(.25,.65,.35,1) both; animation-delay: calc(var(--key-order) * .065s); }
@keyframes key-glint-pass { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: .85; } 80% { opacity: .65; } 100% { transform: translateX(380%); opacity: 0; } }
@media(prefers-reduced-motion:reduce) { .key-glint { display: none; } }

.is-paused .key-glint i { animation-play-state: paused; }