/* 🔵 RESETEO */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
    background: #000;
}

/* 🔥 HERO */
.hero {
    width: 100%;
    height: 100vh;

    /* El truco que evita el borde negro */
    background: url("../img/fondo1.png") repeat center center;
    background-size: 120% 120%;

    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    /* Animaciones */
    animation: lightningMove 18s linear infinite, shock 7s infinite;
}

/* 🔵 LOGO */
.hero-logo {
    width: 500px;

    /* Arranca “apagado” para que el delay tenga sentido */
    opacity: 0;

    animation:
        electricOn 1.5s ease-out forwards 2.7s,
        neon 3s ease-in-out infinite 4.2s,
        subtleShake 5s infinite 4.2s;
}

/* ----------------------------------------
   ANIMACIONES
---------------------------------------- */

/* Movimiento del fondo SIN dejar gaps */
@keyframes lightningMove {
    0% { background-position: 0 0; }
    100% { background-position: -400px -600px; }
}

/* Descarga eléctrica */
@keyframes shock {
    0%, 93% { filter: brightness(1); }
    94% { filter: brightness(2.4); }
    95% { filter: brightness(0.5); }
    96% { filter: brightness(1.8); }
    100% { filter: brightness(1); }
}

/* Activación eléctrica */
@keyframes electricOn {
    0% { opacity: 0; filter: brightness(0.2); transform: scale(0.9); }
    30% { opacity: 1; filter: brightness(3); }
    60% { opacity: 0.5; }
    80% { opacity: 1; filter: brightness(1.6); }
    100% { opacity: 1; filter: brightness(1); transform: scale(1); }
}

/* Glow tipo neon */
@keyframes neon {
    0%, 100% {
        filter: drop-shadow(0 0 4px #00baff)
                drop-shadow(0 0 12px #00baff);
    }
    50% {
        filter: drop-shadow(0 0 2px #00baff)
                drop-shadow(0 0 6px #00baff);
    }
}

/* Vibración micro */
@keyframes subtleShake {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(1px, -1px); }
}

/* 📱 RESPONSIVE */
@media (max-width: 768px) {
    .hero-logo {
        width: 70%;
    }
    .hero {
        background-size: 200% 200%;
        animation: none;
    }
}



/* ----------------------------------------------
   🔵 RESETEO BÁSICO
---------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
    background: #000;
}

/* ----------------------------------------------
   🔥 HERO (Fondo animado eléctrico)
---------------------------------------------- */
.hero {
    width: 100%;
    height: 100vh;

    /* Fondo eléctrico */
    background: url("../img/fondo1.png") repeat center center;
    background-size: 120% 120%;

    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    /* Animaciones activas */
    animation: lightningMove 14s linear infinite, shock 7s infinite;
}

/* Movimiento del fondo sin mostrar bordes */
@keyframes lightningMove {
    0% { background-position: 0 0; }
    100% { background-position: -320px -420px; }
}

/* Descarga eléctrica */
@keyframes shock {
    0%, 93% { filter: brightness(1); }
    94% { filter: brightness(2.4); }
    95% { filter: brightness(0.5); }
    96% { filter: brightness(1.8); }
    100% { filter: brightness(1); }
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,0.25) 70%,
        rgba(0,0,0,0.45) 100%
    );
    pointer-events: none;
}

/* -----------------------------------------------------
   🧭 MENÚ LATERAL (DESKTOP)
----------------------------------------------------- */

.menu {
    position: absolute;
    left: 60px;
    z-index: 3;
}

.menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Ítems */
.menu li {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    color: #ffffff;
    letter-spacing: 1px;
    cursor: pointer;

    opacity: 0;
    transform: translateX(-20px);

    animation: menuReveal 0.6s ease-out forwards;
    animation-delay: calc(var(--i) * 0.2s);
}

/* Color azul solo en símbolos */
.menu li span,
.menu li::selection {
    color: #00baff;
}

/* Hover elegante */
.menu li:hover {
    color: #00baff;
}

/* Animación de entrada */
@keyframes menuReveal {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .menu {
        display: none;
    }
}

.menu li {
    opacity: 0;
    transform: translateX(-10px);
    animation: menuIn 0.6s ease forwards;
}

.menu li:nth-child(1) { animation-delay: 1.8s; }
.menu li:nth-child(2) { animation-delay: 2.0s; }
.menu li:nth-child(3) { animation-delay: 2.2s; }
.menu li:nth-child(4) { animation-delay: 2.4s; }
.menu li:nth-child(5) { animation-delay: 2.6s; }

@keyframes menuIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.menu li:hover {
    color: #00e0ff;
    text-shadow: 0 0 8px #00e0ff;
}

/* ----------------------------------------------
   📱 MENÚ MOBILE (solo aparece en mobile)
---------------------------------------------- */

/* Botón hamburguesa */
.menu-toggle{
    position: fixed;
    top: 18px;
    right: 18px;
    width: 46px;
    height: 46px;
    display: none;              /* en desktop NO */
    border: 0;
    border-radius: 12px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    z-index: 9999;
    cursor: pointer;
}

.menu-toggle span{
    display: block;
    height: 2px;
    width: 22px;
    margin: 5px auto;
    background: #ffffff;
    transition: transform .25s ease, opacity .2s ease;
}

/* Panel menú */
.menu-mobile{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(10px);
    display: none;              /* cerrado por defecto */
    z-index: 9998;
}

.menu-mobile ul{
    list-style: none;
    padding: 110px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.menu-mobile a{
    font-family: 'Courier New', monospace;
    font-size: 20px;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 1px;
}

/* Estado activo */
.menu-mobile.active{ display: block; }

/* X animada */
.menu-toggle.active span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2){
    opacity: 0;
}
.menu-toggle.active span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
}

/* Mostrar SOLO en mobile */
@media (max-width: 768px){
    .menu-toggle{ display: block; }
    .menu{ display: none; } /* tu menú desktop se oculta */
}

.menu a{
  color: inherit;
  text-decoration: none;
  display: inline-block;
}