/* Small changes in depth complement the whale without changing the page grid. */
@media (prefers-reduced-motion: no-preference) {
  .js.wf-page-motion-enabled .reveal {
    transform: perspective(1200px) translate3d(0, 30px, -18px) rotateX(3.5deg);
    transform-origin: 50% 0;
    backface-visibility: hidden;
    transition: opacity 1.15s var(--ease), transform 1.35s var(--ease);
  }

  .js.wf-page-motion-enabled .reveal.visible {
    transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0deg);
  }

  .wf-page-motion-enabled .section-marker.reveal .rule {
    scale: .72 1;
    transform-origin: left center;
    transition: scale 1.65s var(--ease);
  }

  .wf-page-motion-enabled .section-marker.reveal.visible .rule {
    scale: 1 1;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .wf-page-motion-enabled .company-list li,
  .wf-page-motion-enabled .story > summary {
    perspective: 1200px;
  }

  .wf-page-motion-enabled .company-list li > h3,
  .wf-page-motion-enabled .story:not([open]) > summary > h3 {
    transform: translate3d(var(--wf-depth-x, 0px), var(--wf-depth-y, 0px), var(--wf-depth-z, 0px))
      rotateX(var(--wf-depth-rx, 0deg)) rotateY(var(--wf-depth-ry, 0deg));
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    transition: transform .7s var(--ease);
  }

  .wf-page-motion-enabled .company-number,
  .wf-page-motion-enabled .story:not([open]) > summary > .story-meta {
    translate: calc(var(--wf-depth-x, 0px) * -.4) 0;
    transition: translate .8s var(--ease);
  }

  .wf-page-motion-enabled .story:not([open]) > summary > .story-action {
    translate: calc(var(--wf-depth-x, 0px) * .4) 0;
    transition: translate .8s var(--ease);
  }

  .wf-page-motion-enabled [data-wf-depth-active] > h3 {
    will-change: transform;
  }

  .wf-page-motion-enabled .arrow-link .circle-arrow {
    translate: var(--wf-magnetic-x, 0px) var(--wf-magnetic-y, 0px);
    transition: background .4s, color .4s, transform .5s var(--ease), translate .65s var(--ease);
  }
}

/* A manual pause exposes content immediately and stops every added motion. */
.motion-paused *, .motion-paused *::before, .motion-paused *::after {
  animation: none !important;
  transition: none !important;
}
.intro-complete .line > span { animation: none !important; transform: none; }
.intro-complete .hero-art, .intro-complete .hero-description, .intro-complete .hero-cta {
  animation: none !important;
  opacity: 1;
}
.intro-complete .hero-art { transform: none; }
.js.wf-page-motion:not(.wf-page-motion-enabled) .reveal,
.js.wf-page-motion .motion-paused .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.wf-page-motion:not(.wf-page-motion-enabled) .rule,
.wf-page-motion .motion-paused .rule {
  scale: 1;
  transition: none;
}

.wf-page-motion:not(.wf-page-motion-enabled) .company-list li > h3,
.wf-page-motion:not(.wf-page-motion-enabled) .story > summary > h3,
.wf-page-motion .motion-paused .company-list li > h3,
.wf-page-motion .motion-paused .story > summary > h3 {
  transform: none;
  transition: none;
}

.wf-page-motion:not(.wf-page-motion-enabled) .company-number,
.wf-page-motion:not(.wf-page-motion-enabled) .story-meta,
.wf-page-motion:not(.wf-page-motion-enabled) .story-action,
.wf-page-motion:not(.wf-page-motion-enabled) .circle-arrow,
.wf-page-motion .motion-paused .company-number,
.wf-page-motion .motion-paused .story-meta,
.wf-page-motion .motion-paused .story-action,
.wf-page-motion .motion-paused .circle-arrow {
  translate: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .js.wf-page-motion .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wf-page-motion .company-list li > h3,
  .wf-page-motion .story > summary > h3 {
    transform: none;
    transition: none;
  }

  .wf-page-motion .rule,
  .wf-page-motion .company-number,
  .wf-page-motion .story-meta,
  .wf-page-motion .story-action,
  .wf-page-motion .circle-arrow {
    scale: 1;
    translate: none;
    transition: none;
  }
}