/* =========================================================
   MEVOY Info Loop Bar
   Variables CSS:
     --mil-bg       fondo
     --mil-color    color de texto
     --mil-speed    duración del loop (ej: 30s)
     --mil-gap      separación entre items (px)
     --mil-padding  padding vertical
     --mil-font-size, --mil-font-weight
   ========================================================= */

.mevoy-info-loop {
    --mil-bg: #111;
    --mil-color: #fff;
    --mil-speed: 30s;
    --mil-gap: 40px;
    --mil-padding: 12px;
    --mil-font-size: 16px;
    --mil-font-weight: 500;

    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: var(--mil-bg);
    color: var(--mil-color);
    padding: var(--mil-padding) 0;
    font-size: var(--mil-font-size);
    font-weight: var(--mil-font-weight);
    line-height: 1.4;
    box-sizing: border-box;
}

.mevoy-info-loop *,
.mevoy-info-loop *::before,
.mevoy-info-loop *::after {
    box-sizing: border-box;
}

/* ---------- Track & Group ---------- */
.mevoy-info-loop__track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.mevoy-info-loop__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--mil-gap);
    padding-right: var(--mil-gap);
}

/* ---------- Item ---------- */
.mevoy-info-loop__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease, transform .2s ease, opacity .2s ease;
}

.mevoy-info-loop__item--link:hover {
    opacity: .85;
    transform: translateY(-1px);
}

.mevoy-info-loop__sep {
    display: inline-block;
    flex-shrink: 0;
    opacity: .7;
    user-select: none;
    line-height: 1;
}

.mevoy-info-loop__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mevoy-info-loop__icon svg {
    display: block;
    fill: currentColor;
}

.mevoy-info-loop__img {
    display: block;
    width: auto;
    object-fit: contain;
}

.mevoy-info-loop__label {
    margin-left: 4px;
}

/* =========================================================
   ANIMACIONES
   ========================================================= */

/* ---------- Marquee horizontal (default) ---------- */
.mevoy-info-loop--marquee.mevoy-info-loop--left .mevoy-info-loop__track {
    animation: mil-scroll-left var(--mil-speed) linear infinite;
}

.mevoy-info-loop--marquee.mevoy-info-loop--right .mevoy-info-loop__track {
    animation: mil-scroll-right var(--mil-speed) linear infinite;
}

@keyframes mil-scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes mil-scroll-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* ---------- Marquee vertical ---------- */
.mevoy-info-loop--up,
.mevoy-info-loop--down {
    height: calc(var(--mil-font-size) * 2 + var(--mil-padding) * 2);
}

.mevoy-info-loop--marquee.mevoy-info-loop--up .mevoy-info-loop__track,
.mevoy-info-loop--marquee.mevoy-info-loop--down .mevoy-info-loop__track {
    flex-direction: column;
    width: 100%;
    height: max-content;
}

.mevoy-info-loop--marquee.mevoy-info-loop--up .mevoy-info-loop__group,
.mevoy-info-loop--marquee.mevoy-info-loop--down .mevoy-info-loop__group {
    flex-direction: column;
    padding-right: 0;
    padding-bottom: var(--mil-gap);
    justify-content: center;
}

.mevoy-info-loop--marquee.mevoy-info-loop--up .mevoy-info-loop__track {
    animation: mil-scroll-up var(--mil-speed) linear infinite;
}

.mevoy-info-loop--marquee.mevoy-info-loop--down .mevoy-info-loop__track {
    animation: mil-scroll-down var(--mil-speed) linear infinite;
}

@keyframes mil-scroll-up {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes mil-scroll-down {
    0%   { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

/* ---------- Slide (paso a paso) ---------- */
.mevoy-info-loop--slide .mevoy-info-loop__track {
    animation: mil-slide-step var(--mil-speed) steps(8, end) infinite;
}

@keyframes mil-slide-step {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---------- Fade (desvanecido entre items) ---------- */
.mevoy-info-loop--fade {
    text-align: center;
}

.mevoy-info-loop--fade .mevoy-info-loop__track {
    display: block;
    width: 100%;
    position: relative;
    min-height: calc(var(--mil-font-size) * 1.6);
}

.mevoy-info-loop--fade .mevoy-info-loop__group {
    position: absolute;
    inset: 0;
    justify-content: center;
    padding-right: 0;
    opacity: 0;
    animation: mil-fade var(--mil-speed) ease-in-out infinite;
}

.mevoy-info-loop--fade .mevoy-info-loop__group:nth-child(2) {
    animation-delay: calc(var(--mil-speed) / -2);
}

@keyframes mil-fade {
    0%, 45%, 100% { opacity: 0; }
    5%, 40%       { opacity: 1; }
}

/* ---------- Bounce ---------- */
.mevoy-info-loop--bounce.mevoy-info-loop--left .mevoy-info-loop__track,
.mevoy-info-loop--bounce.mevoy-info-loop--right .mevoy-info-loop__track {
    animation: mil-bounce-x var(--mil-speed) cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

@keyframes mil-bounce-x {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(-50% + 100vw - 100%)); }
}

/* ---------- Pausa en hover ---------- */
.mevoy-info-loop[data-pause="yes"]:hover .mevoy-info-loop__track,
.mevoy-info-loop[data-pause="yes"]:hover .mevoy-info-loop__group {
    animation-play-state: paused;
}

/* ---------- Accesibilidad: reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .mevoy-info-loop__track,
    .mevoy-info-loop__group {
        animation-duration: 90s !important;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .mevoy-info-loop {
        --mil-gap: calc(var(--mil-gap, 40px) * .6);
        --mil-font-size: calc(var(--mil-font-size, 16px) * .9);
    }
}