/* ============================================================
   Surface System v2 — motion
   One vocabulary: hover lift, press dip, reveal on scroll. Everything
   is opt-in via class or data attribute, and everything collapses to
   nothing under prefers-reduced-motion.
   ============================================================ */

/* ---------- Reveal on scroll -----------------------------------------
   Elements start hidden ONLY when JS has taken over (html.s-js), so a
   no-JS or slow-hydration visitor never sees blank sections. */

html.s-js [data-s-reveal] {
	opacity: 0;
	transform: translateY(14px);
	will-change: opacity, transform;
	transition:
		opacity var(--s-slow) var(--s-ease-out),
		transform var(--s-slow) var(--s-ease-out);
}
html.s-js [data-s-reveal].is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Stagger children of a revealed group. */
html.s-js [data-s-reveal="stagger"] > * {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity var(--s-slow) var(--s-ease-out),
		transform var(--s-slow) var(--s-ease-out);
	transition-delay: calc(var(--s-i, 0) * 55ms);
}
html.s-js [data-s-reveal="stagger"].is-in > * { opacity: 1; transform: none; }
html.s-js [data-s-reveal="stagger"] { opacity: 1; transform: none; }

/* ---------- Hover lift / press dip -------------------------------------- */

.s-lift { transition: transform var(--s-base) var(--s-ease), box-shadow var(--s-base) var(--s-ease); }
.s-lift:hover { transform: translateY(var(--s-lift)); box-shadow: var(--s-shadow-lifted); }
.s-press:active { transform: translateY(1px) scale(.99); }

/* ---------- Media zoom on hover ------------------------------------------ */

.s-zoom { overflow: hidden; }
.s-zoom img { transition: transform var(--s-slow) var(--s-ease); }
.s-zoom:hover img { transform: scale(1.05); }

/* ---------- Underline sweep for text links ------------------------------- */

.s-link {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--s-base) var(--s-ease);
}
.s-link:hover { background-size: 100% 1px; }

/* ---------- Fade / slide helpers ----------------------------------------- */

.s-fade-in { animation: s-fade var(--s-slow) var(--s-ease-out) both; }
@keyframes s-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Reduced motion: everything holds still ------------------------ */

@media (prefers-reduced-motion: reduce) {
	html.s-js [data-s-reveal],
	html.s-js [data-s-reveal="stagger"] > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.s-lift:hover,
	.s-zoom:hover img { transform: none; }
	.s-fade-in { animation: none; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}