/* ==========================================================================
   ANIMATIONS  -  entrance reveals + ambient motion
   --------------------------------------------------------------------------
   The whole system is opt-in: an element animates only if it carries
   [data-reveal]. Nothing animates until the .js class is present, so a visitor
   without JavaScript sees the finished page rather than a blank one.

   Only opacity and transform are animated - both are compositor-only, so the
   scroll stays smooth on mid-range phones.
   ========================================================================== */

.js [data-reveal] {
	opacity: 0;
	transform: translate3d(0, var(--reveal-distance), 0);
	transition:
		opacity var(--reveal-duration) var(--ease-out),
		transform var(--reveal-duration) var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

.js [data-reveal].is-revealed {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	will-change: auto;
}

/* Directional variants ---------------------------------------------------- */

.js [data-reveal='left'] {
	transform: translate3d(calc(var(--reveal-distance) * -1.4), 0, 0);
}

.js [data-reveal='right'] {
	transform: translate3d(calc(var(--reveal-distance) * 1.4), 0, 0);
}

.js [data-reveal='fade'] {
	transform: none;
}

/* Images settle in from a hair under full size - the "soft scale" of the
   reference designs, never a zoom. */
.js [data-reveal='scale'] {
	transform: scale(0.98);
}

.js [data-reveal='scale'].is-revealed {
	transform: scale(1);
}

/* Stagger ------------------------------------------------------------------
   A parent marked [data-reveal-group] has --reveal-delay written onto each
   child by animations.js, so card rows resolve in sequence.
   -------------------------------------------------------------------------- */

[data-reveal-group] > * {
	--reveal-delay: calc(var(--reveal-index, 0) * var(--reveal-stagger));
}

/* Ambient ----------------------------------------------------------------- */

@keyframes scroll-hint {
	0%   { transform: translateY(0);    opacity: 1; }
	60%  { transform: translateY(10px); opacity: 0.2; }
	100% { transform: translateY(0);    opacity: 1; }
}

@keyframes gold-sweep {
	from { background-position: 0% 50%; }
	to   { background-position: 200% 50%; }
}

/* ==========================================================================
   Reduced motion
   The page must remain complete and usable - reveals resolve instantly,
   ambient loops stop, smooth scrolling becomes an immediate jump.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.js [data-reveal],
	.js [data-reveal].is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
		will-change: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}