/* Scroll effect on top of styles.css (after marroquin.co): the page snaps screen by screen,
   and each section fades up gently as it arrives.
     Desktop (> 860px): 2 screens: header + About | Team + Contact + footer.
     Mobile  (≤ 860px): 3 screens: header + About | Team | Contact + footer.
   Visitors who ask their system for reduced motion get the static layout exactly. */

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

  html { scroll-snap-type: y mandatory; }

  .site-header { scroll-snap-align: start; }
  #team { scroll-snap-align: start; }
  /* Keeps the footer reachable if the last screen runs taller than the window. */
  .site-footer { scroll-snap-align: end; }

  /* Mobile: each screen fills the viewport with its content centred. */
  @media (max-width: 860px) {
    #contact { scroll-snap-align: start; }

    #about,
    #team,
    #contact {
      align-content: center;
      padding: 48px 0; /* minimum, for small phones */
    }

    #about { min-height: calc(var(--screen) - var(--header-h)); }
    #team { min-height: var(--screen); }
    #contact { min-height: calc(var(--screen) - var(--footer-h)); }
  }

  /* Very short desktop windows: snapping would fight the reader, so skip it. */
  @media (min-width: 861px) and (max-height: 559px) {
    html { scroll-snap-type: none; }
  }

  /* Fade-up. Only hidden once the inline script in <head> has run. */
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .js .content.reveal { transition-delay: 0.15s; }

  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}