/* Shared entrance motion. Convention: plan/motion-convention.md.
   Hidden states apply only while <html> has .motion, which js/motion.js adds when JS runs, IntersectionObserver
   exists and the visitor has not asked for reduced motion. Without it every element stays visible.
   States: no class = hidden, .is-revealing = animating in, .is-revealed = handed back to the element's own CSS. */

.motion [data-reveal]:not(.is-revealing):not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
}
.motion [data-reveal="fade"]:not(.is-revealing):not(.is-revealed) { transform: none; }
/* fade-left starts offset to the right and travels left; fade-right travels right */
.motion [data-reveal="fade-left"]:not(.is-revealing):not(.is-revealed) { transform: translate3d(var(--reveal-distance), 0, 0); }
.motion [data-reveal="fade-right"]:not(.is-revealing):not(.is-revealed) { transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0); }
.motion [data-reveal="scale"]:not(.is-revealing):not(.is-revealed) { transform: scale(0.94); }
.motion [data-reveal="blur"]:not(.is-revealing):not(.is-revealed) { transform: translate3d(0, 12px, 0); filter: blur(8px); }
.motion [data-reveal="img"]:not(.is-revealing):not(.is-revealed) {
  transform: scale(1.06);
  clip-path: inset(8% 4% 8% 4% round var(--radius-lg));
}

.motion [data-reveal].is-revealing {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out),
    filter var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion [data-reveal="blur"].is-revealing { filter: blur(0); }
.motion [data-reveal="img"].is-revealing {
  clip-path: inset(0 0 0 0 round 0);
  transition:
    opacity calc(var(--dur-reveal) * 0.6) var(--ease-out),
    transform var(--dur-reveal-img) var(--ease-out),
    clip-path var(--dur-reveal-img) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

@media print {
  .motion [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}

/* Sideways reveals start offset; clip so they never widen the page (clip keeps position: sticky working) */
main { overflow-x: clip; }