/* ================================================================
   animations.css — keyframes globales + utility classes reusables
   Cristal Atlántico · refined motion · honra prefers-reduced-motion
================================================================ */

/* ----------------------------------------------------------------
   KEYFRAMES — todas con `from` explícito para previsibilidad
---------------------------------------------------------------- */
@keyframes trx-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes trx-fade-up {
	from { opacity: 0; translate: 0 16px; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes trx-fade-down {
	from { opacity: 0; translate: 0 -16px; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes trx-fade-left {
	from { opacity: 0; translate: 20px 0; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes trx-fade-right {
	from { opacity: 0; translate: -20px 0; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes trx-scale-in {
	from { opacity: 0; scale: 0.94; }
	to   { opacity: 1; scale: 1; }
}

@keyframes trx-blur-in {
	from { opacity: 0; filter: blur(12px); }
	to   { opacity: 1; filter: blur(0); }
}

@keyframes trx-float {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -8px; }
}

@keyframes trx-pulse-ring {
	0%   { box-shadow: 0 0 0 0   color-mix(in oklch, var(--color-accent) 45%, transparent); }
	70%  { box-shadow: 0 0 0 14px color-mix(in oklch, var(--color-accent) 0%, transparent); }
	100% { box-shadow: 0 0 0 0   transparent; }
}

@keyframes trx-shimmer {
	from { background-position: -200% 0; }
	to   { background-position:  200% 0; }
}

@keyframes trx-aurora-drift {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(-2%, 1%, 0) scale(1.04); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes trx-rotate-slow {
	from { rotate: 0deg; }
	to   { rotate: 360deg; }
}

@keyframes trx-marquee {
	from { translate: 0 0; }
	to   { translate: -50% 0; }
}

@keyframes trx-caret {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* ----------------------------------------------------------------
   REVEAL — JS añade .is-revealed cuando el elemento entra en
   viewport (vía window.trxRehydrate / IntersectionObserver de main.js).
   Estado inicial = oculto; estado revelado = animado.
---------------------------------------------------------------- */
.reveal {
	opacity: 0;
	translate: 0 16px;
	transition:
		opacity var(--motion-slow, 420ms) var(--ease-out, cubic-bezier(.22,1,.36,1)),
		translate var(--motion-slow, 420ms) var(--ease-out, cubic-bezier(.22,1,.36,1)),
		filter var(--motion-slow, 420ms) var(--ease-out, cubic-bezier(.22,1,.36,1)),
		scale var(--motion-slow, 420ms) var(--ease-out, cubic-bezier(.22,1,.36,1));
	will-change: opacity, translate;
}
.reveal.is-revealed {
	opacity: 1;
	translate: 0 0;
}

/* Direcciones alternativas */
.reveal--up         { translate: 0 24px; }
.reveal--down       { translate: 0 -24px; }
.reveal--left       { translate: -24px 0; }
.reveal--right      { translate: 24px 0; }
.reveal--scale      { translate: 0 0; scale: 0.94; }
.reveal--scale.is-revealed { scale: 1; }
.reveal--blur       { filter: blur(10px); translate: 0 0; }
.reveal--blur.is-revealed  { filter: blur(0); }

/* ----------------------------------------------------------------
   STAGGER — delays incrementales para listas hijas.
   Aplicar al contenedor: <ul class="stagger"> con hijos <li class="reveal">
---------------------------------------------------------------- */
.stagger > .reveal { transition-delay: 0ms; }
.stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
.stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
.stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
.stagger > .reveal:nth-child(5) { transition-delay: 320ms; }
.stagger > .reveal:nth-child(6) { transition-delay: 400ms; }
.stagger > .reveal:nth-child(7) { transition-delay: 480ms; }
.stagger > .reveal:nth-child(8) { transition-delay: 560ms; }
.stagger > .reveal:nth-child(n+9) { transition-delay: 640ms; }

/* Versiones explícitas para uso inline (sin nth-child) */
.stagger-1 { transition-delay:   0ms; }
.stagger-2 { transition-delay:  80ms; }
.stagger-3 { transition-delay: 160ms; }
.stagger-4 { transition-delay: 240ms; }
.stagger-5 { transition-delay: 320ms; }
.stagger-6 { transition-delay: 400ms; }
.stagger-7 { transition-delay: 480ms; }
.stagger-8 { transition-delay: 560ms; }

/* ----------------------------------------------------------------
   ANIMATION UTILITIES — playback automático sin JS
---------------------------------------------------------------- */
.anim-fade-in   { animation: trx-fade-in   var(--motion-slow, 420ms) var(--ease-out) both; }
.anim-fade-up   { animation: trx-fade-up   var(--motion-slow, 420ms) var(--ease-out) both; }
.anim-fade-down { animation: trx-fade-down var(--motion-slow, 420ms) var(--ease-out) both; }
.anim-fade-left { animation: trx-fade-left var(--motion-slow, 420ms) var(--ease-out) both; }
.anim-fade-right{ animation: trx-fade-right var(--motion-slow, 420ms) var(--ease-out) both; }
.anim-scale-in  { animation: trx-scale-in  var(--motion-slow, 420ms) var(--ease-spring) both; }
.anim-blur-in   { animation: trx-blur-in   var(--motion-glacial, 720ms) var(--ease-out) both; }
.anim-float     { animation: trx-float 4s var(--ease-in-out) infinite; }
.anim-rotate    { animation: trx-rotate-slow 24s linear infinite; }
.anim-pulse-ring{ animation: trx-pulse-ring 2.4s var(--ease-out) infinite; }

/* ----------------------------------------------------------------
   SHIMMER — placeholder skeleton + scarcity ribbons
---------------------------------------------------------------- */
.anim-shimmer {
	background: linear-gradient(
		90deg,
		color-mix(in oklch, var(--color-surface-alt) 80%, transparent) 0%,
		color-mix(in oklch, var(--color-primary)     12%, var(--color-surface)) 50%,
		color-mix(in oklch, var(--color-surface-alt) 80%, transparent) 100%
	);
	background-size: 200% 100%;
	animation: trx-shimmer 1.6s linear infinite;
}

/* ----------------------------------------------------------------
   MARQUEE — strip horizontal (trust-bar logos / press)
   Hijo directo: .marquee__track con duplicación de items.
---------------------------------------------------------------- */
.marquee {
	overflow: hidden;
	mask-image: linear-gradient(90deg,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%);
}
.marquee__track {
	display: flex;
	gap: var(--space-8, 2rem);
	width: max-content;
	animation: trx-marquee 28s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ----------------------------------------------------------------
   FOCUS-RING animado (cards interactivas)
---------------------------------------------------------------- */
.focus-ring {
	position: relative;
	isolation: isolate;
}
.focus-ring::after {
	content: "";
	position: absolute; inset: -2px;
	border-radius: inherit;
	box-shadow: 0 0 0 0 transparent;
	transition: box-shadow var(--motion-base, 260ms) var(--ease-out);
	pointer-events: none;
	z-index: -1;
}
.focus-ring:hover::after,
.focus-ring:focus-visible::after {
	box-shadow:
		0 0 0 3px color-mix(in oklch, var(--color-primary) 28%, transparent),
		0 12px 30px -10px color-mix(in oklch, var(--color-primary) 35%, transparent);
}

/* ----------------------------------------------------------------
   CARET (cursor parpadeante para typewriter)
---------------------------------------------------------------- */
.caret {
	display: inline-block;
	inline-size: 0.08em;
	block-size: 0.95em;
	background: currentColor;
	margin-inline-start: 0.08em;
	vertical-align: -0.08em;
	animation: trx-caret 1s steps(1) infinite;
}

/* ----------------------------------------------------------------
   AURORA layer · animar gradients en el background
   Aplicar a un ::before / ::after dentro de la section.
---------------------------------------------------------------- */
.has-aurora { position: relative; isolation: isolate; }
.has-aurora::before {
	content: "";
	position: absolute; inset: 0;
	background: var(--bg-aurora);
	pointer-events: none;
	z-index: -1;
	animation: trx-aurora-drift 24s var(--ease-in-out) infinite alternate;
}

/* ----------------------------------------------------------------
   VIEW-TRANSITION named regions (opt-in por componente)
---------------------------------------------------------------- */
.vt-hero  { view-transition-name: trx-hero; }
.vt-mast  { view-transition-name: trx-mast; }
.vt-foot  { view-transition-name: trx-foot; }

@media not (prefers-reduced-motion: reduce) {
	::view-transition-old(trx-hero),
	::view-transition-new(trx-hero) {
		animation-duration: var(--motion-slow, 420ms);
		animation-timing-function: var(--ease-out);
	}
}

/* ----------------------------------------------------------------
   GLOBAL OPT-OUT · honra prefers-reduced-motion en cascada
   (style.css ya neutraliza animations; aquí reforzamos las clases
   utilitarias para que ningún playback automático persista).
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal--up,
	.reveal--down,
	.reveal--left,
	.reveal--right,
	.reveal--scale,
	.reveal--blur {
		opacity: 1 !important;
		translate: 0 0 !important;
		scale: 1 !important;
		filter: none !important;
		transition: none !important;
	}
	.anim-fade-in,
	.anim-fade-up,
	.anim-fade-down,
	.anim-fade-left,
	.anim-fade-right,
	.anim-scale-in,
	.anim-blur-in,
	.anim-float,
	.anim-rotate,
	.anim-pulse-ring,
	.anim-shimmer,
	.marquee__track,
	.has-aurora::before {
		animation: none !important;
	}
}