/* Animaciones inspiradas en 21st.dev, convertidas a CSS sin librerías (agente UX/UI).
 *
 * Reglas de la casa (el dueño se quejó de que la página "salta"):
 * - Solo se animan transform / translate / scale / opacity / filter / background-position.
 *   Nada cambia de tamaño ni empuja contenido.
 * - Sin JS todo se ve normal: las clases bibm-* las pone motion.js.
 * - Con "reducir movimiento" no hay nada (motion.js sale antes y aquí todo
 *   va dentro de prefers-reduced-motion: no-preference).
 * - Efectos de mouse solo en equipos con mouse real (hover: hover).
 *
 * Inspiración (código leído en 21st.dev y reescrito a mano):
 *  1. Blur Reveal  — 21st.dev/@tom_ui/components/blur-reveal
 *  2. Tilt Card    — 21st.dev/@tom_ui/components/tilt-card
 *  3. Spotlight    — 21st.dev/@ibelick/components/spotlight/border-only
 *  4. Magnetic     — 21st.dev/@ibelick/components/magnetic
 *  5. Gradient Shimmer Text — 21st.dev/@zanwei/components/gradient-shimmer
 *  6. Scroll Reveal Image   — 21st.dev/@unlumen/components/scroll-reveal-image
 */

@media (prefers-reduced-motion: no-preference) {

	/* ---------- 1. Títulos: pasan de borrosos a nítidos, palabra por palabra ----------
	   Se apoya en la aparición que ya hace animations.js (.bib-reveal → .is-in):
	   mientras el título espera está desenfocado; al entrar se enfoca y sus
	   palabras se encienden una tras otra. Termina en ≤ 0,6 s.
	   El desenfoque va en el título entero (bloque) y las palabras solo cambian
	   de opacidad en línea: probado que así Chrome no mide ningún desplazamiento. */
	.bibm-w {
		transition: opacity .4s ease-out var(--bibm-d, 0ms);
	}
	html.bib-anim .bib-reveal:not(.is-in) .bibm-w {
		opacity: .15;
		transition: none;
	}
	html.bib-anim h2.bib-reveal:not(.is-in) { filter: blur(8px); }
	html.bib-anim h2.bib-reveal.is-in {
		transition: opacity .45s ease-out var(--bib-delay, 0ms), filter .5s ease-out var(--bib-delay, 0ms);
	}

	/* ---------- 6. Fotos que "se asientan" al aparecer ----------
	   La foto llega un poco ampliada dentro de su marco (que ya recorta) y
	   vuelve a su tamaño. Usa la propiedad scale, así no pisa el zoom de
	   hover que ya tienen las tarjetas (transform). */
	.bibm-zoom { scale: 1.07; }
	.bibm-zoom.bibm-zoom-in {
		scale: 1;
		transition: scale .6s cubic-bezier(.2, .7, .2, 1), transform .7s var(--bib-ease, ease);
	}

	/* ---------- 5. Destello dorado que cruza las etiquetas pequeñas ---------- */
	.bibm-shine {
		background-image: linear-gradient(105deg, currentColor 0 42%, #F3DDAE 47%, #D4A960 50%, #F3DDAE 53%, currentColor 58% 100%);
		background-size: 300% 100%;
		background-position: 100% 0;
		background-repeat: no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: bibm-shine 1.1s cubic-bezier(.45, 0, .55, 1) both;
	}
	@keyframes bibm-shine {
		from { background-position: 100% 0; }
		to { background-position: 0 0; }
	}
}

/* ---------- Efectos de mouse (solo con mouse real) ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {

	/* ---------- 3. Luz dorada que sigue al cursor sobre las fotos ----------
	   Es un <span> propio dentro del marco (photos.css usa ::before/::after
	   de esos elementos; aquí no se tocan). */
	.bibm-rel { position: relative; }
	.bibm-glow {
		position: absolute;
		inset: 0;
		pointer-events: none;
		border-radius: inherit;
		opacity: 0;
		transition: opacity .35s ease;
		background: radial-gradient(240px circle at var(--bibm-x, 50%) var(--bibm-y, 50%), rgba(212, 169, 96, .34), rgba(212, 169, 96, .1) 45%, transparent 72%);
	}
	.bibm-on .bibm-glow { opacity: 1; }

	/* ---------- 2. Inclinación 3D suave de las tarjetas ---------- */
	.bibm-tilt { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
	.bibm-tilt.bibm-on {
		transform: perspective(900px) rotateX(var(--bibm-rx, 0deg)) rotateY(var(--bibm-ry, 0deg));
		transition-duration: .2s;
	}

	/* La línea dorada de marca de cada producto brilla al pasar el mouse. */
	.bib-pcard:hover .bib-pcard__line {
		background-image: linear-gradient(105deg, currentColor 0 42%, #FFF3D6 50%, currentColor 58% 100%);
		background-size: 300% 100%;
		background-repeat: no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: bibm-shine .9s cubic-bezier(.45, 0, .55, 1) both;
	}
}

/* Al imprimir, nada de efectos. */
@media print {
	.bibm-glow { display: none; }
	.bibm-zoom { scale: none; }
	.bibm-shine { -webkit-text-fill-color: currentColor; background: none; }
}