/* Reveal targets stay visible by default; WAAPI supplies their temporary entry effect. */
.viewport-reveal {
  --viewport-reveal-x: 0px;
  --viewport-reveal-y: 28px;
  --viewport-reveal-hover-x: 0px;
  --viewport-reveal-hover-y: 0px;
  --viewport-reveal-tilt: 1.4deg;
  --viewport-reveal-scale: 0.988;
  --viewport-reveal-delay: 0ms;
  --viewport-reveal-origin: 50% 78%;

  opacity: 1;
  translate:
    calc(var(--viewport-reveal-x) + var(--viewport-reveal-hover-x))
    calc(var(--viewport-reveal-y) + var(--viewport-reveal-hover-y));
  rotate: x var(--viewport-reveal-tilt);
  scale: var(--viewport-reveal-scale);
  transform-origin: var(--viewport-reveal-origin);
  transition:
    translate 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    rotate 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    scale 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.viewport-reveal.is-visible {
  --viewport-reveal-x: 0px;
  --viewport-reveal-y: 0px;
  --viewport-reveal-tilt: 0deg;
  --viewport-reveal-scale: 1;
}

.viewport-reveal--content {
  --viewport-reveal-y: 18px;
  --viewport-reveal-tilt: 0.7deg;
  --viewport-reveal-scale: 0.996;
  --viewport-reveal-origin: 50% 84%;
}

.viewport-reveal--from-left {
  --viewport-reveal-x: -24px;
  --viewport-reveal-y: 18px;
  --viewport-reveal-origin: 72% 78%;
}

.viewport-reveal--from-right {
  --viewport-reveal-x: 24px;
  --viewport-reveal-y: 18px;
  --viewport-reveal-origin: 28% 78%;
}

/* After entry, restore the short card-lift timing without changing reveal timing. */
.viewport-reveal.viewport-reveal--settled {
  transition:
    translate 0.18s cubic-bezier(0.2, 0.7, 0.2, 1),
    rotate 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    scale 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .viewport-reveal,
  .viewport-reveal.is-visible {
    opacity: 1 !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    filter: none !important;
    transition: none !important;
  }
}