/* ==========================================================================
   FarMAUTIL - Capa cinematica
   Completa los efectos que quedaron declarados pero nunca llegaron a correr
   y ralentiza el tempo general para una lectura mas elegante.
   Se carga al final: gana los empates de especificidad sin tocar el resto.
   ========================================================================== */

:root {
    /* Curvas */
    --fu-ease-cine: cubic-bezier(.16, 1, .3, 1);
    --fu-ease-drift: cubic-bezier(.22, .61, .36, 1);
    --fu-ease-veil: cubic-bezier(.33, 0, .2, 1);

    /* Tempo base: mas lento que el original (.34 / .58 / .92) */
    --transition-fast: .46s var(--fu-ease-drift);
    --transition-normal: .78s var(--fu-ease-cine);
    --transition-slow: 1.35s var(--fu-ease-cine);

    /* Tempo de capas superpuestas */
    --fu-dur-veil-in: .92s;
    --fu-dur-veil-out: .58s;
    --fu-dur-panel-in: 1.05s;
    --fu-dur-panel-out: .5s;
    --fu-dur-image: 1.5s;
}

/* --------------------------------------------------------------------------
   1. Modales de modalCore (mg-modal--opening / --open / --closing)
   El JS ya orquestaba estas tres clases con sus timeouts de 10ms y 300ms,
   pero no existia ninguna regla CSS: los modales aparecian de golpe.
   -------------------------------------------------------------------------- */

.mg-modal-overlay {
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition:
        opacity var(--fu-dur-veil-out) var(--fu-ease-veil),
        backdrop-filter var(--fu-dur-veil-out) var(--fu-ease-veil),
        -webkit-backdrop-filter var(--fu-dur-veil-out) var(--fu-ease-veil);
}

.mg-modal-overlay .mg-modal-wrapper {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(.94);
    transform-origin: center 42%;
    transition:
        opacity var(--fu-dur-panel-out) var(--fu-ease-veil),
        transform var(--fu-dur-panel-out) var(--fu-ease-veil),
        box-shadow var(--fu-dur-panel-out) var(--fu-ease-veil);
}

.mg-modal-overlay.mg-modal--opening {
    opacity: 0;
}

.mg-modal-overlay.mg-modal--open {
    opacity: 1;
    backdrop-filter: blur(9px) saturate(118%);
    -webkit-backdrop-filter: blur(9px) saturate(118%);
    transition:
        opacity var(--fu-dur-veil-in) var(--fu-ease-cine),
        backdrop-filter 1.25s var(--fu-ease-cine),
        -webkit-backdrop-filter 1.25s var(--fu-ease-cine);
}

.mg-modal-overlay.mg-modal--open .mg-modal-wrapper {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 42px 110px rgba(4, 26, 28, .46), 0 2px 0 rgba(255, 255, 255, .04) inset;
    transition:
        opacity var(--fu-dur-panel-in) .08s var(--fu-ease-cine),
        transform 1.18s .08s var(--fu-ease-cine),
        box-shadow 1.3s .1s var(--fu-ease-cine);
}

.mg-modal-overlay.mg-modal--closing,
.mg-modal-overlay.mg-modal--closing .mg-modal-wrapper {
    pointer-events: none;
}

.mg-modal-overlay.mg-modal--closing .mg-modal-wrapper {
    transform: translate3d(0, 16px, 0) scale(.975);
}

/* Contenido interno del panel: entra escalonado detras del panel */
.mg-modal-overlay.mg-modal--open .mg-modal-header,
.mg-modal-overlay.mg-modal--open .mg-modal-body,
.mg-modal-overlay.mg-modal--open .mg-modal-footer {
    animation: fuPanelStagger .95s both var(--fu-ease-cine);
}

.mg-modal-overlay.mg-modal--open .mg-modal-header { animation-delay: .3s; }
.mg-modal-overlay.mg-modal--open .mg-modal-body { animation-delay: .42s; }
.mg-modal-overlay.mg-modal--open .mg-modal-footer { animation-delay: .54s; }

@keyframes fuPanelStagger {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* --------------------------------------------------------------------------
   2. Modal dinamico (.modal-overlay). El JS lo creaba ya con .active en el
   mismo frame, asi que la transicion declarada nunca tenia estado inicial
   que animar; y al cerrar se hacia removeChild inmediato.
   El JS ahora pinta primero .is-entering y luego .active / .is-closing.
   -------------------------------------------------------------------------- */

.modal-overlay {
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition:
        opacity var(--fu-dur-veil-out) var(--fu-ease-veil),
        visibility var(--fu-dur-veil-out) var(--fu-ease-veil),
        backdrop-filter var(--fu-dur-veil-out) var(--fu-ease-veil),
        -webkit-backdrop-filter var(--fu-dur-veil-out) var(--fu-ease-veil);
}

.modal-overlay.is-entering {
    opacity: 0;
    visibility: visible;
}

.modal-overlay.active {
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    transition:
        opacity var(--fu-dur-veil-in) var(--fu-ease-cine),
        visibility var(--fu-dur-veil-in) var(--fu-ease-cine),
        backdrop-filter 1.3s var(--fu-ease-cine),
        -webkit-backdrop-filter 1.3s var(--fu-ease-cine);
}

.modal-overlay .modal-content-wrapper {
    opacity: 0;
    transform: translate3d(0, 36px, 0) scale(.94);
    transform-origin: center 42%;
    transition:
        opacity var(--fu-dur-panel-out) var(--fu-ease-veil),
        transform var(--fu-dur-panel-out) var(--fu-ease-veil);
}

/* Reemplaza el animation: modalContentIn .4s ease del CSS original,
   que ademas se reiniciaba en cada repintado. */
.modal-overlay.active .modal-content-wrapper {
    animation: none;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 44px 116px rgba(4, 26, 28, .48);
    transition:
        opacity var(--fu-dur-panel-in) .08s var(--fu-ease-cine),
        transform 1.2s .08s var(--fu-ease-cine),
        box-shadow 1.3s .1s var(--fu-ease-cine);
}

.modal-overlay.is-closing {
    opacity: 0;
    pointer-events: none;
}

.modal-overlay.is-closing .modal-content-wrapper {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.976);
}

.modal-overlay.active .modal-header,
.modal-overlay.active .modal-body,
.modal-overlay.active .modal-footer {
    animation: fuPanelStagger .95s both var(--fu-ease-cine);
}

.modal-overlay.active .modal-header { animation-delay: .32s; }
.modal-overlay.active .modal-body { animation-delay: .44s; }
.modal-overlay.active .modal-footer { animation-delay: .56s; }

.modal-overlay.is-closing .modal-header,
.modal-overlay.is-closing .modal-body,
.modal-overlay.is-closing .modal-footer {
    animation: none;
}

/* modalBackdropIn quedaba definido sin uso; el velo ahora lo usa de verdad */
.modal-overlay.active.fu-veil-pulse {
    animation: modalBackdropIn var(--fu-dur-veil-in) var(--fu-ease-cine);
}

/* --------------------------------------------------------------------------
   3. Carrito. Overlay y panel entraban/salian con display seco.
   -------------------------------------------------------------------------- */

.cart-modal-overlay,
.cart-overlay {
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition:
        opacity var(--fu-dur-veil-out) var(--fu-ease-veil),
        backdrop-filter var(--fu-dur-veil-out) var(--fu-ease-veil),
        -webkit-backdrop-filter var(--fu-dur-veil-out) var(--fu-ease-veil);
}

.cart-modal-overlay.active,
.cart-modal-overlay.is-open,
.cart-overlay.is-open {
    opacity: 1;
    backdrop-filter: blur(9px) saturate(118%);
    -webkit-backdrop-filter: blur(9px) saturate(118%);
    transition:
        opacity var(--fu-dur-veil-in) var(--fu-ease-cine),
        backdrop-filter 1.2s var(--fu-ease-cine),
        -webkit-backdrop-filter 1.2s var(--fu-ease-cine);
}

.cart-modal-overlay.is-closing,
.cart-overlay.is-closing {
    opacity: 0;
    pointer-events: none;
}

.cart-modal-overlay .cart-modal-content,
.cart-overlay .cart-modal {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(.945);
    transition:
        opacity var(--fu-dur-panel-out) var(--fu-ease-veil),
        transform var(--fu-dur-panel-out) var(--fu-ease-veil);
}

.cart-modal-overlay.active .cart-modal-content,
.cart-modal-overlay.is-open .cart-modal-content,
.cart-overlay.is-open .cart-modal {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        opacity var(--fu-dur-panel-in) .08s var(--fu-ease-cine),
        transform 1.18s .08s var(--fu-ease-cine);
}

.cart-modal-overlay.is-closing .cart-modal-content,
.cart-overlay.is-closing .cart-modal {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(.972);
}

/* Filas del carrito: entran una detras de otra */
.cart-modal-body .cart-item,
.cart-modal-body .cart-summary {
    animation: fuPanelStagger .88s both var(--fu-ease-cine);
}

.cart-modal-body .cart-item:nth-child(1) { animation-delay: .5s; }
.cart-modal-body .cart-item:nth-child(2) { animation-delay: .59s; }
.cart-modal-body .cart-item:nth-child(3) { animation-delay: .68s; }
.cart-modal-body .cart-item:nth-child(4) { animation-delay: .77s; }
.cart-modal-body .cart-item:nth-child(n+5) { animation-delay: .86s; }
.cart-modal-body .cart-summary { animation-delay: .95s; }

/* Contador del carrito: countUp existia pero a 0.3s era imperceptible */
.cart-badge.bounce {
    animation: fuBadgePop .82s var(--fu-ease-cine);
}

@keyframes fuBadgePop {
    0% { transform: scale(1); }
    26% { transform: scale(1.34); }
    56% { transform: scale(.94); }
    100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   4. Buscador. El dropdown solo alternaba display block/none.
   -------------------------------------------------------------------------- */

.search-results-dropdown {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
    transform-origin: top center;
    transition:
        opacity .62s var(--fu-ease-cine),
        transform .72s var(--fu-ease-cine);
}

.search-results-dropdown.active,
.search-results-dropdown.is-open {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.search-results-dropdown .search-result-item {
    animation: fuPanelStagger .6s both var(--fu-ease-cine);
}

.search-results-dropdown .search-result-item:nth-child(1) { animation-delay: .06s; }
.search-results-dropdown .search-result-item:nth-child(2) { animation-delay: .12s; }
.search-results-dropdown .search-result-item:nth-child(3) { animation-delay: .18s; }
.search-results-dropdown .search-result-item:nth-child(4) { animation-delay: .24s; }
.search-results-dropdown .search-result-item:nth-child(n+5) { animation-delay: .3s; }

.farmautil-search-expand {
    transition:
        width var(--fu-dur-panel-in) var(--fu-ease-cine),
        opacity .72s var(--fu-ease-cine);
}

/* --------------------------------------------------------------------------
   5. Checkout PIX. Existia transicion pero a .28s: se sentia abrupta.
   -------------------------------------------------------------------------- */

.bf-pix-overlay {
    transition:
        opacity var(--fu-dur-veil-in) var(--fu-ease-cine),
        visibility var(--fu-dur-veil-in) var(--fu-ease-cine),
        backdrop-filter 1.2s var(--fu-ease-cine),
        -webkit-backdrop-filter 1.2s var(--fu-ease-cine);
}

.bf-pix-box {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(.945);
    transition:
        opacity var(--fu-dur-panel-out) var(--fu-ease-veil),
        transform var(--fu-dur-panel-out) var(--fu-ease-veil);
}

.bf-pix-overlay.bf-pix-open .bf-pix-box {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        opacity var(--fu-dur-panel-in) .1s var(--fu-ease-cine),
        transform 1.2s .1s var(--fu-ease-cine);
}

/* --------------------------------------------------------------------------
   6. Ripple. events.js creaba <span class="ripple"> pero el CSS animaba
   .ripple-effect: el pulso nunca se dibujaba. Ahora responden ambas clases
   y el pulso dura lo suficiente para leerse.
   -------------------------------------------------------------------------- */

.ripple,
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .46) 0%, rgba(255, 145, 0, .22) 62%, transparent 72%);
    transform: scale(0);
    opacity: 1;
    pointer-events: none;
    animation: fuRipple 1.05s var(--fu-ease-cine) forwards;
}

@keyframes fuRipple {
    to {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   7. Imagenes. Aparecian de golpe al terminar la descarga.
   premiumMotion las revela por scroll; esto suma el fundido de carga.
   -------------------------------------------------------------------------- */

img[data-fu-img] {
    opacity: 0;
    filter: blur(14px) saturate(.82);
    transform: scale(1.035);
    transition:
        opacity var(--fu-dur-image) var(--fu-ease-cine),
        filter var(--fu-dur-image) var(--fu-ease-cine),
        transform 1.9s var(--fu-ease-cine);
}

img[data-fu-img="ready"] {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: scale(1);
}

/* El hero respira mas despacio: heroZoom a 8s se notaba como zoom nervioso */
.hero-slide-img {
    animation: heroZoom 26s var(--fu-ease-drift) infinite alternate;
}

.carousel-item .hero-slide-img {
    will-change: transform;
}

/* Cruce entre slides del hero: Bootstrap usa .6s por defecto */
.heroCarousel .carousel-item {
    transition: transform 1.5s var(--fu-ease-cine), opacity 1.2s var(--fu-ease-cine);
}

.heroCarousel .carousel-fade .carousel-item {
    transition: opacity 1.5s var(--fu-ease-cine);
}

.carousel-indicators button {
    transition: all var(--transition-normal);
}

/* --------------------------------------------------------------------------
   8. Titulos. Se revelan tras una mascara, no solo con opacidad.
   -------------------------------------------------------------------------- */

html.fu-motion-ready .fu-motion-item.fu-motion-title {
    transform: translate3d(0, 22px, 0);
    clip-path: inset(0 0 34% 0);
    transition-property: opacity, transform, clip-path;
    transition-duration: 1.5s, 1.72s, 1.72s;
    transition-timing-function: var(--fu-ease-cine), var(--fu-ease-cine), var(--fu-ease-cine);
}

html.fu-motion-ready .fu-motion-item.fu-motion-title.fu-motion-visible {
    clip-path: inset(0 0 0 0);
}

html.fu-motion-ready .fu-motion-item.fu-motion-title.fu-motion-settled {
    clip-path: none;
}

/* La regla de subrayado (underlineGrow) estaba escrita y sin aplicar */
.section-header::after,
.mg-explorer-title::after {
    transform-origin: left center;
}

.reveal.visible .section-header::after {
    animation: underlineGrow 1.45s .55s both var(--fu-ease-cine);
}

.reveal.visible .section-header,
.reveal.visible .mg-explorer-title {
    animation: fuTextReveal 1.5s .12s both var(--fu-ease-cine);
}

.reveal.visible .row > * {
    animation: fuCardReveal 1.42s .22s both var(--fu-ease-cine);
}

.reveal.visible .row > *:nth-child(2) { animation-delay: .38s; }
.reveal.visible .row > *:nth-child(3) { animation-delay: .52s; }
.reveal.visible .row > *:nth-child(4) { animation-delay: .66s; }
.reveal.visible .row > *:nth-child(n+5) { animation-delay: .8s; }

/* --------------------------------------------------------------------------
   9. Tempo general del sistema fu-motion: mas lento y con mas recorrido.
   -------------------------------------------------------------------------- */

html.fu-motion-ready .fu-motion-item {
    transition-duration: 1.45s, 1.62s;
}

html.fu-motion-ready .fu-motion-item.fu-motion-block {
    transform: translate3d(0, 34px, 0) scale(.978);
    transition-duration: 1.55s, 1.85s;
}

html.fu-motion-ready .fu-motion-item.fu-motion-media {
    transform: translate3d(0, 22px, 0) scale(1.04);
    transition-duration: 1.8s, 2.1s;
}

html.fu-motion-ready .fu-motion-item.fu-motion-control {
    transition-duration: 1.15s, 1.32s;
}

html.fu-motion-ready .fu-motion-item.fu-motion-banner {
    transform: translate3d(0, 40px, 0) scale(.985);
    transition-duration: 1.85s, 2.2s;
}

html.fu-motion-ready .fu-motion-item.fu-motion-modal {
    transition-duration: 1.15s, 1.45s;
}

html.fu-motion-ready .fu-motion-item.fu-motion-section {
    transform: translate3d(0, 30px, 0);
    transition-duration: 1.7s, 1.95s;
}

/* Cortina de apertura del sitio, mas larga y con salida menos brusca */
html.fu-motion-ready body::before {
    transition:
        opacity 1.85s var(--fu-ease-cine),
        visibility 1.85s var(--fu-ease-cine),
        transform 2.1s var(--fu-ease-cine);
}

html.fu-motion-ready body::after {
    animation: fuCurtainLine 1.5s .1s both var(--fu-ease-cine);
    transition:
        opacity 1.1s var(--fu-ease-cine),
        transform 1.4s var(--fu-ease-cine),
        visibility 1.4s var(--fu-ease-cine);
}

/* Hover: se mantiene mas corto que la entrada para no sentirse pesado */
@media (hover: hover) and (pointer: fine) {
    html.fu-motion-ready .fu-motion-item.fu-motion-visible.product-card:hover,
    html.fu-motion-ready .fu-motion-item.fu-motion-visible.blog-card:hover,
    html.fu-motion-ready .fu-motion-item.fu-motion-visible.news-card:hover,
    html.fu-motion-ready .fu-motion-item.fu-motion-visible.event-card:hover,
    html.fu-motion-ready .fu-motion-item.fu-motion-visible.category-card:hover {
        transform: translate3d(0, -10px, 0) scale(1);
    }

    html.fu-motion-ready .product-card:hover .fu-motion-item.fu-motion-visible.product-img,
    html.fu-motion-ready .blog-card:hover .fu-motion-item.fu-motion-visible.blog-img,
    html.fu-motion-ready .news-card:hover .fu-motion-item.fu-motion-visible.news-img,
    html.fu-motion-ready .event-card:hover .fu-motion-item.fu-motion-visible.event-img {
        transform: translate3d(0, 0, 0) scale(1.06);
    }
}

/* Barra de progreso de lectura: seguimiento mas suave */
.fu-scroll-progress {
    transition: transform .34s var(--fu-ease-drift);
}

/* --------------------------------------------------------------------------
   10. Accesibilidad: quien pide menos movimiento no recibe nada de esto.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    img[data-fu-img],
    .mg-modal-overlay,
    .mg-modal-overlay .mg-modal-wrapper,
    .modal-overlay .modal-content-wrapper,
    .cart-modal-overlay,
    .cart-overlay,
    .cart-modal-overlay .cart-modal-content,
    .cart-overlay .cart-modal,
    .search-results-dropdown,
    .bf-pix-box {
        opacity: 1;
        filter: none;
        transform: none;
        clip-path: none;
    }
}

html.fu-motion-disabled img[data-fu-img],
html.fu-motion-disabled .mg-modal-overlay,
html.fu-motion-disabled .mg-modal-overlay .mg-modal-wrapper,
html.fu-motion-disabled .modal-overlay .modal-content-wrapper,
html.fu-motion-disabled .cart-modal-overlay,
html.fu-motion-disabled .cart-overlay,
html.fu-motion-disabled .cart-modal-overlay .cart-modal-content,
html.fu-motion-disabled .cart-overlay .cart-modal,
html.fu-motion-disabled .search-results-dropdown,
html.fu-motion-disabled .bf-pix-box {
    opacity: 1;
    filter: none;
    transform: none;
    clip-path: none;
    animation: none;
}