/* motion.css
   Reveal and hero-entrance animations. Loaded after the components so the hidden starting states win.
   They are scoped behind html.js (set by assets/js/boot.js), so the page renders in full without scripts,
   and reduced motion turns them off. Behaviour: assets/js/reveals.js.
*/

/* Reveal animations. The hidden state is scoped behind .js, which the
   inline script in <head> sets before first paint, so if the script
   never runs the page still renders in full rather than blank. */
.js .reveal { opacity: 0; transform: translateY(26px); }

/* Hero entrance. WELCOME renders outward from the centre and the
   portrait expands from a point into its circle. These override the
   generic translate above, so they need the extra class of specificity. */
/* keep the element's own centring transform; only the clip animates */
/* WELCOME grows out of the centre: opacity and transform only, so it stays on the compositor */
.js .hero-bigword.reveal {
  transform: translate(-50%, -50%) scale(0.86);
}
.hero-bigword.reveal.in {
  transform: translate(-50%, -50%);
  transition: opacity 0.9s ease-out,
              transform 1.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .hero-photo-wrap.reveal { transform: translate(-50%, 6svh); }
.hero-photo-wrap.reveal.in {
  transform: translate(-50%, 0);
  transition: opacity 0.45s ease-out,
              transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .hero-name.reveal { transform: translateY(20px) scale(0.97); }
.hero-name.reveal.in {
  transform: none;
  transition: opacity 0.6s ease-out,
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .glitch::before, .glitch::after, .hero-photo-wrap::before, .scroll-hint { animation: none; }
  .js .reveal { opacity: 1; transform: none; clip-path: none; }
  .js .hero-bigword.reveal { transform: translate(-50%, -50%); }
  .reveal.in { transition: none; }
}