/* -----------------------------------------
   Soulmix - Animaciones de entrada al hacer scroll
   Complementan el reveal palabra por palabra de los títulos
   (text-reveal.css) con gestos más contenidos para el resto de elementos.
   Todas se disparan añadiendo `is-revealed` desde el IntersectionObserver
   de main.js.
   ----------------------------------------- */

/*
 * Texto secundario (pretítulos y subtítulos): un fundido con un
 * desplazamiento corto hacia arriba. Deliberadamente más sutil que los
 * títulos: sin recorte por palabras ni cascada, para que acompañe al título
 * en vez de competir con él.
 */
.reveal-text {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal-text.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/*
 * Fotografías con marco (la de la sección `feature`): se descubren desde
 * abajo con una máscara mientras hacen un zoom-out muy leve, de forma que
 * el encuadre "se asienta" al entrar. clip-path en el contenedor y scale en
 * el <img>, así el zoom no arrastra el borde de la máscara.
 */
.reveal-media {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal-media.is-revealed {
	clip-path: inset(0 0 0 0);
}

.reveal-media img {
	transform: scale(1.12);
	transition: transform 1.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal-media.is-revealed img {
	transform: scale(1);
}

/*
 * Variante para imágenes SIN marco: PNG recortados de forma irregular, como
 * el bodegón 3D de la sección `about`, cuyo splash sobresale del rectángulo.
 *
 * Dos motivos para no usar `.reveal-media` en ellas:
 *  - La máscara rectangular corta el PNG por una recta que no corresponde a
 *    ningún borde visible, así que el "descubrir desde abajo" se ve como un
 *    recorte arbitrario en medio del splash.
 *  - Esas imágenes suelen llevar ya un transform propio de encuadre (la de
 *    `about` tiene `translateX(60px)` en about.css) que un `scale()` de
 *    aquí sobrescribiría, provocando un salto lateral al animarse.
 *
 * En su lugar: fundido con una subida corta, aplicado al CONTENEDOR, que no
 * tiene transform propio. Así el encuadre del <img> queda intacto.
 */
.reveal-float {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 1.1s ease, transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal-float.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/*
 * Cards en rejilla: suben con un fundido, escalonadas una tras otra. El
 * retardo lo aporta el índice que inyecta el JS, para que el orden siga al
 * del DOM sin escribir una regla :nth-child por card.
 */
.reveal-card {
	opacity: 0;
	transform: translateY(46px);
	transition: opacity 0.85s ease, transform 0.95s cubic-bezier(0.23, 1, 0.32, 1);
	transition-delay: calc(var(--reveal-index, 0) * 0.12s);
}

.reveal-card.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/*
 * Zoom-out de acompañamiento SOLO en las cards de producto del home, cuyo
 * `.product-card__media` recorta la foto contra su propio marco.
 *
 * No se aplica a `.fruta-card__media`: ahí la imagen está compuesta para
 * sobresalir por fuera del rectángulo de color (la fruta rebasa la card por
 * arriba), así que escalarla desplazaba y recortaba ese encuadre. Esas
 * cards se animan solo con el desplazamiento y el fundido de la card.
 */
.reveal-card .product-card__media img,
.reveal-card .receta-card__media img {
	transform: scale(1.14);
	transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1);
	transition-delay: calc(var(--reveal-index, 0) * 0.12s);
}

.reveal-card.is-revealed .product-card__media img,
.reveal-card.is-revealed .receta-card__media img {
	transform: scale(1);
}

/*
 * La foto de `.receta-card` ya tiene su propio zoom en hover (producto.css),
 * con una transición más corta. Una vez revelada se le devuelve esa
 * transición para que el hover siga respondiendo con su ritmo original en
 * lugar de heredar el 1.5s lento de la entrada.
 */
.reveal-card.is-revealed .receta-card__media img {
	transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
	transition-delay: 0s;
}

.reveal-card.is-revealed:hover .receta-card__media img {
	transform: scale(1.05);
}

/*
 * Sin animación para quien pide menos movimiento: todo visible y quieto.
 * Importante que sea el estado final y no el inicial, o el contenido se
 * quedaría invisible para esos usuarios.
 */
@media (prefers-reduced-motion: reduce) {
	.reveal-text,
	.reveal-card {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.reveal-media {
		clip-path: none;
		transition: none;
	}

	.reveal-media img,
	.reveal-card .product-card__media img {
		transform: none;
		transition: none;
	}

}