/* ============================================================
   MOTION — page transitions, hero entrance, scroll reveals.
   Everything here is off under prefers-reduced-motion, and the
   reveal styles only apply once motion.js has added .js-motion,
   so the site reads fully without JavaScript.
   ============================================================ */

/* Cross-page fade (browsers without support just navigate) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .28s; }
.site-header { view-transition-name: site-header; }

/* Hero: slow drift on the photograph */
@keyframes hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.hero-bg {
  transform-origin: 60% 40%;
  animation: hero-drift 20s ease-out both;
}

/* Hero: staggered entrance */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero-inner > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero-inner > :nth-child(2) { animation-delay: .08s; }
.hero-inner > :nth-child(3) { animation-delay: .16s; }
.hero-inner > :nth-child(4) { animation-delay: .24s; }
.hero-inner > :nth-child(5) { animation-delay: .32s; }

/* Count-up numbers keep their width while counting */
[data-count] { font-variant-numeric: tabular-nums; }

/* Scroll reveals (motion.js marks only below-the-fold elements) */
.js-motion .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.js-motion .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .hero-bg,
  .hero-inner > * { animation: none; }
  .js-motion .reveal { opacity: 1; transform: none; transition: none; }
}