:root { --ink:#111; --gold:#FFB612; --bg:#fff; }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; overflow:hidden; padding:24px 16px;
}

/* ---- Bouncing ball ---- */
.stage { position:relative; width:120px; height:190px; margin-bottom:24px; }
.ball-wrap {
  position:absolute; left:50%; top:0; width:64px; height:64px; margin-left:-32px;
  animation:bounce 1.1s cubic-bezier(.5,0,.5,1) infinite;
  transform-origin:50% 100%;
}
.ball { width:100%; height:100%; animation:spin 2.2s linear infinite; display:block; overflow:visible; }
.shadow {
  position:absolute; left:50%; bottom:0; width:60px; height:10px; margin-left:-30px;
  background:rgba(0,0,0,.18); border-radius:50%; filter:blur(2px);
  animation:shadow 1.1s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes bounce {
  0%   { transform:translateY(0)     scale(1,1); }
  45%  { transform:translateY(116px) scale(1,1); animation-timing-function:ease-out; }
  50%  { transform:translateY(121px) scale(1.18,.8); }
  55%  { transform:translateY(116px) scale(.95,1.06); animation-timing-function:ease-out; }
  100% { transform:translateY(0)     scale(1,1); }
}
@keyframes shadow {
  0%,100% { transform:scale(.45); opacity:.35; }
  50%     { transform:scale(1.05); opacity:1; }
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ---- Headline ---- */
h1 {
  font-weight:800; font-size:clamp(1.8rem, 5.5vw, 3.25rem);
  letter-spacing:-.03em; line-height:1; text-align:center;
  display:flex; flex-wrap:wrap; justify-content:center;
}
h1 .word { display:inline-flex; overflow:hidden; padding-bottom:.08em; }
h1 .word + .word { margin-left:.25em; }
h1 .ch { display:inline-block; transform:translateY(110%); animation:rise .7s cubic-bezier(.2,.9,.2,1.15) forwards; }
@keyframes rise { to { transform:translateY(0); } }

/* ---- Finish line sweep ---- */
.line {
  width:min(220px, 55vw); height:3px; margin:18px auto 0; border-radius:3px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  animation:sweep .9s cubic-bezier(.7,0,.2,1) 1.1s forwards;
}
@keyframes sweep { to { transform:scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .ball-wrap, .ball, .shadow { animation:none; }
  .ball-wrap { transform:translateY(116px); }
  h1 .ch { animation:none; transform:none; }
  .line { animation:none; transform:none; }
}

/* Anyone can stop the bouncing ball. */
.motion { position:fixed; right:16px; bottom:16px; font:600 13px system-ui,sans-serif; color:var(--ink); background:#fff; border:1px solid var(--ink); border-radius:999px; padding:6px 12px; cursor:pointer; }
.still .ball-wrap, .still .ball, .still .shadow { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) { .motion { display:none; } }