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

@keyframes flotar {
  0%   { transform: translateY(0); }      
  50%  { transform: translateY(-25px); }  
  100% { transform: translateY(0); }      
}

@keyframes entradaizquierda {
  from { 
    opacity: 0;
    margin-left: -100%;
  }
    to {
        opacity: 1;
        margin-left: 0;
    }
}

@keyframes entradaderecha {
  from { 
    opacity: 0;
    margin-right: -100%;
  }
    to {
        opacity: 1;
        margin-right: 0;
    }
}

/* APLICACIÓN AUTOMÁTICA */

.redes a:nth-child(odd) {
  animation: entradaizquierda 0.6s ease forwards;
  animation-delay: calc(var(--i) * 0.5s);
}

.redes a:nth-child(even) {
  animation: entradaderecha 0.6s ease forwards;
  animation-delay: calc(var(--i) * 0.5s);
}


/*-----------GENERAL------------------- */

body {
    background-color: #1A1A1A;
    display: grid;
    place-items: center;
    height: 100vh;
    cursor: url('Imagenes/esfera4.png'), auto;
}

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

/* CONTENEDOR DE ESTRELLAS (PANTALLA COMPLETA) */
.grupo-estrellas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ESTRELLA INDIVIDUAL */
.estrella {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255,255,120,1), rgba(255,255,120,0));
    border-radius: 50%;
    opacity: 0;
    animation: brillo 3s ease-in-out infinite;
}

/* POSICIONES GRUPO 1 */
.grupo1 .estrella:nth-child(1) { top: 10%; left: 20%; }
.grupo1 .estrella:nth-child(2) { top: 30%; left: 70%; }
.grupo1 .estrella:nth-child(3) { top: 50%; left: 40%; }
.grupo1 .estrella:nth-child(4) { top: 80%; left: 10%; }
.grupo1 .estrella:nth-child(5) { top: 60%; left: 90%; }

/* POSICIONES GRUPO 2 */
.grupo2 .estrella:nth-child(1) { top: 15%; left: 50%; }
.grupo2 .estrella:nth-child(2) { top: 75%; left: 30%; }
.grupo2 .estrella:nth-child(3) { top: 40%; left: 85%; }
.grupo2 .estrella:nth-child(4) { top: 25%; left: 10%; }
.grupo2 .estrella:nth-child(5) { top: 90%; left: 60%; }

/* GRUPO 1 — brilla primero */
.grupo1 .estrella {
    animation-delay: calc((var(--i, 1)) * 0.4s);
}

/* GRUPO 2 — brilla después */
.grupo2 .estrella {
    animation-delay: calc((var(--i, 1)) * 0.4s + 2s);
}

/* ANIMACIÓN SOLO OPACIDAD */
@keyframes brillo {
    0%   { opacity: 0; }
    40%  { opacity: 1; }
    60%  { opacity: 0.4; }
    100% { opacity: 0; }
}

/* ⭐ ESTRELLAS EXTRA GRUPO 1 (fuera del centro) */
.grupo1 .estrella:nth-child(6)  { top: 5%;  left: 10%; }
.grupo1 .estrella:nth-child(7)  { top: 8%;  left: 80%; }
.grupo1 .estrella:nth-child(8)  { top: 15%; left: 5%; }
.grupo1 .estrella:nth-child(9)  { top: 20%; left: 95%; }
.grupo1 .estrella:nth-child(10) { top: 85%; left: 5%; }
.grupo1 .estrella:nth-child(11) { top: 90%; left: 20%; }
.grupo1 .estrella:nth-child(12) { top: 92%; left: 80%; }
.grupo1 .estrella:nth-child(13) { top: 70%; left: 5%; }
.grupo1 .estrella:nth-child(14) { top: 5%;  left: 50%; }
.grupo1 .estrella:nth-child(15) { top: 95%; left: 50%; }

/* ⭐ ESTRELLAS EXTRA GRUPO 2 (fuera del centro) */
.grupo2 .estrella:nth-child(6)  { top: 6%;  left: 30%; }
.grupo2 .estrella:nth-child(7)  { top: 12%; left: 90%; }
.grupo2 .estrella:nth-child(8)  { top: 18%; left: 8%; }
.grupo2 .estrella:nth-child(9)  { top: 25%; left: 95%; }
.grupo2 .estrella:nth-child(10) { top: 88%; left: 10%; }
.grupo2 .estrella:nth-child(11) { top: 93%; left: 35%; }
.grupo2 .estrella:nth-child(12) { top: 94%; left: 75%; }
.grupo2 .estrella:nth-child(13) { top: 72%; left: 95%; }
.grupo2 .estrella:nth-child(14) { top: 7%;  left: 60%; }
.grupo2 .estrella:nth-child(15) { top: 96%; left: 60%; }

/* ⭐ RELLENO DEL HUECO – GRUPO 1 */
.grupo1 .estrella:nth-child(16) { top: 38%; left: 22%; }
.grupo1 .estrella:nth-child(17) { top: 46%; left: 18%; }
.grupo1 .estrella:nth-child(18) { top: 53%; left: 28%; }

/* ⭐ RELLENO DEL HUECO – GRUPO 2 */
.grupo2 .estrella:nth-child(16) { top: 40%; left: 25%; }
.grupo2 .estrella:nth-child(17) { top: 48%; left: 15%; }
.grupo2 .estrella:nth-child(18) { top: 55%; left: 30%; }

/* ⭐ ANIMACIÓN */
@keyframes estrellaFugaz {
    0% {
        opacity: 0;
        transform: translate(-50px, -50px) scale(0.5);
    }

    5% {
        opacity: 1;
    }

    20% {
        opacity: 1;
        transform: translate(600px, 400px) scale(1);
    }

    25% {
        opacity: 0;
        transform: translate(700px, 450px) scale(0.8);
    }

    100% {
        opacity: 0;
        transform: translate(-50px, -50px) scale(0.5);
    }
}

.estrella-fugaz {
    position: fixed;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px 4px rgba(255,255,200,0.9);
    opacity: 0;
    pointer-events: none;
}

.f1 {
    animation: fugaz1 2s linear infinite;
    animation-delay: 1s;
}

@keyframes fugaz1 {
    0%   { opacity: 0; transform: translate(1vw, -50vh); }
    10%  { opacity: 1; }
    60%  { opacity: 1; transform: translate(1vw, 50vh); }
    70%  { opacity: 0; }
    100% { opacity: 0; transform: translate(1vw, 90vh); }
}

.f2 {
    animation: fugaz2 7s linear infinite;
    animation-delay: 3s;
}

@keyframes fugaz2 {
    0%   { opacity: 0; transform: translate(-50vw, -50vh); }
    10%  { opacity: 1; }
    60%  { opacity: 1; transform: translate(150vw, 80vh); }
    70%  { opacity: 0; }
    100% { opacity: 0; transform: translate(180vw, 120vh); }
}

.f3 {
    animation: fugaz3 8s linear infinite;
    animation-delay: 6s;
}

@keyframes fugaz3 {
    0%   { opacity: 0; transform: translate(150vw, 90vh); }
    10%  { opacity: 1; }
    60%  { opacity: 1; transform: translate(-50vw, -20vh); }
    70%  { opacity: 0; }
    100% { opacity: 0; transform: translate(-80vw, -20vh); }
}

.f4 {
    animation: fugaz4 5s linear infinite;
    animation-delay: 1s;
}

@keyframes fugaz4 {
    0%   { opacity: 0; transform: translate(-150vw, 120vh); }
    10%  { opacity: 1; }
    60%  { opacity: 1; transform: translate(50vw, -50vh); }
    70%  { opacity: 0; }
    100% { opacity: 0; transform: translate(150vw, -120vh); }
}

.f5 {
    animation: fugaz5 5s linear infinite;
    animation-delay:12s;
}

@keyframes fugaz5 {
    0%   { opacity: 0; transform: translate(150vw, -100vh); }
    10%  { opacity: 1; }
    60%  { opacity: 1; transform: translate(-50vw, 40vh); }
    70%  { opacity: 0; }
    100% { opacity: 0; transform: translate(-80vw, 120vh); }
}

.nave-saiyan {
    position: fixed;
    opacity: 0;
    animation: saiyanFlyPro 20s linear infinite;
}

.nave-saiyan:hover {
    animation-play-state: paused;
}


@keyframes saiyanFlyPro {

    /* 0% → 25% = 5s de vuelo */
    0% {
        transform: translate(130vw, -50vh) rotateY(180deg) scale(0.2);
        opacity: 1;
    }

    12% {
        transform: translate(60vw, -20vh) rotateY(180deg) scale(0.6);
        opacity: 1;
    }

    25% {
        transform: translate(-40vw, 25vh) rotateY(180deg) scale(1.2);
        opacity: 1;
    }

    /* 25% → 100% = pausa */
    26% {
        opacity: 0;
        transform: translate(-80vw, 50vh) rotateY(180deg) scale(3);
    }

    100% {
        opacity: 0;
        transform: translate(-80vw, 50vh) rotateY(180deg) scale(3);
    }
}

/*-----------REDES------------------- */

.redes a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  padding-left: 40px;
  width: 500px;
  height: 120px;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 70px;
  color: white;
  text-decoration: none;
  margin: 20px auto;
  opacity: 0;
  position: relative;
  z-index: 10;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative; z-index: 99999;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.redes a:hover {
  transform: scale(1.08);
  transition-duration: 600ms;
}

.twitch {
    background-color: #9146FF;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.twitch:hover {
    box-shadow: 0 0 50px rgba(255, 169, 10, 0.8);
    transition-duration: 600ms;
}

.yt {
    background-color: #FF0000;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.yt:hover {
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.8);
    transition-duration: 600ms;
}

.ig {
    background-color: #e130d5;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.ig:hover {
    box-shadow: 0 0 50px rgba(30, 255, 87, 0.8);
    transition-duration: 600ms;
}

.webs {
    background-color: #ff9040;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.webs:hover {
    box-shadow: 0 0 50px rgb(240, 240, 240);
    transition-duration: 600ms;
}

.discord {
    background-color: #5865F2;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.discord:hover {
    box-shadow: 0 0 50px rgb(253, 253, 3);
    transition-duration: 600ms;
}

.tiktok {
    background-color: #000000;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.tiktok:hover {
    box-shadow: 0 0 50px rgba(255, 0, 217, 0.8);
    transition-duration: 600ms;
}

.logos {
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
}

.modo-ki {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: radial-gradient(circle, #00d0ff, #0066ff);
    box-shadow: 0 0 15px #00d0ff;
    cursor: pointer;
    z-index: 999;
}

body.ki-azul {
    box-shadow: inset 0 0 200px rgba(0, 180, 255, 0.4);
}

body.ki-rojo {
    box-shadow: inset 0 0 200px rgba(255, 40, 40, 0.4);
}

body.ki-amarillo {
    box-shadow: inset 0 0 200px rgba(255, 255, 0, 0.4);
}

.footer {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    pointer-events: none;
}

/*-----------MÓVIL------------------- */

@media (max-width: 600px) {

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

    body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: url('Imagenes/esfera4.png'), auto;
    }

    .redes {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .redes a {
        width: 85%;
        height: 80px;
        font-size: 32px;
        padding-left: 20px;
        gap: 20px;
        margin: 10px 0;
    }

    .logos {
        width: 35px;
        height: 35px;
    }
}