/* Home page motion (driven by motion.js). Kept out of style.css so the motion can be
   reasoned about, and switched off, in one place. */

/* Keep it: the phone and frame fly from step 03 into the cards. */
.flyer { position: fixed; z-index: 20; pointer-events: none; }
.flyer-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; }
/* Each card opens out from where its device lands, so the device seems to grow into its tile. */
.keep-motion #keep .bento-card.reveal { --c: calc(1 - var(--card, 1)); opacity: 1; transform: none; transition: none; clip-path: inset(calc(var(--c) * 34%) calc(var(--c) * 26%) calc(var(--c) * 52%) round 36px); }

/* Finale: the contour map. */
.finale-map { position: relative; max-width: 1120px; height: clamp(260px, 36vw, 460px); margin: 0 auto clamp(20px, 3vw, 40px); }
.finale-map canvas {
  display: block; width: 100%; height: 100%;
  --fade-y: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  --fade-x: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-image: var(--fade-y), var(--fade-x); -webkit-mask-composite: source-in;
  mask-image: var(--fade-y), var(--fade-x); mask-composite: intersect;
}
.finale-race { margin: 0 0 clamp(24px, 3vw, 40px); color: rgba(255, 255, 255, 0.5); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; }
.finale-race.show { animation: finale-caption 9.4s var(--ease) both; }
@keyframes finale-caption { 0% { opacity: 0; transform: translateY(6px); } 8%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .finale-race.show { animation: none; opacity: 1; }
}