/* Site-wide motion — kept deliberately simple.
   Timing and easing follow the Atollon Motion tokens: power3.out (cubic-bezier(0.165, 0.84, 0.44, 1)),
   1.2s for reveals, 0.6s for hovers.

   Fades only apply once the inline <head> script has added .motion to <html>, which it skips for
   prefers-reduced-motion. js/motion.js adds .is-in as each block scrolls into view, then .m-done
   so the block goes back to behaving normally. */

:root {
  --m-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --m-reveal: 1.2s;
  --m-hover: 0.6s;
}

/* ---- Fade in ------------------------------------------------------------- */
/* Targets: each block inside a section (the logo grid's section is split so the logos can sweep
   on their own), and the footer's rows. */

.motion :is(
  section > *:not(:has(.logo-grid)),
  section > *:has(.logo-grid) > *:not(.logo-grid),
  .site-footer > *
):not(.m-done) {
  transition: opacity var(--m-reveal) var(--m-ease), transform var(--m-reveal) var(--m-ease);
}

.motion :is(
  section > *:not(:has(.logo-grid)),
  section > *:has(.logo-grid) > *:not(.logo-grid),
  .site-footer > *
):not(.is-in) {
  opacity: 0;
  transform: translateY(24px);
}

/* ---- Logos: left to right ------------------------------------------------ */

.motion .logo-grid > img {
  transition: opacity var(--m-reveal) var(--m-ease), transform var(--m-reveal) var(--m-ease);
}
.motion .logo-grid > img:not(.is-in) {
  opacity: 0;
  transform: translateY(16px);
}

/* ---- Rollovers ----------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* Pill buttons everywhere: a small lift and a soft shadow. */
  :is(a, button):is([style*="border-radius: 999px"], .nav-cta, .nav-outline, .footer-cta) {
    transition:
      transform var(--m-hover) var(--m-ease),
      box-shadow var(--m-hover) var(--m-ease),
      background-color 0.3s ease !important;
  }
  :is(a, button):is([style*="border-radius: 999px"], .nav-cta, .nav-outline, .footer-cta):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(10, 10, 42, 0.45);
  }

  /* Team photos and media cards lift a touch. */
  #team button img,
  .media-card {
    transition: transform var(--m-hover) var(--m-ease), background-color 0.3s ease;
  }
  #team button:hover img { transform: translateY(-6px); }
  .media-card:hover { transform: translateY(-4px); }
}