/* AI-Author: Claude (Anthropic) — scroll-driven image reveal (see reveal.js).
   Without JS / reduced motion the AFTER image is simply shown (final state). */
.reveal-wipe { position: relative; overflow: hidden; }
.reveal-wipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.reveal-wipe .reveal-before { z-index: 0; }
.reveal-wipe .reveal-after { z-index: 1; }

/* Armed by reveal.js: the reveal follows --rv (0 → 1). */
.reveal-wipe.is-armed[data-reveal="ltr"] .reveal-after { clip-path: inset(0 calc((1 - var(--rv, 1)) * 100%) 0 0); }
.reveal-wipe.is-armed[data-reveal="ttb"] .reveal-after { clip-path: inset(0 0 calc((1 - var(--rv, 1)) * 100%) 0); }

/* The thin teal edge that travels with the wipe. */
.reveal-wipe::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none; opacity: 0;
  background: var(--line-l);
  transition: opacity 0.6s var(--ease, ease);
}
.section--black .reveal-wipe::before { background: var(--line-d); }
/* Fades in only once the wipe has started, so at rest it never doubles the frame border. */
.reveal-wipe.is-armed:not(.is-revealed)::before { opacity: min(1, calc(var(--rv, 1) * 25)); }
.reveal-wipe[data-reveal="ltr"]::before { top: 0; bottom: 0; width: 1px; left: calc(var(--rv, 1) * 100% - 1px); }
.reveal-wipe[data-reveal="ttb"]::before { left: 0; right: 0; height: 1px; top: calc(var(--rv, 1) * 100% - 1px); }
.reveal-wipe.is-revealed .reveal-after { clip-path: none; }

/* The "before" picture is a separate image; hide it once fully revealed. */
.reveal-wipe.is-revealed .reveal-before { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .reveal-wipe .reveal-after { clip-path: none !important; }
  .reveal-wipe::before { display: none; }
}