/**
 * Movimiento discreto: revelado al hacer scroll (fade + 12 px).
 * Solo oculta si hay JS (.cec-js) y respeta prefers-reduced-motion.
 * Uso: clase `cec-reveal` en un bloque; `cec-reveal-group` escalona sus hijos.
 */

/* Oculto hasta entrar en pantalla */
.cec-js .cec-reveal:not(.is-visible),
.cec-js .cec-reveal-group:not(.is-visible) > * {
	opacity: 0;
	transform: translateY(12px);
}

/* Transición de entrada solo mientras dura; al terminar, reveal.js pone `is-revealed` y cada
   elemento recupera sus propias transiciones (hover de tarjetas fluido, sin salto ni retraso).
   Mientras entra, translate y box-shadow (hover de las tarjetas) ya se animan, sin retraso. */
.cec-js .cec-reveal.is-visible:not(.is-revealed),
.cec-js .cec-reveal-group.is-visible:not(.is-revealed) > * {
	transition: opacity 1.3s var(--cec-ease), transform 1.3s var(--cec-ease), translate .35s var(--cec-ease), box-shadow .35s ease;
}

.cec-js .cec-reveal-group.is-visible:not(.is-revealed) > :nth-child(2) { transition-delay: .15s, .15s, 0s, 0s; }
.cec-js .cec-reveal-group.is-visible:not(.is-revealed) > :nth-child(3) { transition-delay: .3s, .3s, 0s, 0s; }
.cec-js .cec-reveal-group.is-visible:not(.is-revealed) > :nth-child(4) { transition-delay: .45s, .45s, 0s, 0s; }
.cec-js .cec-reveal-group.is-visible:not(.is-revealed) > :nth-child(5) { transition-delay: .6s, .6s, 0s, 0s; }
.cec-js .cec-reveal-group.is-visible:not(.is-revealed) > :nth-child(n+6) { transition-delay: .75s, .75s, 0s, 0s; }

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.cec-js .cec-reveal,
	.cec-js .cec-reveal-group > * {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.cec-wa-float::after {
		animation: none;
		display: none;
	}

	.cec-nav .wp-block-navigation-item__content:not(.wp-block-navigation__submenu-container *),
	.cec-nav .wp-block-navigation-item__content:not(.wp-block-navigation__submenu-container *)::before,
	.cec-nav .wp-block-navigation-item__content:not(.wp-block-navigation__submenu-container *)::after,
	.is-style-card,
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}

	.is-style-card:hover,
	.wp-element-button:hover {
		transform: none;
	}
}

/* Lugares de acción pastoral: entrada más lenta y espaciada (pedido del usuario) */
.cec-js .cec-lugares__lista.is-visible:not(.is-revealed) > * {
	transition-duration: 2s, 2s, .35s, .35s;
}

.cec-js .cec-lugares__lista.is-visible:not(.is-revealed) > :nth-child(2) { transition-delay: .3s, .3s, 0s, 0s; }
.cec-js .cec-lugares__lista.is-visible:not(.is-revealed) > :nth-child(3) { transition-delay: .6s, .6s, 0s, 0s; }
.cec-js .cec-lugares__lista.is-visible:not(.is-revealed) > :nth-child(4) { transition-delay: .9s, .9s, 0s, 0s; }
.cec-js .cec-lugares__lista.is-visible:not(.is-revealed) > :nth-child(n+5) { transition-delay: 1.2s, 1.2s, 0s, 0s; }

/* Lugares: la foto de cada tarjeta se revela con la misma máscara que la foto del hero
   (sube desde abajo mientras se acomoda de 1.06 a 1), acompasada con la entrada de su tarjeta. */
.cec-js .cec-lugares__lista.is-visible .cec-lugar-card__img {
	animation: cec-lugar-mascara 1.8s var(--cec-ease) .2s backwards;
}

.cec-js .cec-lugares__lista.is-visible > :nth-child(2) .cec-lugar-card__img { animation-delay: .5s; }
.cec-js .cec-lugares__lista.is-visible > :nth-child(3) .cec-lugar-card__img { animation-delay: .8s; }
.cec-js .cec-lugares__lista.is-visible > :nth-child(4) .cec-lugar-card__img { animation-delay: 1.1s; }
.cec-js .cec-lugares__lista.is-visible > :nth-child(n+5) .cec-lugar-card__img { animation-delay: 1.4s; }

@keyframes cec-lugar-mascara {
	from { clip-path: inset(100% 0 0 0); transform: scale(1.06); }
	to { clip-path: inset(0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cec-js .cec-lugares__lista.is-visible .cec-lugar-card__img {
		animation: none;
	}
}

/* Blog: la foto destacada se revela con la misma máscara que el hero y las fotos de Lugares */
.cec-js .cec-blog__main.is-visible .cec-blog__main-img {
	animation: cec-lugar-mascara 1.8s var(--cec-ease) .15s backwards;
}

@media (prefers-reduced-motion: reduce) {
	.cec-js .cec-blog__main.is-visible .cec-blog__main-img {
		animation: none;
	}
}

/* Entrada del fondo de las portadas oscuras (la primera sección de cada página: hero de Inicio,
   cabeceras de página y fichas). Antes el fondo era idéntico entre páginas y al navegar parecía que
   no cambiaba nada (pedido del usuario). Un velo navy se retira de arriba hacia abajo, la luz
   «candle» se enciende y la textura del patrón aparece con un leve desplazamiento. */
.cec-js .cec-sections > .cec-dark:first-child {
	position: relative;
	isolation: isolate;
}

.cec-js .cec-sections > .cec-dark:first-child::after {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--cec-header-h)) 0 0; /* también la franja de la cabecera (borde superior) */
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, var(--cec-navy-deep) 0%, var(--cec-navy-deep) 60%, transparent 100%) 0 0 / 100% 200% no-repeat;
	animation: cec-fondo-velo 1.3s var(--cec-ease) .05s both;
}

@keyframes cec-fondo-velo {
	from { background-position: 0 0; opacity: 1; }
	to { background-position: 0 100%; opacity: 0; }
}

.cec-js .cec-sections > .cec-dark.cec-texture:first-child::before {
	animation: cec-fondo-textura 2.2s var(--cec-ease) .2s both;
}

@keyframes cec-fondo-textura {
	from { opacity: 0; transform: translateY(-24px); }
	to { opacity: .05; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cec-js .cec-sections > .cec-dark:first-child::after {
		display: none;
	}

	.cec-js .cec-sections > .cec-dark.cec-texture:first-child::before {
		animation: none;
	}
}

/* Textos de las cabeceras de página: suben escalonados con la entrada del fondo */
.cec-js .cec-sections > .cec-page-head:first-child .cec-page-head__inner > * {
	animation: cec-ficha-rise .9s var(--cec-ease) backwards;
}

.cec-js .cec-sections > .cec-page-head:first-child .cec-page-head__inner > :nth-child(1) { animation-delay: .15s; }
.cec-js .cec-sections > .cec-page-head:first-child .cec-page-head__inner > :nth-child(2) { animation-delay: .25s; }
.cec-js .cec-sections > .cec-page-head:first-child .cec-page-head__inner > :nth-child(3) { animation-delay: .35s; }
.cec-js .cec-sections > .cec-page-head:first-child .cec-page-head__inner > :nth-child(4) { animation-delay: .45s; }
.cec-js .cec-sections > .cec-page-head:first-child .cec-page-head__inner > :nth-child(n+5) { animation-delay: .55s; }

@media (prefers-reduced-motion: reduce) {
	.cec-js .cec-sections > .cec-page-head:first-child .cec-page-head__inner > * {
		animation: none;
	}
}

/* Entrada de la cabecera en cada página (pedido del usuario): baja desde arriba y, ya en su sitio,
   el logo, el menú y «Escríbenos» aparecen escalonados. `backwards` (no `both`): al terminar no
   queda transform en el elemento fijo, así el menú móvil a pantalla completa sigue funcionando. */
.cec-js .cec-site-header {
	animation: cec-cabecera-baja .8s var(--cec-ease) backwards;
}

@keyframes cec-cabecera-baja {
	from { transform: translateY(-100%); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.cec-js .cec-header__inner > * {
	animation: cec-cabecera-item .7s var(--cec-ease) backwards;
}

.cec-js .cec-header__inner > :nth-child(1) { animation-delay: .3s; }
.cec-js .cec-header__inner > :nth-child(2) { animation-delay: .42s; }
.cec-js .cec-header__inner > :nth-child(3) { animation-delay: .54s; }

@keyframes cec-cabecera-item {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cec-js .cec-site-header,
	.cec-js .cec-header__inner > * {
		animation: none;
	}
}