/* Site motion on top of the kit's hover layer (assets/motion). Transform and opacity only. */
:root {
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* easeOutBack, easings.net: the playful pop */
}

/* ---------- hero phones: stagger in, then float; one screen crossfades at a time */
.phones { position: absolute; inset: 0; padding: 4% 0 3%; display: flex; justify-content: center; gap: 1.7%; }
.phone { height: 100%; aspect-ratio: 420 / 910; animation: phone-in 700ms var(--ease-out-strong) both; animation-delay: calc(120ms + var(--i) * 70ms); }
.phone__float { position: relative; height: 100%; animation: phone-float 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
.phone__float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 600ms ease; }
.phone__float img.is-leaving { opacity: 0; }
@keyframes phone-in { from { opacity: 0; transform: translateY(48px) scale(0.96); } }
@keyframes phone-float { 50% { transform: translateY(-8px); } }

.phones__pause { position: absolute; right: 0; bottom: 0; z-index: 3; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); cursor: pointer;
  transition: transform 140ms var(--ease-out-strong), border-color 180ms ease; }
.phones__pause svg { width: 12px; height: 12px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.phones__pause .i-pause { fill: none; }
.phones__pause .i-play, .phones__pause[aria-pressed="true"] .i-pause { display: none; }
.phones__pause[aria-pressed="true"] .i-play { display: inline; }
.phones__pause:active { transform: scale(0.94); }
.hero__stage.is-paused .phone__float { animation-play-state: paused; }

/* ---------- game cards: the icon hops, the banner glows in the game's colour */
@media (hover: hover) and (pointer: fine) {
  #games .card--open > .panel { transition: transform 240ms var(--ease-out-strong), box-shadow 240ms ease; }
  #games .card--open:hover > .panel { box-shadow: 0 16px 48px -12px var(--glow); }
  #games .card--open:hover .game__name img { animation: icon-hop 520ms var(--ease-out-strong); }
}
@keyframes icon-hop {
  30% { transform: translateY(-8px) rotate(-6deg) scale(1.06); }
  60% { transform: translateY(0) rotate(3deg) scale(0.98); }
}

/* ---------- quiz: emoji pop in one by one, right answer bounces, wrong one shakes */
.quiz__emoji span { animation: emoji-pop 380ms var(--ease-back) both; animation-delay: calc(var(--k, 0) * 55ms); }
@keyframes emoji-pop { from { opacity: 0; transform: scale(0.6); } }
.quiz__choices button { animation: choice-in 320ms var(--ease-out-strong) both; animation-delay: calc(400ms + var(--k, 0) * 50ms); }
@keyframes choice-in { from { opacity: 0; transform: translateY(8px); } }
.quiz__choices button.is-right { animation: right-bounce 480ms var(--ease-back); }
.quiz__choices button.is-wrong { animation: wrong-shake 420ms var(--ease-out-strong); }
@keyframes right-bounce { 40% { transform: scale(1.06); } }
@keyframes wrong-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.quiz__score-pop { display: inline-block; animation: score-pop 360ms var(--ease-back); }
@keyframes score-pop { 40% { transform: scale(1.35); color: #7ee2a8; } }

.quiz { position: relative; overflow: hidden; }
.quiz [hidden] { display: none !important; }
.quiz__end { display: grid; gap: var(--s-4); align-content: center; justify-items: start; min-height: 100%; animation: choice-in 420ms var(--ease-out-strong) both; }
.quiz__end strong { font: var(--display-weight) var(--t-h2)/1.1 var(--font-display); letter-spacing: var(--display-tracking); }
.quiz__end .btn-row { margin-top: var(--s-3); }
.confetti { position: absolute; top: 0; left: 0; font-size: 26px; line-height: 1; pointer-events: none; z-index: 2; will-change: transform; }

/* ---------- scroll reveal: once per block, only when the script runs */
html.js-reveal [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 600ms ease, transform 700ms var(--ease-out-strong); transition-delay: calc(var(--k, 0) * 70ms); }
html.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- reduced motion: no movement; screens stay put, things simply appear */
@media (prefers-reduced-motion: reduce) {
  .phone, .phone__float, .quiz__emoji span, .quiz__choices button, .quiz__choices button.is-right,
  .quiz__choices button.is-wrong, .quiz__score-pop, .quiz__end { animation: none; }
  .phones__pause { display: none; }
  html.js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}