/*
 * Capa base de decoraciones para eventos promocionales
 *
 * Se carga siempre que hay un evento activo, ANTES del CSS propio del evento.
 * No pinta nada por si sola: cada decoracion se activa con una clase en el body
 * (se anade en 'styling.body_class' de config/promotional_events.php) y su
 * aspecto lo ponen las variables CSS que define el tema del evento.
 *
 * Decoraciones disponibles:
 *
 *   event-deco-background  Patron de fondo en main, buscador y secciones pares de la home
 *                          --event-bg-pattern (url)
 *
 *   event-deco-titles      Color de los titulos de las secciones de la home
 *                          --event-title-color, --event-subtitle-color
 *
 *   event-deco-cards       Adorno en la esquina de las product cards y borde de hover
 *                          --event-card-ornament (url), --event-card-ornament-size,
 *                          --event-card-ornament-wide (url) y --event-card-ornament-wide-size:
 *                          adorno de las cards wide, en la esquina de la foto,
 *                          --event-card-hover-border
 *
 *   event-deco-tiles       Adorno que baja desde arriba al pasar el raton por las
 *                          tarjetas de categorias, marcas y promociones (.mosaicItem)
 *                          y colgando en el modal de subcategorias del movil
 *                          --event-tile-ornament (url), --event-tile-ornament-width,
 *                          --event-tile-ornament-height
 *
 *   event-deco-menu        Adornos en las esquinas superiores de la franja del buscador
 *                          y del desplegable del menu
 *                          --event-menu-corner-left (url), --event-menu-corner-right (url),
 *                          --event-menu-corner-size
 *
 *   event-deco-logo        Adorno colgando del logo, con un balanceo corto al cargar
 *                          --event-logo-ornament (url), --event-logo-ornament-width,
 *                          --event-logo-ornament-height
 *
 *   event-deco-product     Ficha de producto: adorno en la esquina inferior derecha de la
 *                          foto, personaje que asoma por abajo a la izquierda (se escapa
 *                          volando al pasar el raton) y adorno colgando de la pestana activa
 *                          de relacionados
 *                          --event-product-corner (url, por defecto --event-card-ornament,
 *                          se voltea en vertical), --event-product-corner-size,
 *                          --event-product-peek (url, por defecto --event-ambient-sprite-2),
 *                          --event-product-hanging (url, por defecto --event-tile-ornament)
 *
 *   event-deco-cart        Carrito, sin animaciones: adornos en las esquinas de la cabecera
 *                          de "Resumen del pedido" e ilustracion encima del carrito vacio
 *                          --event-cart-corner-left / --event-cart-corner-right (url, por
 *                          defecto los del menu), --event-cart-corner-size,
 *                          --event-cart-empty (url, por defecto --event-ambient-sprite-2),
 *                          --event-cart-empty-size
 *
 *   event-deco-search      Buscador, sin animaciones: adorno en la esquina y personaje sentado
 *                          sobre la tarjeta de bienvenida (en movil, encima de las promociones)
 *                          e ilustracion en "sin resultados"
 *                          --event-search-corner (url, por defecto --event-menu-corner-left),
 *                          --event-search-corner-size, --event-search-mascot (url, por defecto
 *                          --event-ambient-sprite-2), --event-search-empty (url, idem),
 *                          --event-search-empty-size
 *
 * Al anadir al carrito (js/base.js):
 *   event-deco-cart-burst  Al confirmarse el alta, salen figuras del boton pulsado (< 1 s)
 *                          --event-burst-sprite-1..3 (url, por defecto los de ambiente),
 *                          --event-burst-variants (cuantas usar, 2), --event-burst-count (4),
 *                          --event-burst-size, --event-burst-animation
 *                          (event-burst-rise por defecto o event-burst-fall)
 *
 * Animacion de ambiente (home, solo escritorio):
 *   Bloque de home 'event-ambient' + clave 'ambient' del evento en la config.
 *   Cada sprite usa --event-ambient-sprite-N (url). Dura menos de 5 s y se
 *   reproduce cada vez que se carga la home (WCAG 2.2.2 no exige pausa).
 *
 * Todas las animaciones se desactivan con prefers-reduced-motion.
 */

/* ========================================
   FONDO
   ======================================== */

body.event-deco-background main,
body.event-deco-background #fullSearch,
body.event-deco-background .homeBlocks > section:nth-child(even) {
    background-image: var(--event-bg-pattern) !important;
    background-repeat: repeat !important;
}

/* Hasta 1366px responsive.css pinta el buscador a pantalla completa con un degradado
   (es una imagen de fondo, sin color): se mantiene debajo del patron o quedaria
   transparente y se veria la pagina por encima */
@media only screen and (max-width: 1366px) {
    body.event-deco-background #fullSearch {
        background-image: var(--event-bg-pattern), linear-gradient(to bottom, #eee, #e6e6e6) !important;
    }
}

/* ========================================
   TITULOS DE LA HOME
   ======================================== */

body.event-deco-titles .homeBlocks .titleBar h2 {
    color: var(--event-title-color);
}

body.event-deco-titles .homeBlocks .titleBar h2 + p {
    color: var(--event-subtitle-color);
}

/* ========================================
   PRODUCT CARDS
   ======================================== */

/* En movil las cards son pequenas y van llenas: los adornos de esquina solo en escritorio */
@media (min-width: 768px) {
    /* Buscador: los ::before/::after ya los usa el borde animado del hover,
       asi que el adorno va como capa de fondo */
    body.event-deco-cards .product-card__container {
        background-image: var(--event-card-ornament);
        background-repeat: no-repeat;
        background-position: right top;
        background-size: var(--event-card-ornament-size, 64px);
    }

    body.event-deco-cards .product-card__container:hover {
        background:
            var(--event-card-ornament) no-repeat right top / var(--event-card-ornament-size, 64px),
            linear-gradient(180deg, #fdfbfb 0%, var(--color-fainter) 100%);
    }

    /* Carruseles de la home: la imagen ocupa la parte de arriba, el adorno va por encima */
    body.event-deco-cards .productCard:not(.skeleton)::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: var(--event-card-ornament-size, 64px);
        height: var(--event-card-ornament-size, 64px);
        background: var(--event-card-ornament) no-repeat right top / contain;
        pointer-events: none;
        z-index: 2;
    }

    /* Cards alargadas (listado y oferta flash): a la derecha esta el boton de anadir,
       el adorno pasa a la esquina de la foto */
    body.event-deco-cards .productCard.wide:not(.skeleton)::after {
        right: auto;
        left: 0;
        width: var(--event-card-ornament-wide-size, 44px);
        height: var(--event-card-ornament-wide-size, 44px);
        background: var(--event-card-ornament-wide, var(--event-card-ornament)) no-repeat left top / contain;
    }
}

body.event-deco-cards .product-card__container::before,
body.event-deco-cards .product-card__container::after {
    border-color: var(--event-card-hover-border, var(--color-accent-secondary));
}

/* ========================================
   TARJETAS DE CATEGORIAS, MARCAS Y PROMOCIONES
   ======================================== */

body.event-deco-tiles .mosaicGroup:not(.skeleton) > .mosaicItem::after {
    content: '';
    position: absolute;
    top: 0;
    left: 18%;
    width: var(--event-tile-ornament-width, 24px);
    height: var(--event-tile-ornament-height, 80px);
    background: var(--event-tile-ornament) no-repeat center bottom / contain;
    transform: translateY(-100%);
    transition: transform .6s cubic-bezier(.34, 1.4, .64, 1);
    pointer-events: none;
    z-index: 2;
}

body.event-deco-tiles .mosaicGroup:not(.skeleton) > .mosaicItem:hover::after,
body.event-deco-tiles .mosaicGroup:not(.skeleton) > .mosaicItem:focus-within::after {
    transform: translateY(0);
}

/* En vista de lista la tarjeta no recorta lo que sobresale y el adorno quedaria
   siempre visible por encima del borde */
body.event-deco-tiles .listView > .mosaicGroup > .mosaicItem::after {
    content: none;
}

/* Movil: al abrir una categoria o marca sale el modal #subcategoriesModal a pantalla
   completa. El adorno cuelga de la cabecera sobre el lado derecho de la lista, que en
   movil no lleva flechas. La cabecera es flex, asi que su ::after de clearfix no hace falta */
body.event-deco-tiles #subcategoriesModal .modal-header {
    position: relative;
}

body.event-deco-tiles #subcategoriesModal .modal-header::after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    right: 28px;
    width: var(--event-tile-ornament-width, 24px);
    height: var(--event-tile-ornament-height, 80px);
    background: var(--event-tile-ornament) no-repeat center bottom / contain;
    transform-origin: 50% 0;
    animation: event-deco-swing 2.4s ease-in-out 2;
    pointer-events: none;
    z-index: 2;
}

/* ========================================
   FICHA DE PRODUCTO
   ======================================== */

/* Foto principal: arriba estan las flechas y a la derecha los botones de
   favorito, zoom, video y descarga; los adornos van en las esquinas de abajo */
body.event-deco-product .newProductProfile .gallery-top::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--event-product-corner-size, 90px);
    height: var(--event-product-corner-size, 90px);
    background: var(--event-product-corner, var(--event-card-ornament)) no-repeat right top / contain;
    transform: scaleY(-1);
    pointer-events: none;
    z-index: 2;
}

body.event-deco-product .newProductProfile .gallery-top::before {
    content: '';
    position: absolute;
    left: 24px;
    bottom: 0;
    width: 46px;
    height: 56px;
    background: var(--event-product-peek, var(--event-ambient-sprite-2)) no-repeat center top / contain;
    transform: translateY(55%);
    animation: event-deco-peek-in .6s ease-out both;
    pointer-events: none;
    z-index: 2;
}

/* Al acercar el raton se escapa volando: asi no parece un boton y deja la foto limpia.
   Al salir vuelve a asomar (se reinicia event-deco-peek-in) */
body.event-deco-product .newProductProfile .gallery-top:hover::before {
    animation: event-deco-peek-flee .9s ease-in forwards;
}

@keyframes event-deco-peek-in {
    from { transform: translateY(100%); }
    to { transform: translateY(55%); }
}

@keyframes event-deco-peek-flee {
    0% { transform: translateY(55%); opacity: 1; }
    30% { transform: translateY(0); opacity: 1; }
    100% { transform: translate(40px, -260px) rotate(12deg); opacity: 0; }
}

body.event-deco-product #related-tabs .related-tabs > li.active > a::after {
    content: '';
    position: absolute;
    top: 0;
    right: 15%;
    width: 16px;
    height: 52px;
    background: var(--event-product-hanging, var(--event-tile-ornament)) no-repeat center top / contain;
    transform-origin: 50% 0;
    animation: event-deco-swing 2.4s ease-in-out 2;
    pointer-events: none;
}

/* ========================================
   CARRITO (nada se mueve: es donde se trabaja)
   ======================================== */

body.event-deco-cart .cart-summary-card > .panel:not(.js-voucher-form) > .panel-heading {
    background-image: var(--event-cart-corner-left, var(--event-menu-corner-left)), var(--event-cart-corner-right, var(--event-menu-corner-right));
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right top;
    background-size: var(--event-cart-corner-size, 38px), var(--event-cart-corner-size, 38px);
}

body.event-deco-cart .cart-empty::before {
    content: '';
    display: block;
    width: var(--event-cart-empty-size, 96px);
    height: var(--event-cart-empty-size, 96px);
    margin: 0 auto 16px;
    background: var(--event-cart-empty, var(--event-ambient-sprite-2)) no-repeat center / contain;
}

/* ========================================
   BUSCADOR (nada se mueve: se usa mucho)
   ======================================== */

/* Tarjeta de bienvenida del buscador a pantalla completa */
body.event-deco-search #fullSearch .defaultContent > .info {
    position: relative;
    background-image: var(--event-search-corner, var(--event-menu-corner-left));
    background-repeat: no-repeat;
    background-position: left top;
    background-size: var(--event-search-corner-size, 48px);
}

body.event-deco-search #fullSearch .defaultContent > .info::after {
    content: '';
    position: absolute;
    top: -36px;
    right: 22px;
    width: 40px;
    height: 48px;
    background: var(--event-search-mascot, var(--event-ambient-sprite-2)) no-repeat center / contain;
    pointer-events: none;
}

/* Sin resultados: en el buscador a pantalla completa y en el listado */
body.event-deco-search #fullSearch .defaultContent > .no-results::before,
body.event-deco-search #no-results::before {
    content: '';
    display: block;
    width: var(--event-search-empty-size, 80px);
    height: var(--event-search-empty-size, 80px);
    margin: 0 auto 12px;
    background: var(--event-search-empty, var(--event-ambient-sprite-2)) no-repeat center / contain;
}

/* En el listado el texto va alineado a la izquierda */
body.event-deco-search #no-results::before {
    margin-left: 0;
}

/* Hasta 1366px responsive.css oculta la tarjeta de bienvenida y en su lugar salen los
   accesos de promociones: el personaje se pone encima. Si se ve "sin resultados" ya
   lleva el suyo */
@media only screen and (max-width: 1366px) {
    body.event-deco-search #fullSearch .defaultContent::before {
        content: '';
        display: block;
        flex-shrink: 0;
        width: 40px;
        height: 48px;
        margin-top: 16px;
        background: var(--event-search-mascot, var(--event-ambient-sprite-2)) no-repeat center / contain;
    }

    body.event-deco-search #fullSearch .defaultContent:has(> .no-results:not(.hidden))::before {
        content: none;
    }
}

/* ========================================
   MENU
   ======================================== */

/* Franja del buscador y desplegable del menu: el resto del menu queda tapado
   por el logo y por la barra negra de secciones */
body.event-deco-menu #inputSearchForm,
body.event-deco-menu #MainMenu > .subMenu {
    background-image: var(--event-menu-corner-left), var(--event-menu-corner-right);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right top;
    background-size: var(--event-menu-corner-size, 52px), var(--event-menu-corner-size, 52px);
}

/* ========================================
   LOGO
   ======================================== */

body.event-deco-logo #MainMenu > .head > .logo::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -18px; /* fuera de la imagen: el logo puede llevar varias marcas */
    width: var(--event-logo-ornament-width, 14px);
    height: var(--event-logo-ornament-height, 44px);
    background: var(--event-logo-ornament) no-repeat center top / contain;
    transform-origin: 50% 0;
    animation: event-deco-swing 2.4s ease-in-out 2;
    pointer-events: none;
}

@keyframes event-deco-swing {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(7deg); }
    75% { transform: rotate(-7deg); }
}

/* ========================================
   AL ANADIR AL CARRITO (lo lanza js/base.js)
   ======================================== */

.event-burst {
    position: fixed;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 1040;
}

.event-burst__particle {
    position: absolute;
    left: calc(var(--event-burst-size, 26px) / -2);
    top: calc(var(--event-burst-size, 26px) / -2);
    width: var(--event-burst-size, 26px);
    height: var(--event-burst-size, 26px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0;
    animation: var(--event-burst-animation, event-burst-rise) .9s ease-out var(--delay, 0ms) both;
}

.event-burst__particle--1 { background-image: var(--event-burst-sprite-1, var(--event-ambient-sprite-1)); }
.event-burst__particle--2 { background-image: var(--event-burst-sprite-2, var(--event-ambient-sprite-2)); }
.event-burst__particle--3 { background-image: var(--event-burst-sprite-3, var(--event-ambient-sprite-3)); }

/* rise: suben desde el boton y se desvanecen */
@keyframes event-burst-rise {
    0% { opacity: 0; transform: translate(0, 0) scale(.5); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx, 0px), -110px) scale(1) rotate(var(--rot, 0deg)); }
}

/* fall: caen alrededor del boton (nieve, confeti...) */
@keyframes event-burst-fall {
    0% { opacity: 0; transform: translate(calc(var(--dx, 0px) * .4), -40px) scale(.6); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx, 0px), 70px) scale(1) rotate(var(--rot, 0deg)); }
}

/* ========================================
   AMBIENTE (sprites que cruzan la pantalla una vez)
   ======================================== */

.event-ambient {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 998;
}

.event-ambient__sprite {
    position: absolute;
    top: var(--top, 30%);
    left: 0;
    width: var(--size, 40px);
    height: var(--size, 40px);
    opacity: 0;
    animation-duration: var(--duration, 4s);
    animation-delay: var(--delay, 0s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

.event-ambient__sprite > i {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.event-ambient__sprite--1 > i { background-image: var(--event-ambient-sprite-1); }
.event-ambient__sprite--2 > i { background-image: var(--event-ambient-sprite-2); }
.event-ambient__sprite--3 > i { background-image: var(--event-ambient-sprite-3); }

/* fly: cruza de izquierda a derecha ondulando, con aleteo */
.event-ambient__sprite--fly {
    animation-name: event-ambient-fly;
}

.event-ambient__sprite--fly > i {
    animation: event-ambient-flap .18s ease-in-out infinite alternate;
}

@keyframes event-ambient-fly {
    0% { opacity: 0; transform: translate(-10vw, 0); }
    10% { opacity: .9; }
    35% { transform: translate(30vw, -4vh); }
    65% { transform: translate(70vw, 3vh); }
    90% { opacity: .9; }
    100% { opacity: 0; transform: translate(110vw, -6vh); }
}

@keyframes event-ambient-flap {
    from { transform: scaleY(1); }
    to { transform: scaleY(.55); }
}

/* rise: aparece abajo, sube flotando y se desvanece */
.event-ambient__sprite--rise {
    top: auto;
    bottom: 0;
    left: var(--left, 10%);
    animation-name: event-ambient-rise;
}

@keyframes event-ambient-rise {
    0% { opacity: 0; transform: translate(0, 10vh); }
    20% { opacity: .85; }
    50% { transform: translate(2vw, -25vh); }
    80% { opacity: .85; }
    100% { opacity: 0; transform: translate(-1vw, -55vh); }
}

/* ========================================
   MOVIMIENTO REDUCIDO
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .event-ambient,
    .event-burst {
        display: none;
    }

    body.event-deco-logo #MainMenu > .head > .logo::after {
        animation: none;
    }

    body.event-deco-tiles .mosaicGroup:not(.skeleton) > .mosaicItem::after {
        transition: none;
    }

    body.event-deco-tiles #subcategoriesModal .modal-header::after {
        animation: none;
    }

    body.event-deco-product .newProductProfile .gallery-top::before {
        animation: none;
    }

    body.event-deco-product .newProductProfile .gallery-top:hover::before {
        animation: none;
        opacity: 0;
    }

    body.event-deco-product #related-tabs .related-tabs > li.active > a::after {
        animation: none;
    }
}