/* Subtle page-load fade-up for main sections */

@media (prefers-reduced-motion: no-preference) {
  body:not(.sss-page-load-ready) #sections > section.page-section,
  body:not(.sss-page-load-ready) #footer-sections > section.page-section {
    opacity: 0 !important;
    transform: translate3d(0, 18px, 0) !important;
    animation: none !important;
    transition: none !important;
  }

  /* Inset image cards: avoid opacity fade so gaps between cards don't flash as lines */
  body:not(.sss-page-load-ready) #sections > section.page-section.has-background.background-width--inset,
  body:not(.sss-page-load-ready) #footer-sections > section.page-section.has-background.background-width--inset {
    opacity: 1 !important;
  }

  body.sss-page-load-ready #sections > section.page-section,
  body.sss-page-load-ready #footer-sections > section.page-section {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    transition:
      opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--sss-load-delay, 0s),
      transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--sss-load-delay, 0s) !important;
  }

  body.sss-page-load-ready #sections > section.page-section.has-background.background-width--inset,
  body.sss-page-load-ready #footer-sections > section.page-section.has-background.background-width--inset {
    transition:
      transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--sss-load-delay, 0s) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sections > section.page-section,
  #footer-sections > section.page-section {
    opacity: 1 !important;
    transform: none !important;
  }
}