/* ============================================================================
   Page to page — cross-document View Transitions, on every page that links
   this sheet (home, careers, the role pages). A navigation crossfades the
   page; when both pages show the reveal ring, scripts/transition.js names it
   (.vt-ring) and it travels from one page's size and place to the other's,
   above the crossfade, while the new page's words rise in as they always do.

   Everything here is scoped to html.vt-nav, which exists only while a
   navigation is in progress, so the theme switch's own transition
   (base.css, scripts/theme.js) is untouched.
   ============================================================================ */

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

.vt-nav .vt-ring {
  view-transition-name: ring;
}

/* the ring that travelled has already arrived: no pull-focus entrance */
.vt-arrive .reveal--enter .reveal__ring {
  animation: none;
}

/* the page: the old one lets go quickly, the new one settles in behind */
html.vt-nav::view-transition-old(root) {
  animation: vt-out .22s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both;
}

html.vt-nav::view-transition-new(root) {
  animation: vt-in .56s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) .08s both;
}

/* the ring: one object changing size and place, on the site's ease */
html.vt-nav::view-transition-group(ring) {
  animation-duration: .9s;
  animation-timing-function: var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}

html.vt-nav::view-transition-old(ring),
html.vt-nav::view-transition-new(ring) {
  animation-duration: .9s;
  animation-timing-function: var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}

@keyframes vt-out {
  to { opacity: 0; }
}

@keyframes vt-in {
  from { opacity: 0; }
}