:root {
  --motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --color-ink: #ecedf2;
  --color-muted: #a4aac3;
  --color-ground: #0d0d10;
  --color-surface: #1e2027;
  --color-accent: #d6d8e3;
}
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--motion-ease-out), transform 700ms var(--motion-ease-out); }
  .motion-ready .reveal.is-visible { opacity: 1; transform: none; }
}
.arrow { display: inline-block; transition: transform 200ms var(--motion-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .action:hover .arrow { transform: translate(3px, -3px); }
}
.action:active { transform: scale(0.98); }
.action { transition: transform 120ms var(--motion-ease-out), background-color 200ms ease; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .action, .arrow { transition: none; }
  .action:active, .action:hover .arrow { transform: none; }
}