/* Space-themed Portfolio Hub - Particle System Styles */

/* Particle Field Container */
.particle-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

/* Base Particle Styles */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Particle Types */
.particle-small {
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

.particle-medium {
    width: 4px;
    height: 4px;
    background: rgba(0, 212, 255, 0.7);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.particle-large {
    width: 6px;
    height: 6px;
    background: rgba(139, 92, 246, 0.6);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

.particle-energy {
    width: 3px;
    height: 3px;
    background: rgba(236, 72, 153, 0.8);
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
}

.particle-cosmic {
    width: 5px;
    height: 5px;
    background: rgba(16, 185, 129, 0.7);
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.5);
}

/* Particle Movement Animations */
@keyframes particle-drift-1 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(-100px, -100px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes particle-drift-2 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(100px, -120px) rotate(-360deg);
        opacity: 0;
    }
}

@keyframes particle-drift-3 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(-80px, 100px) rotate(180deg);
        opacity: 0;
    }
}

@keyframes particle-drift-4 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(120px, 80px) rotate(-180deg);
        opacity: 0;
    }
}

@keyframes particle-vertical-drift {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes particle-horizontal-drift {
    0% {
        transform: translateX(-100px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(100vw) rotate(-360deg);
        opacity: 0;
    }
}

@keyframes particle-spiral {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: scale(1);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(-50px, -50px) rotate(720deg) scale(0);
        opacity: 0;
    }
}

@keyframes particle-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
    }
}

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

/* Animation Classes */
.particle-animate-1 {
    animation: particle-drift-1 8s linear infinite;
}

.particle-animate-2 {
    animation: particle-drift-2 10s linear infinite;
}

.particle-animate-3 {
    animation: particle-drift-3 12s linear infinite;
}

.particle-animate-4 {
    animation: particle-drift-4 9s linear infinite;
}

.particle-animate-vertical {
    animation: particle-vertical-drift 15s linear infinite;
}

.particle-animate-horizontal {
    animation: particle-horizontal-drift 20s linear infinite;
}

.particle-animate-spiral {
    animation: particle-spiral 6s ease-in-out infinite;
}

.particle-animate-pulse {
    animation: particle-pulse 3s ease-in-out infinite;
}

.particle-animate-twinkle {
    animation: particle-twinkle 4s ease-in-out infinite;
}

/* Cursor-Responsive Particles */
.cursor-particle {
    position: fixed;
    width: 4px;
    height: 4px;
    background: rgba(0, 212, 255, 0.8);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: screen;
    animation: cursor-particle-fade 1s ease-out forwards;
}

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

/* Energy Stream Effects */
.energy-stream {
    position: absolute;
    width: 2px;
    height: 100px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(0, 212, 255, 0.8),
        rgba(0, 212, 255, 0.4),
        transparent
    );
    animation: energy-stream-flow 3s linear infinite;
}

@keyframes energy-stream-flow {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* Constellation Patterns */
.constellation {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.3;
}

.constellation-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.constellation-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform-origin: left center;
}

/* Nebula Particles */
.nebula-particle {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    mix-blend-mode: screen;
    animation: nebula-drift 20s ease-in-out infinite;
}

.nebula-particle-1 {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
}

.nebula-particle-2 {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.2) 0%, transparent 70%);
}

.nebula-particle-3 {
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, transparent 70%);
}

@keyframes nebula-drift {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(50px, -30px) rotate(90deg);
    }
    50% {
        transform: translate(-20px, 40px) rotate(180deg);
    }
    75% {
        transform: translate(-40px, -20px) rotate(270deg);
    }
}

/* Quantum Particles */
.quantum-particle {
    position: absolute;
    width: 1px;
    height: 1px;
    background: rgba(0, 212, 255, 1);
    box-shadow: 
        0 0 6px rgba(0, 212, 255, 0.8),
        0 0 12px rgba(0, 212, 255, 0.6),
        0 0 18px rgba(0, 212, 255, 0.4);
    animation: quantum-fluctuation 2s ease-in-out infinite;
}

@keyframes quantum-fluctuation {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    25% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(2);
        opacity: 0.5;
    }
    75% {
        transform: scale(0.5);
        opacity: 0.8;
    }
}

/* Particle Interaction Effects */
.particle-interaction {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 212, 255, 0.6);
    border-radius: 50%;
    animation: interaction-ripple 1s ease-out forwards;
}

@keyframes interaction-ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* Warp Speed Effect */
.warp-particle {
    position: absolute;
    width: 2px;
    height: 20px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );
    animation: warp-speed 0.5s linear infinite;
}

@keyframes warp-speed {
    0% {
        transform: translateY(0) scaleY(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) scaleY(3);
        opacity: 0;
    }
}

/* Particle Density Controls */
.particle-density-low .particle {
    animation-duration: 12s;
}

.particle-density-medium .particle {
    animation-duration: 8s;
}

.particle-density-high .particle {
    animation-duration: 4s;
}

/* Performance Optimizations */
.particle-container {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.particle-gpu-accelerated {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Responsive Particle Adjustments */
@media (max-width: 768px) {
    .particle-field {
        opacity: 0.7;
    }
    
    .particle {
        animation-duration: 10s;
    }
    
    .particle-large,
    .particle-cosmic {
        display: none;
    }
}

@media (max-width: 480px) {
    .particle-field {
        opacity: 0.5;
    }
    
    .particle-medium {
        display: none;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .particle-field {
        display: none;
    }
    
    .particle,
    .energy-stream,
    .nebula-particle,
    .quantum-particle {
        animation: none;
    }
}