/* ==========================================================================
   SBHS — Utilities & motion
   ========================================================================== */

.text-ink { color: var(--c-ink); }
.text-muted { color: var(--c-muted); }
.text-link { color: var(--c-link); }
.text-accent { color: var(--c-accent-text); }
.font-serif-display { font-family: var(--font-serif); }
.measure { max-width: 42rem; }
.measure-sm { max-width: 34rem; }
.no-js-hidden { display: none; }

/* Reveal-on-scroll. Only hidden when JS is running (html.js) and the
   visitor has not asked for reduced motion — content is never lost. */
@media (prefers-reduced-motion: no-preference) {
  :root.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  :root.js [data-reveal].is-visible { opacity: 1; transform: none; }

  .hero-enter > * { animation: fade-up 800ms var(--ease-out) both; }
  .hero-enter > *:nth-child(2) { animation-delay: 80ms; }
  .hero-enter > *:nth-child(3) { animation-delay: 160ms; }
  .hero-enter > *:nth-child(4) { animation-delay: 240ms; }
  .hero-enter > *:nth-child(5) { animation-delay: 320ms; }
  .fade-in { animation: fade-in 1000ms var(--ease-out) both 150ms; }
}

@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }