/* ============================================================
   Motion
   Scroll reveal: give any element the class `reveal` and it fades
   and rises into place the first time it scrolls into view.
   js/motion.js adds `js-motion` to <html> and `is-visible` to each
   element as it arrives, so without the script nothing is hidden.
   Uses `translate` (not `transform`) so hover transforms set in the
   Style panel keep working.
   ============================================================ */

@keyframes reveal-up {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}

.js-motion .reveal {
  opacity: 0;
}

.js-motion .reveal.is-visible {
  animation: reveal-up .7s cubic-bezier(.2, .7, .2, 1) both;
}

/* Neighbours arrive one after another */
.js-motion .reveal.is-visible:nth-child(2) { animation-delay: .08s; }
.js-motion .reveal.is-visible:nth-child(3) { animation-delay: .16s; }
.js-motion .reveal.is-visible:nth-child(4) { animation-delay: .24s; }
.js-motion .reveal.is-visible:nth-child(5) { animation-delay: .32s; }

/* Parallax: the services photo is taller than its frame and drifts
   through it as the frame crosses the screen. Browsers without
   scroll-driven animations simply show it still. */
@keyframes parallax-drift {
  from { translate: 0 -16%; }
  to { translate: 0 16%; }
}

/* Provider slider: each new photo slides in from the right over the
   last one, and the name and rating follow a beat behind it.
   js/provider-slider.js moves `is-active` along. */
@keyframes provider-photo-in {
  from { translate: 100% 0; }
  to { translate: 0 0; }
}

@keyframes provider-name-in {
  from { opacity: 0; translate: 32px 0; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-book-slide.is-active {
    animation: provider-photo-in .6s cubic-bezier(.2, .7, .2, 1) both;
  }

  .hero-provider.is-active {
    animation: provider-name-in .5s cubic-bezier(.2, .7, .2, 1) .25s both;
  }
}

/* Navbar dropdown cards: drop in softly when opened
   (js/nav-dropdowns.js adds `is-open`). */
@keyframes dropdown-in {
  from { opacity: 0; translate: 0 -8px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .mega-menu.is-open {
    animation: dropdown-in .25s cubic-bezier(.25, 1, .5, 1) both;
  }
}

/* Hero collage: over the first screen of scrolling the left column
   slides down and the right column slides up. */
@keyframes collage-down {
  to { translate: 0 80px; }
}

@keyframes collage-up {
  to { translate: 0 -80px; }
}

@keyframes collage-right {
  to { translate: 80px 0; }
}

@keyframes collage-left {
  to { translate: -80px 0; }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-collage-col {
      animation: collage-down linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }

    .hero-collage-col.is-offset {
      animation-name: collage-up;
    }

    /* Tablet and phone: the columns lie down as two rows, so they slide
       sideways instead, the top row right and the bottom row left. */
    @media (max-width: 991px) {
      .hero-collage-col {
        animation-name: collage-right;
      }

      .hero-collage-col.is-offset {
        animation-name: collage-left;
      }
    }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The frame clips its photo (overflow: hidden), which makes it a scroll
       container of its own, so a plain view() on the photo would be
       measured against the frame and never move. The frame is named as the
       timeline instead: it is tracked as it crosses the page. */
    .services-photo {
      view-timeline: --services-photo block;
    }

    .services-photo-img {
      animation: parallax-drift linear both;
      animation-timeline: --services-photo;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal {
    opacity: 1;
    animation: none;
  }
}