/* ============================================================================
   ESTRUCTURA DE IMAGEN
   ----------------------------------------------------------------------------
   Aquí ya NO hay animaciones. El motor que movía las imágenes solas se retiró:
   una fotografía se muestra quieta salvo que alguien le añada movimiento a
   propósito desde CSS o desde un script propio.

   Lo que queda es la caja: recorte, punto focal y pie. Eso sí lo necesitan
   todas las imágenes, tengan o no efecto.
   ============================================================================ */

/* ============================================================================
   RUTAS — Efectos de animación para imágenes
   Cada bloque implementa una fila de la tabla `animation_presets`.
   La columna `css_class` del registro apunta a la clase de aquí.
   Los parámetros de `config` llegan como variables CSS inline (--fx-*).
   ============================================================================ */

/* ---------- Contenedor base ---------- */
.fx{
  position:relative;
  overflow:hidden;
  display:block;
  background:var(--basalt, #12181B);
  isolation:isolate;
}
.fx__img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform-origin:center;
  will-change:transform, opacity, filter;
}
.fx__caption{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:16px 18px;
  font-family:var(--mono, monospace); font-size:10px;
  letter-spacing:0.05em; text-transform:uppercase;
  color:var(--signal, #FAFAF7);
  background:linear-gradient(0deg, rgba(18,24,27,0.85), transparent);
}

/* ============================================================================
   01 · ken-burns — zoom lento continuo
   ============================================================================ */

/* ============================================================================
   02 · fade-rise — aparición ascendente
   ============================================================================ */

/* ============================================================================
   03 · curtain-wipe — cortina vertical
   ============================================================================ */

/* ============================================================================
   04 · contour-wipe — barrido topográfico (efecto de marca)
   Líneas de nivel recorren la imagen mientras la descubren.
   ============================================================================ */


/* ============================================================================
   05 · slat-reveal — lamas verticales (el JS genera las lamas)
   ============================================================================ */

/* ============================================================================
   06 · blur-focus — entra desenfocada y enfoca
   ============================================================================ */

/* ============================================================================
   07 · parallax-depth — desplazamiento por scroll (posición vía JS)
   ============================================================================ */

/* ============================================================================
   08 · mask-expand — apertura circular desde el punto focal
   ============================================================================ */

/* ============================================================================
   09 · duotone-warm — del duotono al color natural
   ============================================================================ */

/* ============================================================================
   10 · tilt-pointer — inclinación 3D siguiendo el cursor (JS)
   ============================================================================ */

/* ============================================================================
   11 · zoom-hover — acercamiento al pasar el ratón
   ============================================================================ */

/* ============================================================================
   12 · grain-dissolve — se materializa a través de grano fotográfico
   ============================================================================ */


/* ============================================================================
   ACCESIBILIDAD
   `respects_reduced_motion` = 1 en animation_presets ⇒ la imagen se muestra
   íntegra y estática. Nunca se oculta contenido por desactivar la animación.
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  .fx .fx__img,
  .fx .fx__slat{
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    filter:none !important;
    clip-path:none !important;
    transform:none !important;
  }
  .fx::after,
  .fx::before{ animation:none !important; opacity:0 !important; }
}

/* ============================================================================
   SUELO DE VISIBILIDAD
   ----------------------------------------------------------------------------
   Los efectos de entrada parten de opacity:0 y solo se revelan cuando el
   JavaScript añade .is-in al observar el elemento. Eso significa que si el
   script no llega a ejecutarse —un error previo, un bloqueador, una versión de
   navegador sin IntersectionObserver, o simplemente una página del panel que no
   lo carga— la imagen se queda invisible para siempre.

   Una imagen es contenido, no decoración: debe verse aunque el efecto no se
   ejecute. Estas reglas garantizan ese suelo.

   El motor marca <html class="fx-ready"> en cuanto arranca; a partir de ahí
   manda él y los efectos funcionan con normalidad.
   ============================================================================ */

html:not(.fx-ready) .fx__img {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
}

/* Si el navegador no ejecuta JavaScript en absoluto. */
.no-js .fx__img,
noscript ~ * .fx__img {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* Contenedor con alto propio: sin él, un div en posición absoluta dentro de
   otro sin dimensiones no ocupa nada y la imagen no se ve aunque cargue. */
.medcard__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-sunken, #EFF1EE);
}