/* ============================================================
   KEYFRAMES
============================================================ */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* The page's one orchestrated moment: the name opens from
   condensed to expanded on the variable width axis. */
@keyframes name-widen {
    from { font-variation-settings: 'wdth' 50; opacity: 0; }
    30%  { opacity: 1; }
    to   { font-variation-settings: 'wdth' 150; opacity: 1; }
}

@keyframes name-widen-sm {
    from { font-variation-settings: 'wdth' 50; opacity: 0; }
    30%  { opacity: 1; }
    to   { font-variation-settings: 'wdth' 120; opacity: 1; }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================
   HERO ENTRANCE
============================================================ */
.hero__word { animation: name-widen 1.3s var(--ease-out) both; }
.hero__word + .hero__word { animation-delay: 0.12s; }
.hero__foot { animation: rise 0.7s var(--ease-out) 0.75s both; }

@media (max-width: 600px) {
    .hero__word { animation-name: name-widen-sm; }
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
    }
    .loader-ring { animation: spin 1.6s linear infinite !important; }
}