/*
 * Componente: Animación decorativa (Lottie) en la parte superior de un bloque.
 * Se activa desde la pestaña "Maquetación" de cualquier bloque ACF.
 *
 * Variables CSS que pueden sobrescribirse por bloque:
 *   --top-anim-width   -> ancho del contenedor (default 166px, el tamaño nativo del JSON)
 *   --top-anim-height  -> alto del contenedor (default 150px)
 *   --top-anim-top     -> posición vertical (default 0, se solapa con el borde superior)
 *   --top-anim-left    -> posición horizontal (default 50%, centrado)
 *   --top-anim-translate-x  -> offset horizontal tras el left (default -50%)
 *   --top-anim-translate-y  -> offset vertical tras el top (default -50%, mitad fuera del bloque)
 *   --top-anim-z       -> z-index (default 3)
 */

.block-top-animation {
    --top-anim-width: 166px;
    --top-anim-height: 150px;
    --top-anim-top: 0;
    --top-anim-left: 50%;
    --top-anim-translate-x: -50%;
    --top-anim-translate-y: -40%;
    --top-anim-z: 3;

    position: absolute;
    top: var(--top-anim-top);
    left: var(--top-anim-left);
    width: var(--top-anim-width);
    height: var(--top-anim-height);
    transform: translate(var(--top-anim-translate-x), var(--top-anim-translate-y));
    pointer-events: none;
    z-index: var(--top-anim-z);
    display: block;
}

.block-top-animation svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Cualquier <section> que contenga la animación necesita posicionamiento relativo
   y dejar que el SVG pueda "salir" hacia arriba. */
section:has(> .block-top-animation) {
    position: relative;
}

/* Ocultar en móvil/tablet — el offset horizontal pierde sentido en pantallas pequeñas
   y la animación entra en conflicto con el layout del bloque. */
@media (max-width: 999px) {
    .block-top-animation {
        display: none;
    }
}