/**
 * 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: 1; /* visible para el LCP; el movimiento lo da el transform */
	transform: translate3d(0, 80px, 0);
	transition:
		opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
	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: 1; /* visible para el LCP; el movimiento lo da el transform */
	transform: translate3d(0, 100px, 0);
	transition:
		opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
	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: 1; /* visible para el LCP */
	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.
   `display:inline-block` convierte cada letra en una caja independiente, así que
   el navegador puede cortar la línea ENTRE letras y parte las palabras a la mitad
   ("PROTECCIÓN QU / E TRABAJA CONTI / GO"). Con `word-break: keep-all` sobre el h2
   no alcanza: hay que impedir el salto de línea alrededor de cada letra. */
body.home .oz-pb-r-1 .sugar-text-block h2.ss-typewriter .ss-char {
	opacity: 0;
	display: inline-block;
	white-space: pre;
	/* Ninguna letra puede quedar sola al final de la línea. El único punto de corte
	   válido pasa a ser el espacio entre palabras. */
	word-break: keep-all;
	overflow-wrap: normal;
	hyphens: none;
}

/* Las letras que forman una misma palabra viajan juntas: si la palabra no entra,
   salta ENTERA a la línea siguiente en vez de partirse. */
body.home .oz-pb-r-1 .sugar-text-block h2.ss-typewriter .ss-word {
	display: inline-block;
	white-space: nowrap;
}
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: 1; /* visible para el LCP; el movimiento lo da el transform */
	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: 0.3s;
}
body.home.ss-hero-played .oz-pb-r-1 .sugar-text-block .sugar-btn {
	opacity: 1;
	transform: none;
	transition-delay: 0.4s;
}

/* 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;
	}
}