[data-reveal-kind] {
  --reveal-delay: 500ms;
}

[data-reveal-kind="portrait"] {
  position: relative;
  isolation: isolate;
}

[data-reveal-kind="slide-in-left"],
[data-reveal-kind="slide-in-right"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

[data-reveal-kind="portrait"] {
  overflow: hidden;
}

[data-reveal-kind="portrait"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transition:
    transform 820ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--reveal-delay),
    opacity 420ms ease var(--reveal-delay);
}

[data-reveal-kind="portrait"]::after {
  background:
    linear-gradient(180deg, rgba(247, 243, 235, 0.18) 0%, rgba(247, 243, 235, 0.94) 100%);
  transform: translateY(0);
}

[data-reveal-kind="portrait"] img,
[data-reveal-kind="portrait"] .hero-image,
[data-reveal-kind="portrait"] .runup-image,
[data-reveal-kind="portrait"] .scar-image {
  transform: scale(1.1) translateY(2.25rem);
  transform-origin: 50% 50%;
  opacity: 0.01;
  filter: saturate(0.88) contrast(0.94);
  transition:
    transform 960ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--reveal-delay),
    opacity 520ms ease var(--reveal-delay),
    filter 960ms ease var(--reveal-delay);
}

[data-reveal-kind="slide-in-left"] img,
[data-reveal-kind="slide-in-left"] .hero-image,
[data-reveal-kind="slide-in-left"] .runup-image,
[data-reveal-kind="slide-in-left"] .scar-image,
[data-reveal-kind="slide-in-right"] img,
[data-reveal-kind="slide-in-right"] .hero-image,
[data-reveal-kind="slide-in-right"] .runup-image,
[data-reveal-kind="slide-in-right"] .scar-image {
  opacity: 0.01;
  transition:
    transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--reveal-delay),
    opacity 420ms ease var(--reveal-delay),
    filter 900ms ease var(--reveal-delay);
}

[data-reveal-kind="slide-in-left"] img,
[data-reveal-kind="slide-in-left"] .hero-image,
[data-reveal-kind="slide-in-left"] .runup-image,
[data-reveal-kind="slide-in-left"] .scar-image {
  transform: translateX(-2.75rem) scale(1.04);
  transform-origin: 50% 50%;
  filter: saturate(0.92) contrast(0.95);
}

[data-reveal-kind="slide-in-right"] img,
[data-reveal-kind="slide-in-right"] .hero-image,
[data-reveal-kind="slide-in-right"] .runup-image,
[data-reveal-kind="slide-in-right"] .scar-image {
  transform: translateX(2.75rem) scale(1.04);
  transform-origin: 50% 50%;
  filter: saturate(0.92) contrast(0.95);
}

[data-reveal-state="visible"][data-reveal-kind="portrait"]::after {
  transform: translateY(101%);
  opacity: 0;
}

[data-reveal-state="visible"][data-reveal-kind="portrait"] img,
[data-reveal-state="visible"][data-reveal-kind="portrait"] .hero-image,
[data-reveal-state="visible"][data-reveal-kind="portrait"] .runup-image,
[data-reveal-state="visible"][data-reveal-kind="portrait"] .scar-image {
  transform: scale(1) translateY(0);
  opacity: 1;
  filter: saturate(1) contrast(1);
}

[data-reveal-state="visible"][data-reveal-kind="slide-in-left"] img,
[data-reveal-state="visible"][data-reveal-kind="slide-in-left"] .hero-image,
[data-reveal-state="visible"][data-reveal-kind="slide-in-left"] .runup-image,
[data-reveal-state="visible"][data-reveal-kind="slide-in-left"] .scar-image,
[data-reveal-state="visible"][data-reveal-kind="slide-in-right"] img,
[data-reveal-state="visible"][data-reveal-kind="slide-in-right"] .hero-image,
[data-reveal-state="visible"][data-reveal-kind="slide-in-right"] .runup-image,
[data-reveal-state="visible"][data-reveal-kind="slide-in-right"] .scar-image {
  transform: translateX(0) scale(1);
  opacity: 1;
  filter: saturate(1) contrast(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal-kind="portrait"]::after,
  [data-reveal-kind="portrait"] img,
  [data-reveal-kind="portrait"] .hero-image,
  [data-reveal-kind="portrait"] .runup-image,
  [data-reveal-kind="portrait"] .scar-image,
  [data-reveal-kind="slide-in-left"] img,
  [data-reveal-kind="slide-in-left"] .hero-image,
  [data-reveal-kind="slide-in-left"] .runup-image,
  [data-reveal-kind="slide-in-left"] .scar-image,
  [data-reveal-kind="slide-in-right"] img,
  [data-reveal-kind="slide-in-right"] .hero-image,
  [data-reveal-kind="slide-in-right"] .runup-image,
  [data-reveal-kind="slide-in-right"] .scar-image,
  [data-reveal-kind="portrait"]::after {
    transition: none;
    transform: none;
    opacity: 1;
    filter: none;
    clip-path: none;
  }

  [data-reveal-kind="portrait"]::after {
    display: none;
  }
}