/* page-shell.css - global motion + utility classes for sub-pages.
 Loaded after colors_and_type.css. */

/* Cinematic scroll reveal - base */
.reveal {
 opacity: 0;
 transform: translateY(24px);
 transition:
 opacity 720ms cubic-bezier(0.2, 0.8, 0.15, 1),
 transform 720ms cubic-bezier(0.2, 0.8, 0.15, 1);
 will-change: opacity, transform;
}
.reveal.shown {
 opacity: 1;
 transform: translateY(0);
}

/* Stagger children - Reveal with stagger=true applies a per-child delay */
.reveal.staggered.shown > * {
 animation: revealUp 720ms cubic-bezier(0.2, 0.8, 0.15, 1) both;
}
.reveal.staggered.shown > *:nth-child(1) { animation-delay: 0ms; }
.reveal.staggered.shown > *:nth-child(2) { animation-delay: 80ms; }
.reveal.staggered.shown > *:nth-child(3) { animation-delay: 160ms; }
.reveal.staggered.shown > *:nth-child(4) { animation-delay: 240ms; }
.reveal.staggered.shown > *:nth-child(5) { animation-delay: 320ms; }
.reveal.staggered.shown > *:nth-child(6) { animation-delay: 400ms; }
.reveal.staggered.shown > *:nth-child(7) { animation-delay: 480ms; }
.reveal.staggered.shown > *:nth-child(8) { animation-delay: 560ms; }

@keyframes revealUp {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
}

/* Page enter - every page fades in on first paint */
@keyframes pageEnter {
 from { opacity: 0; }
 to { opacity: 1; }
}
body.page { animation: pageEnter 360ms ease both; }

/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
 .reveal, .reveal.staggered.shown > * {
 animation: none !important;
 opacity: 1 !important;
 transform: none !important;
 transition: none !important;
 }
 body.page { animation: none; }
 html { scroll-behavior: auto; }
}