:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Small movements keep attention on the application rather than the effects. */
.button, .nav-button, .choice, .stats article {
  transition: transform 240ms var(--motion-ease), box-shadow 240ms ease,
    background-color 180ms ease, border-color 180ms ease;
}
.button { position: relative; overflow: hidden; isolation: isolate; }
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, #ffffff65 48%, transparent 75%);
  transform: translateX(-120%);
  pointer-events: none;
}
.button > span { transition: transform 240ms var(--motion-ease); }
.button:focus-visible > span { transform: translate(3px, -3px); }
.button:active:not(:disabled), .nav-button:active { transform: scale(.98); }
.choice { cursor: pointer; }
.choice:has(input:checked) { box-shadow: 0 0 0 2px #b5f40015; }
input:not([type=radio]):not([type=checkbox]), select, textarea {
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
input:focus, select:focus, textarea:focus { box-shadow: 0 3px 14px #81b00012; }
.steps > span { position: relative; transition: color 240ms ease; }
.steps > span::after {
  content: ""; position: absolute; height: 2px; bottom: -19px;
  left: 0; right: 0; background: #8dbd12; transform: scaleX(0);
  transform-origin: left; transition: transform 380ms var(--motion-ease);
}
.steps > span.active::after { transform: scaleX(1); }
.hero { position: relative; }
.hero-copy { position: relative; z-index: 1; }
.hero::before {
  content: ""; position: absolute; width: 250px; height: 250px;
  right: -140px; top: -120px; border-radius: 50%;
  background: radial-gradient(circle, #b5f40018, transparent 70%);
  pointer-events: none;
}
.voice-mark { display: flex; align-items: center; gap: 4px; height: 26px; margin-top: 22px; }
.voice-mark span {
  display: block; width: 3px; height: 18px; border-radius: 3px;
  background: var(--lime); transform: scaleY(.45);
  animation: cupco-voice 1200ms ease-in-out 3;
  animation-delay: calc(var(--bar) * 100ms);
}
.voice-mark span:nth-child(2n) { height: 26px; }
.voice-mark span:nth-child(3n) { height: 12px; }
.scroll-progress {
  position: fixed; inset: 0 0 auto; height: 3px;
  background: var(--lime); transform: scaleX(0); transform-origin: left;
  z-index: 100; pointer-events: none;
}
.submit[aria-busy=true]::after {
  content: ""; width: 14px; height: 14px; border: 2px solid #20221e30;
  border-top-color: var(--ink); border-radius: 50%;
  animation: cupco-spin 850ms linear infinite;
}
.submitted > span { display: inline-block; }
@keyframes cupco-voice { 50% { transform: scaleY(1); opacity: .65; } }
@keyframes cupco-shine { to { transform: translateX(120%); } }
@keyframes cupco-spin { to { transform: rotate(360deg); } }
@media (hover:hover) and (pointer:fine) {
  .button:hover:not(:disabled), .nav-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #20221e12; }
  .button:hover:not(:disabled)::before { animation: cupco-shine 650ms ease-out; }
  .button:hover > span { transform: translate(3px, -3px); }
  .choice:hover { transform: translateY(-1px); border-color: #b2c28c; }
  .stats article:hover { transform: translateY(-3px); box-shadow: 0 10px 24px #20221e08; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .button, .nav-button, .choice, .stats article, .button > span,
  input, select, textarea, .steps > span, .steps > span::after { transition: none !important; }
  .voice-mark span, .button::before, .submit[aria-busy=true]::after { animation: none !important; }
  .button:hover, .nav-button:hover, .choice:hover, .stats article:hover,
  .button:hover > span, .button:focus-visible > span { transform: none !important; }
}