/* Reusable scroll-motion module. Pages opt in through dkppt-scroll-motion.js. */
  [data-dkppt-motion="ready"] .dkppt-motion-section {
    opacity: 0;
    transform: translateY(64px);
    transition: opacity 760ms ease, transform 760ms cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }

[data-dkppt-motion="ready"] .dkppt-motion-section.is-visible {
  opacity: 1;
  transform: none;
}

/* The opening two scenes set the page rhythm, so their entrance is clearer. */
[data-dkppt-motion="ready"] .dkppt-motion-intro:not(.dkppt-motion-hero):not(.is-visible) {
  transform: translateY(104px);
  transition-duration: 980ms;
}

  [data-dkppt-motion="ready"] .dkppt-motion-hero {
    opacity: 1;
    transform: none;
  }

[data-dkppt-motion="ready"] .dkppt-motion-item {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(.22,.61,.36,1);
}

[data-dkppt-motion="ready"] .dkppt-motion-intro .dkppt-motion-item {
  transform: translateY(58px);
  transition-duration: 760ms;
}

  [data-dkppt-motion="ready"] .dkppt-motion-section.is-visible .dkppt-motion-item {
    opacity: 1;
    transform: none;
  }

  [data-dkppt-motion="ready"] .dkppt-motion-section.is-visible .dkppt-motion-item:nth-child(2) { transition-delay: 110ms; }
  [data-dkppt-motion="ready"] .dkppt-motion-section.is-visible .dkppt-motion-item:nth-child(3) { transition-delay: 220ms; }
  [data-dkppt-motion="ready"] .dkppt-motion-section.is-visible .dkppt-motion-item:nth-child(4) { transition-delay: 330ms; }

  [data-dkppt-motion="ready"] .dkppt-motion-media {
    clip-path: inset(0 0 0 10%);
  }

[data-dkppt-motion="ready"] .dkppt-motion-media img {
  transform: scale(1.13);
  transition: transform 1200ms cubic-bezier(.22,.61,.36,1);
}

[data-dkppt-motion="ready"] .dkppt-motion-intro .dkppt-motion-media img {
  transform: scale(1.2);
  transition-duration: 2800ms;
}

/* The hero image parent is the section itself, unlike the later image blocks. */
[data-dkppt-motion="ready"] .dkppt-motion-hero.dkppt-motion-media img {
  transform: scale(1.2);
  transition-duration: 2800ms;
}

  [data-dkppt-motion="ready"] .dkppt-motion-section.is-visible .dkppt-motion-media {
    clip-path: inset(0);
    transition: clip-path 900ms cubic-bezier(.22,.61,.36,1);
  }

[data-dkppt-motion="ready"] .dkppt-motion-section.is-visible .dkppt-motion-media img,
[data-dkppt-motion="ready"] .dkppt-motion-hero .dkppt-motion-media img {
  transform: scale(1);
}

[data-dkppt-motion="ready"] .dkppt-motion-hero.is-visible.dkppt-motion-media img {
  transform: scale(1);
  animation: dkppt-hero-zoom 4000ms cubic-bezier(.22,.61,.36,1) both;
}

@keyframes dkppt-hero-zoom {
  from { transform: scale(1.2); }
  to { transform: scale(1); }
}