/* Broad, staggered entrances; independent transforms preserve card hover. */
body { overflow-x: clip; }
.scroll-reveal,
.app-card.scroll-reveal,
.screen.scroll-reveal {
  --reveal-x: 0px;
  --reveal-y: 110px;
  --reveal-scale: 1;
  transition: opacity 1s ease var(--reveal-delay, 0ms),
    translate 1.25s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
    scale 1.25s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
    transform .25s, box-shadow .25s;
}
.scroll-reveal[data-motion="rise"] { --reveal-y: 140px; --reveal-scale: .9; }
.scroll-reveal[data-motion="left"] { --reveal-x: -100px; --reveal-y: 50px; }
.scroll-reveal[data-motion="right"] { --reveal-x: 100px; --reveal-y: 50px; }
.scroll-reveal.reveal-pending {
  opacity: 0;
  translate: var(--reveal-x) var(--reveal-y);
  scale: var(--reveal-scale);
}
.scroll-reveal.is-visible { opacity: 1; translate: 0 0; scale: 1; }
@media (max-width: 560px) {
  .scroll-reveal[data-motion="left"] { --reveal-x: -60px; }
  .scroll-reveal[data-motion="right"] { --reveal-x: 60px; }
  .scroll-reveal[data-motion="rise"] { --reveal-y: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal, .app-card.scroll-reveal, .screen.scroll-reveal {
    opacity: 1; translate: none; scale: none; transition: none;
  }
}