/*
Theme Name: Anubixx Minimal
Theme URI: https://anubixx.com/
Author: Anubixx
Description: Standalone minimal theme for Anubixx.
Version: 2.0.0
Text Domain: anubixx-minimal
*/

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background: #000;
}

body {
    overflow-x: hidden;
}

#anubixx-page {
    width: 100%;
    margin: 0;
    padding: 0;
}




/* ANUBIXX HERO VERTICAL FIX START */

/*
 * El HTML original usaba 48vh / 43vh / 350px para
 * reservar la zona donde aparece el producto.
 *
 * Con el theme standalone esa reserva crea un enorme
 * espacio negro. Ahora la altura depende de la imagen.
 */

#anubixx-page .axm-hero {
    min-height: 0 !important;
    height: auto !important;
}


/*
 * Eliminar completamente la altura artificial
 * del contenedor del primer producto.
 */

#anubixx-page .axm-hero-stage {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin-top: 28px !important;

    display: block !important;

    position: relative !important;
}


/*
 * La imagen utiliza su proporción natural.
 * Ya no llena una caja de 48vh.
 */

#anubixx-page .axm-hero-product {
    display: block !important;

    width: min(76vw, 780px) !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: none !important;

    margin: 0 auto !important;

    object-fit: contain !important;
}


/*
 * Mantener el glow detrás del producto.
 */

#anubixx-page .axm-hero-glow {
    top: 50% !important;
    bottom: auto !important;

    transform:
        translate(-50%, -50%) !important;
}


/*
 * Tablet.
 */

@media (max-width: 900px) {

    #anubixx-page .axm-hero-stage {
        height: auto !important;
        min-height: 0 !important;
        margin-top: 24px !important;
    }

    #anubixx-page .axm-hero-product {
        width: min(82vw, 720px) !important;
        height: auto !important;
    }

}


/*
 * Móvil.
 */

@media (max-width: 600px) {

    #anubixx-page .axm-hero-stage {
        height: auto !important;
        min-height: 0 !important;
        margin-top: 20px !important;
    }

    #anubixx-page .axm-hero-product {
        width: 92vw !important;
        height: auto !important;
        max-width: 92vw !important;
    }

}

/* ANUBIXX HERO VERTICAL FIX END */


/* ANUBIXX MARQUEE RIGHT START */


/*
 * La ventana del cintillo ocupa todo el ancho.
 */
#anubixx-page .axm-marquee {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow: hidden !important;
}


/*
 * El track empieza completamente fuera de pantalla,
 * en el lado derecho.
 */
#anubixx-page .axm-marquee-track {

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: max-content !important;
    min-width: max-content !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;

    left: 0 !important;
    right: auto !important;

    gap: 64px !important;

    transform: translate3d(100vw, 0, 0);

    animation:
        anubixxMarqueeFromRight
        28s
        linear
        infinite
        !important;

    will-change: transform;
}


/*
 * Cada copia del mensaje mantiene su ancho natural.
 */
#anubixx-page .axm-marquee-track span {

    display: block !important;

    flex: 0 0 auto !important;

    white-space: nowrap !important;
}


/*
 * Empieza exactamente en el borde derecho.
 * Termina cuando todo el track salió por la izquierda.
 */
@keyframes anubixxMarqueeFromRight {

    0% {
        transform: translate3d(100vw, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }

}


/*
 * Un poco más rápido en pantallas pequeñas.
 */
@media (max-width: 700px) {

    #anubixx-page .axm-marquee-track {

        gap: 42px !important;

        animation-duration: 22s !important;
    }

}


/* ANUBIXX MARQUEE RIGHT END */


/* ANUBIXX MOBILE HERO CENTER START */

@media (max-width: 700px) {

    /*
     * El contenedor del producto utiliza todo
     * el ancho disponible.
     */
    #anubixx-page .axm-hero-stage {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
    }


    /*
     * Centramos el Bomber respecto al viewport,
     * no respecto a posiciones heredadas.
     *
     * También anulamos cualquier desplazamiento
     * generado por el efecto parallax.
     */
    #anubixx-page .axm-hero-product {

        display: block !important;

        position: relative !important;

        left: 50% !important;
        right: auto !important;

        width: calc(100vw - 32px) !important;
        max-width: 680px !important;

        height: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: translateX(-50%) !important;

        object-fit: contain !important;

        animation: none !important;
    }


    /*
     * El glow usa el mismo centro exacto.
     */
    #anubixx-page .axm-hero-glow {

        left: 50% !important;
        right: auto !important;

        transform:
            translate(-50%, -50%) !important;
    }

}


/* ANUBIXX MOBILE HERO CENTER END */