/* ==========================================================================
   animations.css — GPU-only motion (transform/opacity), all gated behind
   prefers-reduced-motion. Nothing here blocks rendering or shifts layout.
   ========================================================================== */

/* ---- Scroll reveal (toggled by main.js via IntersectionObserver) ---- */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
	will-change: opacity, transform;
}
.reveal.is-visible {
	opacity: 1;
	transform: none;
}
/* Stagger children of a grid slightly for a polished cascade */
.card-grid > li.reveal:nth-child(2) { transition-delay: 60ms; }
.card-grid > li.reveal:nth-child(3) { transition-delay: 120ms; }
.card-grid > li.reveal:nth-child(4) { transition-delay: 180ms; }
.card-grid > li.reveal:nth-child(5) { transition-delay: 120ms; }
.card-grid > li.reveal:nth-child(6) { transition-delay: 180ms; }

/* ---- Hero caustic light drift ---- */
@keyframes dbc-caustic-1 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(40px, 30px, 0) scale(1.12); }
}
@keyframes dbc-caustic-2 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
	50%      { transform: translate3d(-36px, -28px, 0) scale(0.95); }
}
.hero__caustic--1 { animation: dbc-caustic-1 14s ease-in-out infinite; }
.hero__caustic--2 { animation: dbc-caustic-2 18s ease-in-out infinite; }

/* ---- Rising bubbles ---- */
.bubbles { position: absolute; inset: 0; overflow: hidden; }
.bubble {
	position: absolute;
	bottom: -40px;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(34,211,238,0.25) 60%, transparent 70%);
	opacity: 0;
	animation: dbc-bubble linear infinite;
}
@keyframes dbc-bubble {
	0%   { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
	10%  { opacity: 0.7; }
	90%  { opacity: 0.5; }
	100% { transform: translateY(-90vh) translateX(20px) scale(1); opacity: 0; }
}
/* Spread the 12 bubbles across the width with varied size/speed/delay */
.bubble--1  { left: 6%;  width: 8px;  height: 8px;  animation-duration: 13s; animation-delay: 0s; }
.bubble--2  { left: 14%; width: 14px; height: 14px; animation-duration: 17s; animation-delay: 2s; }
.bubble--3  { left: 22%; width: 6px;  height: 6px;  animation-duration: 11s; animation-delay: 4s; }
.bubble--4  { left: 31%; width: 11px; height: 11px; animation-duration: 16s; animation-delay: 1s; }
.bubble--5  { left: 39%; width: 9px;  height: 9px;  animation-duration: 14s; animation-delay: 6s; }
.bubble--6  { left: 48%; width: 16px; height: 16px; animation-duration: 19s; animation-delay: 3s; }
.bubble--7  { left: 57%; width: 7px;  height: 7px;  animation-duration: 12s; animation-delay: 5s; }
.bubble--8  { left: 65%; width: 12px; height: 12px; animation-duration: 18s; animation-delay: 1.5s; }
.bubble--9  { left: 73%; width: 9px;  height: 9px;  animation-duration: 15s; animation-delay: 7s; }
.bubble--10 { left: 82%; width: 13px; height: 13px; animation-duration: 20s; animation-delay: 2.5s; }
.bubble--11 { left: 90%; width: 6px;  height: 6px;  animation-duration: 12s; animation-delay: 4.5s; }
.bubble--12 { left: 96%; width: 10px; height: 10px; animation-duration: 16s; animation-delay: 0.5s; }

/* ==========================================================================
   Reduced motion: respect the user's OS setting. Everything resolves to its
   final, static state — no drift, no bubbles, no reveal transitions.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.reveal { opacity: 1; transform: none; }
	.bubbles, .hero__caustic { display: none; }
}