/* =============================================================================
   Motion (redesign batch 3): G5 one gentle fade-in per home section, G7 one short page-load fade.
   Transforms and opacity only, so nothing shifts. Both off under prefers-reduced-motion.
   Content shows without JavaScript: the hidden state exists only once dpl-reveal.js has added
   `dpl-reveal-ready` to <html>.
   ============================================================================= */

/* G5 */
html.dpl-reveal-ready .dpl-reveal {
  transition: opacity 0.5s var(--dpl-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.5s var(--dpl-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

html.dpl-reveal-ready .dpl-reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(16px);
}

/* G7: main only; the header and the strip stay put. No transform. */
@keyframes dpl-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

#MainContent {
  animation: dpl-page-in 0.3s ease-out backwards;
}

@media (prefers-reduced-motion: reduce) {
  #MainContent {
    animation: none;
  }

  html.dpl-reveal-ready .dpl-reveal,
  html.dpl-reveal-ready .dpl-reveal:not(.is-in) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}