/**
 * zejneba.com — Scroll reveal
 *
 * Anything with data-reveal fades in as it scrolls into view (js/reveal.js).
 * Elements that come into view together appear one after another.
 *
 *   data-reveal         rises up out of a soft blur (headings, text, cards)
 *   data-reveal="clip"  opens up from a smaller rounded frame (images, big cards)
 *   data-reveal="pop"   rises and grows slightly (tilted photos, polaroid)
 *
 * The <html> gets the "reveal" class from the inline script in <head>,
 * so nothing is hidden when JavaScript is off or motion is reduced.
 *
 * Only animations are used (never transitions), so the elements keep their
 * own hover transitions. The keyframes have no "to", so every element ends
 * exactly in its own style (tilted photos stay tilted).
 */

.reveal [data-reveal]:not(.is-revealed) {
  opacity: 0;
}

.reveal [data-reveal].is-revealed {
  animation: reveal-rise 1.1s var(--ease-out-expo) var(--reveal-delay, 0s) backwards;
}

.reveal [data-reveal="clip"].is-revealed {
  animation: reveal-clip 1.3s var(--ease-out-expo) var(--reveal-delay, 0s) backwards;
}

/* The image inside a clip reveal settles from a slight zoom */
.reveal [data-reveal="clip"].is-revealed > img {
  animation: reveal-zoom 1.6s var(--ease-out-expo) var(--reveal-delay, 0s) backwards;
}

.reveal [data-reveal="pop"].is-revealed {
  animation: reveal-pop 1.2s var(--ease-out-expo) var(--reveal-delay, 0s) backwards;
}

/* Already scrolled past on load (e.g. after a refresh): show without animating */
.reveal [data-reveal].is-revealed.is-instant,
.reveal [data-reveal].is-revealed.is-instant > img {
  animation: none;
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    translate: 0 40px;
    filter: blur(6px);
  }
}

@keyframes reveal-clip {
  from {
    opacity: 0;
    translate: 0 48px;
    clip-path: inset(6% 4% 6% 4% round var(--reveal-radius, 0px));
  }
  60% {
    opacity: 1;
  }
  to {
    clip-path: inset(0 round var(--reveal-radius, 0px));
  }
}

@keyframes reveal-zoom {
  from {
    scale: 1.12;
  }
}

@keyframes reveal-pop {
  from {
    opacity: 0;
    translate: 0 48px;
    scale: 0.9;
  }
}