/*
 * Animaciones de entrada de los bloques (js/animations.js).
 *
 * 1. "Aparecer suavemente (fade up)", opción del campo field_animation_type.
 * 2. Entrada por defecto (.usfq-entrance) para toda sección sin animación
 *    elegida en ese campo. La clase la pone el JS solo a las secciones que al
 *    cargar están por debajo de la pantalla, así que sin JS no existe ningún
 *    estado oculto y lo visible al cargar nunca se esconde.
 *
 * Las dos son nativas, sin ScrollReveal, con un IntersectionObserver. El
 * estado oculto del fade up solo existe bajo html.usfq-fade-up-js, que pone
 * js/animations-init.js desde el <head>; sin JS o si el script falla, el
 * bloque se ve tal cual.
 *
 * La transición va en el estado visible y no en el oculto: así ocultar es
 * instantáneo (sin parpadeo al cargar) y solo se anima la entrada. Se retira
 * con .is-done para no pisar las transiciones propias de las tarjetas (hover).
 */

:root {
  --usfq-fade-up-distance: 24px;
  --usfq-fade-up-duration: 600ms;
  /* Un bloque entero se percibe menos que una rejilla escalonada: entra un
     poco mas fuerte (pedido de Cesar, 25 sep 2026). */
  --usfq-fade-up-distance-block: 32px;
  --usfq-fade-up-duration-block: 700ms;
  --usfq-fade-up-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --usfq-fade-up-stagger: 80ms;
  --usfq-entrance-distance: 24px;
  --usfq-entrance-duration: 600ms;
}

html.usfq-fade-up-js .animate-fade-up:not(.is-visible):not(.animate-fade-up--stagger) {
  opacity: 0;
  transform: translateY(var(--usfq-fade-up-distance-block));
}

html.usfq-fade-up-js .animate-fade-up--stagger:not(.is-visible) .animate-fade-up__item {
  opacity: 0;
  transform: translateY(var(--usfq-fade-up-distance));
}

html.usfq-fade-up-js .animate-fade-up.is-visible:not(.is-done):not(.animate-fade-up--stagger) {
  transition:
    opacity var(--usfq-fade-up-duration-block) var(--usfq-fade-up-easing),
    transform var(--usfq-fade-up-duration-block) var(--usfq-fade-up-easing);
}

html.usfq-fade-up-js .animate-fade-up.is-visible:not(.is-done) .animate-fade-up__item {
  transition:
    opacity var(--usfq-fade-up-duration) var(--usfq-fade-up-easing),
    transform var(--usfq-fade-up-duration) var(--usfq-fade-up-easing);
}

/* Solo hay escalonado dentro de una rejilla de tarjetas; el JS pone el índice (0..3). */
html.usfq-fade-up-js .animate-fade-up.is-visible:not(.is-done) .animate-fade-up__item {
  transition-delay: calc(var(--usfq-fade-up-index, 0) * var(--usfq-fade-up-stagger));
}

/*
 * Varias plantillas repiten la clase en el organismo de dentro (basic,
 * double_basic...): solo anima el envoltorio del bloque, o el interior sumaría
 * otros 24px.
 */
html.usfq-fade-up-js .animate-fade-up .animate-fade-up:not(.animate-fade-up__item),
html.usfq-fade-up-js #layout-builder .animate-fade-up,
html.usfq-fade-up-js #layout-builder .animate-fade-up .animate-fade-up__item {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Entrada por defecto. Mismo escalonado que el fade up (índice 0..3). */
.usfq-entrance:not(.is-visible):not(.usfq-entrance--stagger),
.usfq-entrance.usfq-entrance--stagger:not(.is-visible) .usfq-entrance__item {
  opacity: 0;
  transform: translateY(var(--usfq-entrance-distance));
}

.usfq-entrance.is-visible:not(.is-done):not(.usfq-entrance--stagger),
.usfq-entrance.is-visible:not(.is-done) .usfq-entrance__item {
  transition:
    opacity var(--usfq-entrance-duration) var(--usfq-fade-up-easing),
    transform var(--usfq-entrance-duration) var(--usfq-fade-up-easing);
}

.usfq-entrance.is-visible:not(.is-done) .usfq-entrance__item {
  transition-delay: calc(var(--usfq-fade-up-index, 0) * var(--usfq-fade-up-stagger));
}

#layout-builder .usfq-entrance,
#layout-builder .usfq-entrance .usfq-entrance__item {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Al imprimir, lo que aún no ha entrado en pantalla saldría en blanco. */
@media (prefers-reduced-motion: reduce), print {
  html.usfq-fade-up-js .animate-fade-up,
  html.usfq-fade-up-js .animate-fade-up .animate-fade-up__item,
  .usfq-entrance,
  .usfq-entrance .usfq-entrance__item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}