/* ==========================================================================
   NAVIGATION MAGIC ISLAND - FIXED BACKGROUND (CORREGIDO)
   ========================================================================== */
:root {
    --nav-bg: #1a1a1a;
    --nav-active: #d4af37;
    --nav-icon-inactive: #ffffff;
    --item-width: 70px;
    --menu-height: 70px;
}

.navigation {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    width: 360px;
    height: var(--menu-height);

    background: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* ==========================================================================
   FONDO DEL MENÚ CON MÁSCARA GIGANTE
   ========================================================================== */
.navigation::before {
    content: '';
    position: absolute;
    inset: 0;

    background: var(--nav-bg);
    border-radius: 15px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
    z-index: 0;

    mask-size: 300% 100%;
    -webkit-mask-size: 300% 100%;

    mask-image: radial-gradient(circle 40px at 50% -5px, transparent 100%, black 100%);
    -webkit-mask-image: radial-gradient(circle 40px at 50% -5px, transparent 100%, black 100%);

    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;

    mask-position: 50% 0;
    -webkit-mask-position: 50% 0;

    transition: -webkit-mask-position 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                mask-position         0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.navigation ul {
    display: flex;
    width: 350px;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
}

.navigation ul li {
    position: relative;
    list-style: none;
    width: var(--item-width);
    height: var(--menu-height);
    z-index: 2;
}

.navigation ul li a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-align: center;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    z-index: 10;
}

/* ==========================================================================
   ICONOS Y TEXTOS — ESTADO BASE
   ========================================================================== */
.navigation ul li a .icon {
    position: relative;
    display: block;
    line-height: var(--menu-height);
    font-size: 1.5em;
    text-align: center;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: var(--nav-icon-inactive);
}

.navigation ul li a .text {
    position: absolute;
    color: var(--nav-active);
    font-weight: 600;
    font-size: 0.65em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.3s;
}

/* ==========================================================================
   JERARQUÍA DE ESTADOS — ORDEN ESTRICTO
   =========================================================================
   La cascada CSS aplica estas capas en orden:
     1. Base         — todos los ítems en reposo
     2. .active      — el ítem seleccionado por JS
     3. ul:hover reset — cuando el menú es hovereado, .active que NO recibe
                        hover pierde su estado elevado (previene doble icono)
     4. :hover       — el ítem bajo el cursor SIEMPRE gana (última palabra)

   Esto garantiza que jamás habrá dos iconos flotando simultáneamente.
   ========================================================================== */

/* ── CAPA 2: Ítem activo (seleccionado por JS) ────────────────────────── */
.navigation ul li.active a .icon {
    transform: translateY(-35px);
    color: var(--nav-bg);
}

.navigation ul li.active a .text {
    opacity: 1;
    transform: translateY(10px);
}

/* ── CAPA 3: Reset — .active que NO recibe hover cuando el menú está hovered
   Si el ratón está en cualquier parte del menú y el ítem activo NO es el
   que está siendo hovered, lo bajamos inmediatamente.
   Esto elimina el estado "fantasma" de Radio flotando mientras se hoverea
   otro botón. ──────────────────────────────────────────────────────────── */
.navigation ul:hover li.active:not(:hover) a .icon {
    transform: translateY(0) !important;
    color: var(--nav-icon-inactive) !important;
}

.navigation ul:hover li.active:not(:hover) a .text {
    opacity: 0 !important;
    transform: translateY(20px) !important;
}

/* ── CAPA 4: Hover — siempre gana, esté donde esté el .active ────────── */
.navigation ul li:hover a .icon {
    transform: translateY(-35px);
    color: var(--nav-bg);
}

.navigation ul li:hover a .text {
    opacity: 1;
    transform: translateY(10px);
}

/* ==========================================================================
   INDICADOR (BURBUJA FLOTANTE)
   ========================================================================== */
.indicator {
    position: absolute;
    top: -30px;
    width: 60px;
    height: 60px;
    background: var(--nav-active);
    border-radius: 50%;
    border: none;
    margin-left: 5px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

/* Movimiento del indicador */
.navigation ul li:nth-child(1).active ~ .indicator,
.navigation ul li:nth-child(1):hover  ~ .indicator { transform: translateX(calc(var(--item-width) * 0)); }

.navigation ul li:nth-child(2).active ~ .indicator,
.navigation ul li:nth-child(2):hover  ~ .indicator { transform: translateX(calc(var(--item-width) * 1)); }

.navigation ul li:nth-child(3).active ~ .indicator,
.navigation ul li:nth-child(3):hover  ~ .indicator { transform: translateX(calc(var(--item-width) * 2)); }

.navigation ul li:nth-child(4).active ~ .indicator,
.navigation ul li:nth-child(4):hover  ~ .indicator { transform: translateX(calc(var(--item-width) * 3)); }

.navigation ul li:nth-child(5).active ~ .indicator,
.navigation ul li:nth-child(5):hover  ~ .indicator { transform: translateX(calc(var(--item-width) * 4)); }

/* ==========================================================================
   MÁSCARA ::before — POSICIÓN DEL AGUJERO
   =========================================================================
   REGLA DE PRIORIDAD: :hover SIEMPRE gana sobre .active.
   
   Técnica: las reglas :hover se declaran DESPUÉS de las .active con la
   MISMA especificidad — por tanto la cascada las aplica sobre las anteriores.
   Mientras el ratón esté sobre cualquier ítem, el agujero lo sigue a él,
   ignorando completamente dónde esté el .active.
   =========================================================================

   ── PASO 1: .active mueve el agujero (estado por defecto sin mouse) ───── */

.navigation:has(li:nth-child(1).active)::before {
    mask-position: calc(50% - 140px) 0;
    -webkit-mask-position: calc(50% - 140px) 0;
}
.navigation:has(li:nth-child(2).active)::before {
    mask-position: calc(50% - 70px) 0;
    -webkit-mask-position: calc(50% - 70px) 0;
}
.navigation:has(li:nth-child(3).active)::before {
    mask-position: 50% 0;
    -webkit-mask-position: 50% 0;
}
.navigation:has(li:nth-child(4).active)::before {
    mask-position: calc(50% + 70px) 0;
    -webkit-mask-position: calc(50% + 70px) 0;
}
.navigation:has(li:nth-child(5).active)::before {
    mask-position: calc(50% + 140px) 0;
    -webkit-mask-position: calc(50% + 140px) 0;
}

/* ── PASO 2: :hover sobreescribe .active — misma especificidad, viene después
   Cuando el ratón entra a cualquier ítem, estas reglas reemplazan las
   anteriores en la cascada. El agujero sigue al cursor, no al .active. ── */

.navigation:has(li:nth-child(1):hover)::before {
    mask-position: calc(50% - 140px) 0;
    -webkit-mask-position: calc(50% - 140px) 0;
}
.navigation:has(li:nth-child(2):hover)::before {
    mask-position: calc(50% - 70px) 0;
    -webkit-mask-position: calc(50% - 70px) 0;
}
.navigation:has(li:nth-child(3):hover)::before {
    mask-position: 50% 0;
    -webkit-mask-position: 50% 0;
}
.navigation:has(li:nth-child(4):hover)::before {
    mask-position: calc(50% + 70px) 0;
    -webkit-mask-position: calc(50% + 70px) 0;
}
.navigation:has(li:nth-child(5):hover)::before {
    mask-position: calc(50% + 140px) 0;
    -webkit-mask-position: calc(50% + 140px) 0;
}

/* ==========================================================================
   RIPPLE
   ========================================================================== */
.ripple-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    pointer-events: none;
}

.ripple {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(212, 175, 55, 0.4);
    border-radius: 50%;
    animation: ripple-anim 0.6s linear;
}

@keyframes ripple-anim {
    from { width: 0;     height: 0;     opacity: 0.6; }
    to   { width: 250px; height: 250px; opacity: 0;   }
}

/* ==========================================================================
   RESPONSIVE — Pantallas ≤ 370 px
   ========================================================================== */
@media (max-width: 370px) {
    :root {
        --item-width: 60px;
        --menu-height: 65px;
    }

    .navigation {
        width: 310px;
    }

    .navigation ul {
        width: 300px;
    }

    .navigation::before {
        mask-size: 300% 100%;
        -webkit-mask-size: 300% 100%;
    }

    .indicator {
        width: 50px;
        height: 50px;
        top: -25px;
        margin-left: 5px;
    }

    .navigation ul li.active a .icon,
    .navigation ul li:hover a .icon {
        transform: translateY(-30px);
    }

    /* Reset responsivo — mismo patrón que la versión desktop */
    .navigation ul:hover li.active:not(:hover) a .icon {
        transform: translateY(0) !important;
        color: var(--nav-icon-inactive) !important;
    }

    .navigation ul:hover li.active:not(:hover) a .text {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }

    .navigation ul li.active a .text,
    .navigation ul li:hover a .text {
        transform: translateY(8px);
    }

    /* ── Máscara responsiva: mismo orden .active → :hover ── */

    /* .active */
    .navigation:has(li:nth-child(1).active)::before { mask-position: calc(50% - 120px) 0; -webkit-mask-position: calc(50% - 120px) 0; }
    .navigation:has(li:nth-child(2).active)::before { mask-position: calc(50% - 60px)  0; -webkit-mask-position: calc(50% - 60px)  0; }
    .navigation:has(li:nth-child(3).active)::before { mask-position: 50% 0;               -webkit-mask-position: 50% 0;               }
    .navigation:has(li:nth-child(4).active)::before { mask-position: calc(50% + 60px)  0; -webkit-mask-position: calc(50% + 60px)  0; }
    .navigation:has(li:nth-child(5).active)::before { mask-position: calc(50% + 120px) 0; -webkit-mask-position: calc(50% + 120px) 0; }

    /* :hover — viene después, por tanto sobreescribe .active */
    .navigation:has(li:nth-child(1):hover)::before { mask-position: calc(50% - 120px) 0; -webkit-mask-position: calc(50% - 120px) 0; }
    .navigation:has(li:nth-child(2):hover)::before { mask-position: calc(50% - 60px)  0; -webkit-mask-position: calc(50% - 60px)  0; }
    .navigation:has(li:nth-child(3):hover)::before { mask-position: 50% 0;               -webkit-mask-position: 50% 0;               }
    .navigation:has(li:nth-child(4):hover)::before { mask-position: calc(50% + 60px)  0; -webkit-mask-position: calc(50% + 60px)  0; }
    .navigation:has(li:nth-child(5):hover)::before { mask-position: calc(50% + 120px) 0; -webkit-mask-position: calc(50% + 120px) 0; }
}