/**
 * Space Theme - Efectos y Animaciones Espaciales
 */

/* Fondo espacial animado */
.space-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #090A0F 0%, #0D1117 50%, #161B22 100%);
    overflow: hidden;
    z-index: -1;
    pointer-events: none !important;
}

.space-background * {
    pointer-events: none !important;
}

/* Contenedor de contenido principal */
.page-content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

/* Fix para dropdowns - asegurar que aparezcan encima de todo */
.dropdown-menu,
[class*="dropdown"],
[id*="dropdown"],
[id*="Dropdown"],
.z-50 {
    z-index: 9999 !important;
}

/* Header siempre encima */
.site-header,
header {
    z-index: 1000 !important;
}

/* Dropdowns dentro del header */
.site-header [class*="dropdown"],
.site-header [id*="dropdown"],
header [class*="dropdown"],
header [id*="dropdown"] {
    z-index: 9999 !important;
}

/* Estrellas parpadeantes - 3 capas */
.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
        100px 200px white, 200px 100px white, 300px 300px white,
        400px 150px white, 500px 250px white, 600px 100px white,
        700px 300px white, 800px 200px white, 900px 150px white,
        1000px 250px white, 1100px 100px white, 1200px 300px white,
        1300px 200px white, 1400px 150px white, 1500px 250px white,
        50px 50px white, 150px 350px white, 250px 50px white,
        350px 250px white, 450px 350px white, 550px 50px white,
        650px 250px white, 750px 350px white, 850px 50px white,
        950px 250px white, 1050px 350px white, 1150px 50px white,
        1250px 250px white, 1350px 350px white, 1450px 50px white,
        75px 125px white, 175px 275px white, 275px 125px white,
        375px 275px white, 475px 125px white, 575px 275px white,
        675px 125px white, 775px 275px white, 875px 125px white,
        975px 275px white, 1075px 125px white, 1175px 275px white,
        1275px 125px white, 1375px 275px white, 1475px 125px white,
        125px 75px white, 225px 225px white, 325px 75px white,
        425px 225px white, 525px 75px white, 625px 225px white,
        725px 75px white, 825px 225px white, 925px 75px white,
        1025px 225px white, 1125px 75px white, 1225px 225px white,
        1325px 75px white, 1425px 225px white, 1525px 75px white;
    animation: twinkle 3s infinite;
}

.stars::after {
    width: 1px;
    height: 1px;
    animation-delay: 1.5s;
    box-shadow: 
        120px 220px white, 220px 120px white, 320px 320px white,
        420px 170px white, 520px 270px white, 620px 120px white,
        720px 320px white, 820px 220px white, 920px 170px white,
        1020px 270px white, 1120px 120px white, 1220px 320px white,
        1320px 220px white, 1420px 170px white, 1520px 270px white,
        70px 70px white, 170px 370px white, 270px 70px white,
        370px 270px white, 470px 370px white, 570px 70px white,
        670px 270px white, 770px 370px white, 870px 70px white,
        970px 270px white, 1070px 370px white, 1170px 70px white,
        1270px 270px white, 1370px 370px white, 1470px 70px white;
}

@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Estrellas que destellan como estrellas lejanas */
.sparkle-star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    animation: sparkle-distant 2s ease-in-out infinite;
}

.sparkle-star::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.8);
    animation: sparkle-glow 2s ease-in-out infinite;
}

@keyframes sparkle-distant {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.6;
    }
    50% { 
        transform: scale(1.5);
        opacity: 1;
    }
}

@keyframes sparkle-glow {
    0%, 100% { 
        box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.5);
    }
    25% {
        box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.9);
    }
    50% { 
        box-shadow: 0 0 15px 5px rgba(255, 255, 255, 1);
    }
    75% {
        box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.7);
    }
}

/* Diferentes velocidades de destello */
.sparkle-star:nth-child(1) { top: 15%; left: 10%; animation-duration: 2.5s; }
.sparkle-star:nth-child(2) { top: 25%; left: 85%; animation-duration: 3s; animation-delay: 0.5s; }
.sparkle-star:nth-child(3) { top: 45%; left: 20%; animation-duration: 2s; animation-delay: 1s; }
.sparkle-star:nth-child(4) { top: 60%; left: 70%; animation-duration: 3.5s; animation-delay: 0.3s; }
.sparkle-star:nth-child(5) { top: 80%; left: 40%; animation-duration: 2.8s; animation-delay: 0.8s; }
.sparkle-star:nth-child(6) { top: 35%; left: 55%; animation-duration: 2.2s; animation-delay: 1.2s; }
.sparkle-star:nth-child(7) { top: 70%; left: 15%; animation-duration: 3.2s; animation-delay: 0.6s; }
.sparkle-star:nth-child(8) { top: 20%; left: 45%; animation-duration: 2.6s; animation-delay: 1.5s; }
.sparkle-star:nth-child(9) { top: 55%; left: 90%; animation-duration: 2.4s; animation-delay: 0.2s; }
.sparkle-star:nth-child(10) { top: 85%; left: 75%; animation-duration: 3s; animation-delay: 1s; }
.sparkle-star:nth-child(11) { top: 10%; left: 60%; animation-duration: 2.7s; animation-delay: 0.4s; }
.sparkle-star:nth-child(12) { top: 40%; left: 5%; animation-duration: 3.3s; animation-delay: 0.9s; }
.sparkle-star:nth-child(13) { top: 75%; left: 50%; animation-duration: 2.1s; animation-delay: 1.3s; }
.sparkle-star:nth-child(14) { top: 30%; left: 30%; animation-duration: 2.9s; animation-delay: 0.7s; }
.sparkle-star:nth-child(15) { top: 65%; left: 95%; animation-duration: 2.3s; animation-delay: 1.1s; }

/* Estrellas fugaces */
.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
    animation: shoot 3s linear infinite;
    opacity: 0;
}

.shooting-star:nth-child(1) {
    top: 10%;
    left: 20%;
    animation-delay: 0s;
}

.shooting-star:nth-child(2) {
    top: 30%;
    left: 60%;
    animation-delay: 2s;
}

.shooting-star:nth-child(3) {
    top: 50%;
    left: 80%;
    animation-delay: 4s;
}

.shooting-star:nth-child(4) {
    top: 70%;
    left: 40%;
    animation-delay: 6s;
}

@keyframes shoot {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translateX(-300px) translateY(300px);
        opacity: 0;
    }
}

/* Planetas - DESACTIVADOS */
.planet {
    display: none;
}

/* Cometas verdes pequeños - Solo 3 con trayectorias curvas */
.green-comet {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #39ff14;
    border-radius: 50%;
    box-shadow: 
        0 0 8px #39ff14,
        0 0 15px #39ff14,
        0 0 30px rgba(57, 255, 20, 0.6);
    z-index: 5;
}

.green-comet::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(270deg, #39ff14, rgba(57, 255, 20, 0.4), transparent);
    border-radius: 3px;
}

/* Cometa 1 - Diagonal desde arriba-derecha */
.green-comet-1 {
    top: 5%;
    animation: green-comet-diagonal-1 8s ease-in-out infinite;
    animation-delay: 0s;
}

/* Cometa 2 - Curva desde la derecha */
.green-comet-2 {
    top: 40%;
    animation: green-comet-curve 10s ease-in-out infinite;
    animation-delay: 6s;
}

/* Cometa 3 - Diagonal desde abajo-derecha */
.green-comet-3 {
    top: 70%;
    animation: green-comet-diagonal-2 9s ease-in-out infinite;
    animation-delay: 12s;
}

/* Ocultar cometas 4 y 5 */
.green-comet-4, .green-comet-5 {
    display: none;
}

@keyframes green-comet-diagonal-1 {
    0% {
        left: 105%;
        top: 5%;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: -10%;
        top: 60%;
        opacity: 0;
    }
}

@keyframes green-comet-curve {
    0% {
        left: 105%;
        top: 40%;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    50% {
        left: 50%;
        top: 25%;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: -10%;
        top: 50%;
        opacity: 0;
    }
}

@keyframes green-comet-diagonal-2 {
    0% {
        left: 105%;
        top: 70%;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: -10%;
        top: 30%;
        opacity: 0;
    }
}

/* Nebulosa de fondo */
.nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
    animation: pulse-nebula 8s ease-in-out infinite;
}

.nebula-1 {
    width: 400px;
    height: 400px;
    top: 10%;
    left: 10%;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.4), transparent);
    animation-delay: 0s;
}

.nebula-2 {
    width: 500px;
    height: 500px;
    bottom: 10%;
    right: 10%;
    background: radial-gradient(circle, rgba(0, 191, 255, 0.4), transparent);
    animation-delay: 4s;
}

.nebula-3 {
    width: 350px;
    height: 350px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 20, 147, 0.3), transparent);
    animation-delay: 2s;
}

@keyframes pulse-nebula {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
}

/* Partículas flotantes - MEJORADAS */
.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: float-particle 15s linear infinite;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.particle:nth-child(3n) {
    animation-duration: 18s;
    animation-name: float-particle-alt;
}

.particle:nth-child(5n) {
    animation-duration: 22s;
    animation-name: float-particle-diagonal;
}

.particle:nth-child(7n) {
    animation-duration: 25s;
}

@keyframes float-particle {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(50px);
        opacity: 0;
    }
}

@keyframes float-particle-alt {
    0% {
        transform: translateY(100vh) translateX(0) scale(1);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    50% {
        transform: translateY(50vh) translateX(-30px) scale(1.2);
    }
    95% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-50px) translateX(-60px) scale(0.8);
        opacity: 0;
    }
}

@keyframes float-particle-diagonal {
    0% {
        transform: translate(0, 100vh);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translate(100px, -100px);
        opacity: 0;
    }
}

/* Efecto de brillo en cards */
.space-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.space-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transform: rotate(45deg);
    transition: all 0.5s ease;
}

.space-card:hover::before {
    animation: shine 1.5s ease-in-out;
}

@keyframes shine {
    0% {
        top: -50%;
        left: -50%;
    }
    100% {
        top: 150%;
        left: 150%;
    }
}

/* Efecto de pulsación en botones */
.space-btn {
    position: relative;
    overflow: hidden;
    animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
    }
    50% {
        box-shadow: 0 0 40px rgba(57, 255, 20, 0.8), 0 0 60px rgba(57, 255, 20, 0.4);
    }
}

/* Anillos orbitales - DESACTIVADOS */
.orbital-ring {
    display: none;
}

/* Efecto de texto espacial */
.space-text {
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(57, 255, 20, 0.6),
        0 0 30px rgba(57, 255, 20, 0.4);
    animation: text-glow 2s ease-in-out infinite;
}

@keyframes text-glow {
    0%, 100% {
        text-shadow: 
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 20px rgba(57, 255, 20, 0.6),
            0 0 30px rgba(57, 255, 20, 0.4);
    }
    50% {
        text-shadow: 
            0 0 15px rgba(255, 255, 255, 1),
            0 0 30px rgba(57, 255, 20, 0.8),
            0 0 45px rgba(57, 255, 20, 0.6);
    }
}

/* Cometas */
.comet {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 15px 3px rgba(255, 255, 255, 0.9);
    animation: comet-trail 8s linear infinite;
    opacity: 0;
}

.comet::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, white, transparent);
    transform-origin: 0 50%;
    transform: rotate(-45deg);
}

.comet:nth-child(1) {
    top: 20%;
    left: 100%;
    animation-delay: 1s;
}

.comet:nth-child(2) {
    top: 40%;
    left: 100%;
    animation-delay: 4s;
}

.comet:nth-child(3) {
    top: 60%;
    left: 100%;
    animation-delay: 7s;
}

@keyframes comet-trail {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(-1500px) translateY(500px);
        opacity: 0;
    }
}

/* Efecto de aurora boreal */
.aurora {
    position: absolute;
    width: 100%;
    height: 300px;
    top: 0;
    left: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 255, 157, 0.1),
        rgba(138, 43, 226, 0.1),
        transparent
    );
    animation: aurora-wave 10s ease-in-out infinite;
    opacity: 0.3;
}

@keyframes aurora-wave {
    0%, 100% {
        transform: skewX(0deg);
        opacity: 0.3;
    }
    50% {
        transform: skewX(5deg);
        opacity: 0.5;
    }
}

/* Animación de entrada para elementos */
.space-fade-in {
    animation: fadeInSpace 1s ease-out;
}

@keyframes fadeInSpace {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Efecto hover para productos */
.space-product-hover {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.space-product-hover:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(57, 255, 20, 0.3);
}

/* Estrellas de fondo adicionales (más pequeñas) */
.star-field {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, white, transparent),
        radial-gradient(2px 2px at 60px 70px, white, transparent),
        radial-gradient(1px 1px at 50px 50px, white, transparent),
        radial-gradient(1px 1px at 130px 80px, white, transparent),
        radial-gradient(2px 2px at 90px 10px, white, transparent);
    background-size: 200px 200px;
    background-repeat: repeat;
    animation: star-field-move 200s linear infinite;
}

@keyframes star-field-move {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -200px 200px;
    }
}

/* Interactive cursor/touch effects */
.cursor-sparkle {
    position: fixed;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: sparkle-fade 0.8s ease-out forwards;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
}

@keyframes sparkle-fade {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

.cursor-star {
    position: fixed;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 9999;
    animation: star-burst 1s ease-out forwards;
}

.cursor-star::before,
.cursor-star::after {
    content: '✦';
    position: absolute;
    font-size: 20px;
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.cursor-star::after {
    content: '✨';
    font-size: 16px;
    left: 10px;
    top: 5px;
}

@keyframes star-burst {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(0.5) rotate(360deg) translateY(-50px);
        opacity: 0;
    }
}

.particle-burst {
    position: fixed;
    width: 4px;
    height: 4px;
    background: var(--accent, #39ff14);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 0 8px 2px var(--accent, #39ff14);
    animation: particle-explode 1s ease-out forwards;
}

@keyframes particle-explode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

.cursor-trail {
    position: fixed;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(57, 255, 20, 0.8), transparent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    animation: trail-fade 0.6s ease-out forwards;
}

@keyframes trail-fade {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.touch-ripple {
    position: fixed;
    border: 2px solid rgba(57, 255, 20, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: ripple-expand 1s ease-out forwards;
}

@keyframes ripple-expand {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0;
    }
}

.magic-dust {
    position: fixed;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    animation: dust-float 2s ease-out forwards;
}

@keyframes dust-float {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) scale(0);
        opacity: 0;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .planet {
        transform: scale(0.6);
    }
    
    .nebula {
        transform: scale(0.7);
    }
    
    .orbital-ring {
        display: none;
    }
    
    .cursor-sparkle,
    .cursor-star {
        width: 12px;
        height: 12px;
    }
}