/**
 * Animaciones de entrada — Home (sección 1 BLOQUEADOR + sección 2 PROTECCIÓN)
 *
 * Sección 1 (.oz-pb-r-0): imagen "BLOQUEADOR" entra de abajo hacia arriba.
 *   - El bloque tiene position:absolute y clase .imagen-flotante-suave (anim
 *     infinita propia del tema). Animamos su .oz-pb-image (la figura interna)
 *     para no pisar el transform del wrapper.
 *
 * Sección 2 (.oz-pb-r-1):
 *   - Imagen de productos: entra de abajo hacia arriba.
 *   - Título h2 (.sugar-text-block h2): efecto typewriter (lo dispara el JS).
 *   - Botón y subtítulo: fade-up suave detrás del typewriter.
 */

/* ===========================================================
   SECCIÓN 1 — Imagen "BLOQUEADOR" (de abajo hacia arriba)
   =========================================================== */
body.home .oz-pb-r-0 .oz-pb-block--image .oz-pb-image {
	opacity: 0;
	transform: translate3d(0, 80px, 0);
	transition:
		opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
		transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
	will-change: opacity, transform;
}
body.home.ss-hero-played .oz-pb-r-0 .oz-pb-block--image .oz-pb-image {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* ===========================================================
   SECCIÓN 2 — Imagen de productos (de abajo hacia arriba)
   =========================================================== */
body.home .oz-pb-r-1 .oz-pb-r-1-c-1 .oz-pb-block--image .oz-pb-image {
	opacity: 0;
	transform: translate3d(0, 100px, 0);
	transition:
		opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s,
		transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
	will-change: opacity, transform;
}
body.home.ss-hero-played .oz-pb-r-1 .oz-pb-r-1-c-1 .oz-pb-block--image .oz-pb-image {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* Iconos rotantes a la derecha — fade-in con stagger */
body.home .oz-pb-r-1 .oz-pb-r-1-c-2 .oz-pb-block--image {
	opacity: 0;
	transition: opacity 0.7s ease;
}
body.home.ss-hero-played .oz-pb-r-1 .oz-pb-r-1-c-2 .oz-pb-block--image:nth-child(1) { opacity: 1; transition-delay: 1.1s; }
body.home.ss-hero-played .oz-pb-r-1 .oz-pb-r-1-c-2 .oz-pb-block--image:nth-child(2) { opacity: 1; transition-delay: 1.3s; }
body.home.ss-hero-played .oz-pb-r-1 .oz-pb-r-1-c-2 .oz-pb-block--image:nth-child(3) { opacity: 1; transition-delay: 1.5s; }

/* ===========================================================
   SECCIÓN 2 — Texto: typewriter (h2) + fade párrafo y botón
   =========================================================== */
body.home .oz-pb-r-1 .sugar-text-block h2.ss-typewriter {
	display: inline-block;
	overflow: hidden;
	white-space: pre-wrap;
	word-break: keep-all;
}

/* Cada letra arranca invisible; el JS las va marcando visibles. */
body.home .oz-pb-r-1 .sugar-text-block h2.ss-typewriter .ss-char {
	opacity: 0;
	display: inline-block;
	white-space: pre;
}
body.home .oz-pb-r-1 .sugar-text-block h2.ss-typewriter .ss-char.is-typed {
	opacity: 1;
}

/* Cursor parpadeante mientras escribe */
body.home .oz-pb-r-1 .sugar-text-block h2.ss-typewriter .ss-caret {
	display: inline-block;
	width: 4px;
	height: 0.85em;
	background: currentColor;
	margin-left: 4px;
	vertical-align: -0.08em;
	animation: ssCaretBlink 0.85s steps(2) infinite;
}
body.home .oz-pb-r-1 .sugar-text-block h2.ss-typewriter.is-typed .ss-caret {
	display: none;
}

@keyframes ssCaretBlink {
	0%, 50%   { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}

/* Párrafo y botón: aparecen después del título */
body.home .oz-pb-r-1 .sugar-text-block p,
body.home .oz-pb-r-1 .sugar-text-block .sugar-btn {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
body.home.ss-hero-played .oz-pb-r-1 .sugar-text-block p {
	opacity: 1;
	transform: none;
	transition-delay: 1.6s;
}
body.home.ss-hero-played .oz-pb-r-1 .sugar-text-block .sugar-btn {
	opacity: 1;
	transform: none;
	transition-delay: 1.8s;
}

/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce) {
	body.home .oz-pb-r-0 .oz-pb-block--image .oz-pb-image,
	body.home .oz-pb-r-1 .oz-pb-r-1-c-1 .oz-pb-block--image .oz-pb-image,
	body.home .oz-pb-r-1 .oz-pb-r-1-c-2 .oz-pb-block--image,
	body.home .oz-pb-r-1 .sugar-text-block p,
	body.home .oz-pb-r-1 .sugar-text-block .sugar-btn {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	body.home .oz-pb-r-1 .sugar-text-block h2.ss-typewriter .ss-char {
		opacity: 1 !important;
	}
	body.home .oz-pb-r-1 .sugar-text-block h2.ss-typewriter .ss-caret {
		display: none !important;
	}
}