/* Progressive enhancement: no waiting/hidden state. Content is visible without JS. */
:root {
  --wf-motion-ease: cubic-bezier(.2,.7,.2,1);
}

.wf-scroll-motion .wf-scroll-photo {
  overflow: hidden;
  overflow: clip;
}

/* Individual transform properties compose with existing hover/position transforms. */
.wf-scroll-motion .wf-scroll-layer-photo {
  translate: 0 var(--wf-photo-y, 0px);
  scale: 1.065;
  transform-origin: 50% 50%;
}

.wf-scroll-motion .wf-scroll-layer-text {
  translate: 0 var(--wf-text-y, 0px);
  opacity: var(--wf-text-alpha, 1);
}

.wf-scroll-motion .wf-scroll-enter {
  animation: wf-scroll-rise var(--wf-scroll-duration, 280ms) var(--wf-motion-ease)
    var(--wf-scroll-delay, 0ms) both;
  will-change: opacity, translate;
}

.wf-scroll-motion .wf-scroll-enter-card {
  animation-name: wf-scroll-card;
}

.wf-scroll-motion .wf-scroll-enter-photo {
  animation-name: wf-scroll-photo;
}

.wf-scroll-motion .wf-scroll-enter-photo > .wf-scroll-layer-photo {
  animation: wf-scroll-settle var(--wf-scroll-duration, 280ms) var(--wf-motion-ease)
    var(--wf-scroll-delay, 0ms) both;
}

@keyframes wf-scroll-rise {
  from { opacity: .08; translate: 0 calc(var(--wf-text-y, 0px) + 24px); }
  to { opacity: var(--wf-text-alpha, 1); translate: 0 var(--wf-text-y, 0px); }
}

@keyframes wf-scroll-card {
  from { opacity: .28; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes wf-scroll-photo {
  from { opacity: .35; clip-path: inset(14% 0 0 0); translate: 0 22px; }
  to { opacity: 1; clip-path: inset(0); translate: 0 0; }
}

@keyframes wf-scroll-settle {
  from { scale: 1.035; }
  to { scale: 1.065; }
}

/* Do not let a keyboard target or native anchor destination wait for a reveal. */
.wf-scroll-motion .wf-scroll-enter:focus-within,
.wf-scroll-motion .wf-scroll-enter:target,
.wf-scroll-motion :target .wf-scroll-enter {
  animation: none;
}

/* A small visual response only; these rules never change hit testing or scrolling. */
.wf-scroll-motion .wf-scroll-layer-text:focus-within,
.wf-scroll-motion .wf-scroll-layer-text:target {
  opacity: 1;
  translate: 0 0;
}

@media (max-width: 700px) {
  @keyframes wf-scroll-rise {
    from { opacity: .18; translate: 0 calc(var(--wf-text-y, 0px) + 17px); }
    to { opacity: var(--wf-text-alpha, 1); translate: 0 var(--wf-text-y, 0px); }
  }
  @keyframes wf-scroll-card {
    from { opacity: .4; translate: 0 20px; }
    to { opacity: 1; translate: 0 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-scroll-motion .wf-scroll-enter,
  .wf-scroll-motion .wf-scroll-enter-photo > .wf-scroll-layer-photo {
    animation: none !important;
  }
  .wf-scroll-motion .wf-scroll-layer-photo,
  .wf-scroll-motion .wf-scroll-layer-text {
    translate: none !important;
    scale: none !important;
    opacity: 1 !important;
  }
}