/*
 * ══════════════════════════════════════════════════════
 *  ANIMACIONES — Golbano Propiedades
 *  Sistema scroll-triggered via IntersectionObserver.
 *  El CSS solo define estados y transiciones;
 *  el JS (animations.js) añade las clases al detectar viewport.
 * ══════════════════════════════════════════════════════
 */

/* ── Variables ────────────────────────────────────────────────────── */
:root {
	--gb-anim-dur:   0.9s;
	--gb-anim-ease:  cubic-bezier(0.4, 0, 0.2, 1);
	--gb-anim-dist:  28px;
}

/* ══════════════════════════════════════════════════════════════════
   PISTA A — Elementos above-the-fold (visibles al cargar la página)
   Usa CSS animation con delay base para evitar el "corte"
   El delay base da tiempo al browser antes de comenzar la entrada
   ══════════════════════════════════════════════════════════════════ */

@keyframes gbFadeUp {
	from { opacity: 0; transform: translateY(var(--gb-anim-dist)); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes gbFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes gbScaleIn {
	from { opacity: 0; transform: scale(0.9); }
	to   { opacity: 1; transform: scale(1); }
}

/* Clase aplicada por JS a elementos en viewport al cargar */
.gb-js .gb-enter {
	animation: gbFadeUp var(--gb-anim-dur) var(--gb-anim-ease) both;
}

.gb-js .gb-enter--fade {
	animation: gbFadeIn var(--gb-anim-dur) var(--gb-anim-ease) both;
}

.gb-js .gb-enter--scale {
	animation: gbScaleIn var(--gb-anim-dur) var(--gb-anim-ease) both;
}

/* ══════════════════════════════════════════════════════════════════
   PISTA B — Elementos below-the-fold (entran al hacer scroll)
   Usa transition + IntersectionObserver — sin riesgo de flash
   porque los elementos están fuera del viewport cuando se ocultan
   ══════════════════════════════════════════════════════════════════ */

.gb-js .gb-anim {
	transition:
		opacity   var(--gb-anim-dur) var(--gb-anim-ease),
		transform var(--gb-anim-dur) var(--gb-anim-ease);
	will-change: opacity, transform;
}

.gb-js .gb-anim.gb-anim--up    { opacity: 0; transform: translateY(var(--gb-anim-dist)); }
.gb-js .gb-anim.gb-anim--scale { opacity: 0; transform: scale(0.9); }
.gb-js .gb-anim.gb-anim--fade  { opacity: 0; }

.gb-js .gb-anim.gb-in {
	opacity: 1;
	transform: none !important;
}

/* ── Prefers reduced motion — desactiva ambas pistas ─────────────── */
@media (prefers-reduced-motion: reduce) {
	.gb-js .gb-enter,
	.gb-js .gb-enter--fade,
	.gb-js .gb-enter--scale { animation: none !important; opacity: 1 !important; transform: none !important; }

	.gb-js .gb-anim,
	.gb-js .gb-anim.gb-anim--up,
	.gb-js .gb-anim.gb-anim--scale,
	.gb-js .gb-anim.gb-anim--fade { opacity: 1 !important; transform: none !important; transition: none !important; }
}