/* animations.css: entrances, scroll reveals, slow ambient movement and the theme change.
   Only opacity and movement are animated, so nothing shifts the layout. */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Hero entrance ---------- */
  .hero__content > *,
  .hero-visual { animation: rise 640ms var(--ease-out) both; }
  .hero__content > :nth-child(2) { animation-delay: 80ms; }
  .hero__content > :nth-child(3) { animation-delay: 160ms; }
  .hero__content > :nth-child(4) { animation-delay: 240ms; }
  .hero__content > :nth-child(5) { animation-delay: 320ms; }
  .hero-visual { animation-delay: 200ms; }

  /* Very slow drifting of the glow shapes */
  .hero__orb--a { animation: drift 22s ease-in-out infinite; }
  .hero__orb--b { animation: drift 28s ease-in-out infinite reverse; }

  /* ---------- Inner page headers ---------- */
  .page-header .container > * { animation: rise 560ms var(--ease-out) both; }
  .page-header .container > :nth-child(2) { animation-delay: 70ms; }
  .page-header .container > :nth-child(3) { animation-delay: 140ms; }
  .page-header .container > :nth-child(4) { animation-delay: 200ms; }

  /* ---------- Scroll reveals ----------
     init.js adds .reveal-ready, motion.js adds .is-visible.
     The movement uses "translate", so hover effects that use "transform" still work.
     Keep this selector list identical to the one in motion.js. */
  .reveal-ready :is([data-reveal], .service-card, .team-member, .resource-card, .resource-item--listing, .gallery-item, .principles__row, .link-list li, .openings__item, .work-steps__item, .contact-card, .prose) {
    opacity: 0;
    translate: 0 16px;
    transition:
      opacity 640ms var(--ease) var(--reveal-delay, 0ms),
      translate 640ms var(--ease) var(--reveal-delay, 0ms),
      transform var(--t-med) var(--ease),
      box-shadow var(--t-med) var(--ease),
      border-color var(--t-med) var(--ease),
      background-color var(--t-med) var(--ease);
  }
  .reveal-ready :is([data-reveal], .service-card, .team-member, .resource-card, .resource-item--listing, .gallery-item, .principles__row, .link-list li, .openings__item, .work-steps__item, .contact-card, .prose).is-visible {
    opacity: 1;
    translate: none;
  }

  /* ---------- Gentle lift on cards (mouse devices only) ---------- */
  @media (hover: hover) {
    .team-member { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
    .team-member:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  }

  /* ---------- Slow colour change when the theme is switched ----------
     theme.js adds .theme-anim for the length of --theme-duration.
     !important is used here on purpose: this is a short-lived state and must win
     over every other transition so that the whole page fades together. */
  html.theme-anim,
  html.theme-anim *,
  html.theme-anim *::before,
  html.theme-anim *::after {
    transition:
      background-color var(--theme-duration) var(--theme-ease),
      color var(--theme-duration) var(--theme-ease),
      border-color var(--theme-duration) var(--theme-ease),
      fill var(--theme-duration) var(--theme-ease),
      stroke var(--theme-duration) var(--theme-ease),
      box-shadow var(--theme-duration) var(--theme-ease),
      opacity var(--theme-duration) var(--theme-ease) !important;
  }
}

@keyframes rise {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-22px, 16px, 0); }
}