/* Sunday Websites: motion layer (all pages).
   Small, slow-to-settle movements. Respects prefers-reduced-motion. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }

@keyframes mo-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }

.home-hero__card .eyebrow  { animation: mo-up .8s var(--ease-out) .05s both; }
.home-hero__card h1        { animation: mo-up .9s var(--ease-out) .12s both; }
.home-hero__card .lede     { animation: mo-up .9s var(--ease-out) .24s both; }
.home-hero__card .stack-20 { animation: mo-up .9s var(--ease-out) .36s both; }
.home-hero__photo          { animation: mo-fade .9s ease-out .2s both; }
.home-hero__photo img      { animation: mo-zoom 1.8s var(--ease-out) .2s both; }

/* ---------- Inner-page hero entrance ---------- */
/* The first section's text stack (the one holding the h1) rises in, child by child. */
main > section:first-of-type:not(:has(.home-hero)) .stack:has(> h1) > * { animation: mo-up .85s var(--ease-out) both; }
main > section:first-of-type:not(:has(.home-hero)) .stack:has(> h1) > :nth-child(1) { animation-delay: .05s; }
main > section:first-of-type:not(:has(.home-hero)) .stack:has(> h1) > :nth-child(2) { animation-delay: .12s; }
main > section:first-of-type:not(:has(.home-hero)) .stack:has(> h1) > :nth-child(3) { animation-delay: .2s; }
main > section:first-of-type:not(:has(.home-hero)) .stack:has(> h1) > :nth-child(4) { animation-delay: .28s; }
main > section:first-of-type:not(:has(.home-hero)) .stack:has(> h1) > :nth-child(5) { animation-delay: .36s; }
main > section:first-of-type:not(:has(.home-hero)) .stack:has(> h1) > :nth-child(n+6) { animation-delay: .44s; }
main > section:first-of-type:not(:has(.home-hero)) .photo { animation: mo-fade .9s ease-out .2s both; }
main > section:first-of-type:not(:has(.home-hero)) .photo img { animation: mo-zoom 1.8s var(--ease-out) .2s both; }

/* Dark panel rings: a slow breath */
@keyframes mo-ring { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.dark .ring { animation: mo-ring 10s ease-in-out infinite; }
.dark .ring + .ring { animation-duration: 13s; animation-delay: -5s; }

/* Button press feedback */
.btn:active { transform: scale(.97); }

/* Stat numbers: steady width while counting */
.stat-xl, .stat-num, .stat-lg { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .home-hero__card .eyebrow, .home-hero__card h1, .home-hero__card .lede, .home-hero__card .stack-20,
  .home-hero__photo, .home-hero__photo img { animation: none; }
  main > section:first-of-type .stack:has(> h1) > *, main > section:first-of-type .photo, main > section:first-of-type .photo img { animation: none; }
  .dark .ring { animation: none; }
}