/**
 * TOOSST — vloeiende entree, beeldbeweging en leesvoortgang.
 *
 * Ontwerp & realisatie: j.kiewiet
 * Website: https://interbit.nl
 */
.motion-ready .header::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--magenta), var(--pink) 80%, #fff4fa);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
}

[data-reveal] {
  --reveal-y: 32px;
  --reveal-scale: 1;
  --reveal-blur: 0px;
  --reveal-duration: 850ms;
  transition:
    opacity var(--reveal-duration) var(--ease),
    transform var(--reveal-duration) var(--ease),
    filter var(--reveal-duration) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal='title'] {
  --reveal-y: 42px;
  --reveal-blur: 3px;
  --reveal-duration: 1000ms;
}
[data-reveal='portrait'],
[data-reveal='image'] {
  --reveal-y: 48px;
  --reveal-scale: 0.97;
  --reveal-duration: 1100ms;
}
[data-reveal='card'] {
  --reveal-y: 40px;
  --reveal-scale: 0.985;
  --reveal-duration: 950ms;
}
[data-reveal='line'] {
  --reveal-y: 18px;
}
.reveal-pending {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0) scale(var(--reveal-scale));
  filter: blur(var(--reveal-blur));
}
.reveal-immediate {
  transition: none !important;
}
.motion-ready [data-reveal='portrait'] .portrait img {
  transition: transform 1100ms var(--ease);
}
.motion-ready [data-reveal='portrait'].reveal-pending .portrait img {
  transform: scale(1.1);
}
.motion-ready .group-photo img {
  translate: 0 var(--photo-shift, 0px);
  transform: scale(1.08);
  transition: transform 900ms var(--ease);
}
.motion-ready .group-photo.reveal-pending img {
  transform: scale(1.16);
}

@media (max-width: 700px) {
  [data-reveal] {
    --reveal-y: 24px;
    --reveal-blur: 0px;
    --reveal-duration: 700ms;
    transition-delay: 0ms;
  }
  .motion-ready .group-photo img {
    translate: none;
    transform: none;
  }
  .motion-ready .group-photo.reveal-pending img {
    transform: scale(1.06);
  }
}

.motion-paused .header::after {
  display: none;
}
.motion-paused [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
.motion-paused .group-photo img,
.motion-paused [data-reveal='portrait'] .portrait img {
  translate: none !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .header::after {
    display: none;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .motion-ready .group-photo img,
  .motion-ready [data-reveal='portrait'] .portrait img {
    translate: none !important;
    transform: none !important;
  }
}