/**
 * Onda Motion — Estados iniciales de presets
 *
 * Oculta los elementos antes de que GSAP los anime, para evitar el
 * "flash" del estado final visible un instante antes.
 *
 * GSAP agrega la clase .onda-loaded al elemento cuando toma control,
 * lo que neutraliza estos estados ocultos.
 */

/* === Animaciones de entrada — estados iniciales === */

.onda-fade-in:not(.onda-loaded) {
	opacity: 0;
}

.onda-fade-up:not(.onda-loaded) {
	opacity: 0;
	transform: translateY(40px);
}

.onda-fade-down:not(.onda-loaded) {
	opacity: 0;
	transform: translateY(-40px);
}

.onda-fade-left:not(.onda-loaded) {
	opacity: 0;
	transform: translateX(-40px);
}

.onda-fade-right:not(.onda-loaded) {
	opacity: 0;
	transform: translateX(40px);
}

.onda-zoom-in:not(.onda-loaded) {
	opacity: 0;
	transform: scale(0.8);
}

.onda-zoom-out:not(.onda-loaded) {
	opacity: 0;
	transform: scale(1.2);
}

.onda-blur-in:not(.onda-loaded) {
	opacity: 0;
	filter: blur(20px);
}

/* === Stagger en hijos — ocultar hijos hasta que se anime === */

.onda-stagger:not(.onda-loaded) > * {
	opacity: 0;
}

/* === Texto con Splitting === */

.onda-text-chars:not(.onda-loaded) .char,
.onda-text-words:not(.onda-loaded) .word,
.onda-text-lines:not(.onda-loaded) .line {
	opacity: 0;
}

.onda-text-reveal:not(.onda-loaded) {
	overflow: hidden;
}

.onda-text-reveal:not(.onda-loaded) .word {
	display: inline-block;
	transform: translateY(110%);
	opacity: 0;
}

/* === Pin necesita posición correcta === */

.onda-pin {
	will-change: transform;
}

/* === Scroll Sequence (canvas tipo Apple / scrollsequence) === */

.onda-sequence {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

/* El runtime envuelve la escena en un stage; que llene el contenedor. */
.onda-sequence .onda-seq__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.onda-sequence .onda-seq-canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* Modo estático (móvil / reduce-motion): un solo cuadro, sin pin. */
.onda-sequence.onda-seq--static {
	height: auto;
	min-height: 60vh;
}
.onda-sequence.onda-seq--static .onda-seq__stage {
	position: relative;
}

.onda-sequence .onda-seq-step {
	position: absolute;
	left: 50%;
	bottom: 12vh;
	transform: translateX(-50%);
	z-index: 2;
	max-width: 24ch;
	text-align: center;
	pointer-events: none;
}

/* Tipografía por defecto de los pasos (hereda el color del contenedor con
   currentColor; sobreescribila desde tu tema si querés otro estilo). */
.onda-sequence .onda-seq-step .k {
	display: block;
	font-weight: 800;
	font-size: clamp(2rem, 5vw, 3.6rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: currentColor;
}

.onda-sequence .onda-seq-step .s {
	display: block;
	margin-top: 0.5rem;
	font-size: 1.05rem;
	line-height: 1.5;
	opacity: 0.8;
}

/* === Accesibilidad — respetar prefers-reduced-motion siempre === */

@media (prefers-reduced-motion: reduce) {
	[class*="onda-"] {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}

/* === Estado: animaciones desactivadas en mobile === */

.onda-mobile-disabled [class*="onda-"] {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
}

/* === Estado: reduced motion forzado === */

.onda-reduced-motion [class*="onda-"] {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
}