/* ==========================================================================
   ATELIER DH — Animations
   Restrained, orchestrated. "Assembled calmly" — not "animated website".
   ========================================================================== */

/* Staged page-load reveal ----------------------------------------------------
   Order of arrival (front page):
     1. Hero media wrapper fades in      (handled in components.css)
     2. Hero scrim follows                (handled in components.css)
     3. Site header                       (stage-in-header, delay 760ms)
     4. Scroll cue                        (handled in components.css, delay 2600ms)
   Off the front page, the header still uses the same stage-in delay so every
   landing feels composed.
   ----------------------------------------------------------------------------*/
.site-header {
  opacity: 0;
  transform: translateY(-4px);
  animation: stage-in-header 1200ms var(--ease-editorial) 760ms forwards;
}

@keyframes stage-in-header {
  to { opacity: 1; transform: translateY(0); }
}

/* Editorial body reveal — opt-in via .fade-in-up.
   Used by hero-reveal.js and any scroll-triggered sections later. */
.fade-in-up {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1200ms var(--ease-editorial),
              transform 1200ms var(--ease-editorial);
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced Motion --------------------------------------------------------------
   Respect user preference: no transforms, no fades, no staged reveals.
   ----------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .site-header {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .project-card img {
    transition: none !important;
  }

  .project-card:hover img {
    transform: none !important;
    filter: none !important;
  }

  .project-card .veil {
    opacity: 1 !important;
    transition: none !important;
  }

  .project-card .card-meta {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .fade-in-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  video,
  .hero-video,
  .hero-scrim,
  .hero-media {
    animation: none !important;
    opacity: 1 !important;
  }
}