/* Eye-Candy Interactive Background Styles */

.interactive-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10;
    overflow: hidden;
    pointer-events: none; /* Allow clicks to pass through */
}

/* Main gradient background with animation */
.gradient-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(13, 13, 35, 0.95) 0%, 
        rgba(26, 26, 58, 0.9) 50%, 
        rgba(45, 27, 105, 0.85) 100%);
    transition: background 0.3s ease;
    animation: gradientShift 20s ease-in-out infinite alternate;
}

@keyframes gradientShift {
    0% {
        background: linear-gradient(135deg, 
            rgba(13, 13, 35, 0.95) 0%, 
            rgba(26, 26, 58, 0.9) 50%, 
            rgba(45, 27, 105, 0.85) 100%);
    }
    50% {
        background: linear-gradient(225deg, 
            rgba(45, 27, 105, 0.9) 0%, 
            rgba(26, 26, 58, 0.85) 50%, 
            rgba(13, 13, 35, 0.9) 100%);
    }
    100% {
        background: linear-gradient(315deg, 
            rgba(26, 26, 58, 0.9) 0%, 
            rgba(45, 27, 105, 0.85) 50%, 
            rgba(13, 13, 35, 0.95) 100%);
    }
}

/* Floating orbs container */
.orbs-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Individual floating orbs */
.floating-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    opacity: 0.6;
    transition: transform 0.3s ease, opacity 0.3s ease;
    animation: float infinite ease-in-out;
    backdrop-filter: blur(10px);
    pointer-events: all; /* Enable hover detection */
    
    /* CSS custom properties for JavaScript interaction */
    --attract-x: 0px;
    --attract-y: 0px;
    --attract-scale: 1;
    --attract-opacity: 0.6;
}

/* Apply attraction effects when attracted class is added */
.floating-orb.attracted {
    opacity: var(--attract-opacity);
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg) scale(1) 
                  translate(var(--attract-x), var(--attract-y)) scale(var(--attract-scale));
    }
    25% {
        transform: translateY(-30px) translateX(15px) rotate(90deg) scale(1.1) 
                  translate(var(--attract-x), var(--attract-y)) scale(var(--attract-scale));
    }
    50% {
        transform: translateY(-15px) translateX(-25px) rotate(180deg) scale(0.9) 
                  translate(var(--attract-x), var(--attract-y)) scale(var(--attract-scale));
    }
    75% {
        transform: translateY(-45px) translateX(10px) rotate(270deg) scale(1.05) 
                  translate(var(--attract-x), var(--attract-y)) scale(var(--attract-scale));
    }
}

/* Mouse glow effect */
.mouse-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(102, 126, 234, 0.4) 0%, 
        rgba(240, 147, 251, 0.3) 30%, 
        rgba(79, 172, 254, 0.2) 60%, 
        transparent 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(20px);
    animation: pulse 2s ease-in-out infinite;
}

/* White halo effect */
.white-halo {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.7) 0%, 
        rgba(255, 255, 255, 0.4) 30%, 
        rgba(255, 255, 255, 0.2) 60%, 
        transparent 90%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    filter: blur(15px);
}

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

/* Ripples container */
.ripples-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Ripple effect on click */
.ripple-effect {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.8);
    transform: translate(-50%, -50%);
    animation: ripple 1s ease-out forwards;
}

@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(50);
        opacity: 0;
    }
}

/* Particle system */
.particle-system {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Micro particles */
.micro-particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    opacity: 0.6;
    animation: sparkle infinite linear;
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
    pointer-events: all; /* Enable mouse interaction for particles */
}

@keyframes sparkle {
    0% {
        transform: translateY(0px) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
        transform: scale(1);
    }
    90% {
        opacity: 0.6;
        transform: scale(1.2);
    }
    100% {
        transform: translateY(-100vh) rotate(720deg) scale(0.5);
        opacity: 0;
    }
}

/* Star field */
.star-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle infinite ease-in-out;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

/* Enhanced glow effects with faster animations */
.floating-orb:nth-child(odd) {
    animation-direction: reverse;
}

.floating-orb:nth-child(3n) {
    animation-duration: 8s; /* Much faster */
}

.floating-orb:nth-child(4n) {
    animation-duration: 6s; /* Much faster */
}

.floating-orb:nth-child(5n) {
    animation-duration: 10s; /* Much faster */
}

.floating-orb:nth-child(6n) {
    animation-duration: 5s; /* Very fast */
    animation-timing-function: ease-in-out;
}

.floating-orb:nth-child(7n) {
    animation-duration: 12s;
    transform-origin: center;
}

/* Mouse hover enhancements for better interactivity */
.floating-orb:hover {
    transform: scale(3.5) !important;
    opacity: 1 !important;
    filter: blur(0px) brightness(1.5) !important;
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.8), 
                0 0 60px rgba(240, 147, 251, 0.6),
                0 0 90px rgba(79, 172, 254, 0.4);
    transition: all 0.3s ease !important;
    z-index: 9999;
    animation-play-state: paused !important; /* Pause the floating animation on hover */
}

body:hover .floating-orb {
    filter: blur(0.5px);
}

body:hover .gradient-layer {
    animation-play-state: paused;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .floating-orb {
        filter: blur(2px);
    }
    
    .mouse-glow {
        display: none; /* Hide mouse glow on mobile */
    }
    
    .micro-particle {
        animation-duration: 15s; /* Faster on mobile for performance */
    }
    
    .orbs-container .floating-orb:nth-child(n+8) {
        display: none; /* Show fewer orbs on mobile */
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .floating-orb,
    .gradient-layer,
    .mouse-glow,
    .micro-particle,
    .shooting-star {
        animation: none;
    }
    
    .floating-orb {
        opacity: 0.3;
    }
    
    .shooting-star {
        display: none;
    }
}

/* Shooting Stars System */
.shooting-stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.shooting-star {
    position: absolute;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.95) 5%,
        rgba(255, 255, 255, 0.9) 10%,
        rgba(173, 216, 230, 0.8) 20%,
        rgba(135, 206, 235, 0.6) 35%,
        rgba(100, 149, 237, 0.4) 50%,
        rgba(70, 130, 180, 0.2) 70%,
        rgba(25, 25, 112, 0.1) 85%,
        transparent 100%);
    border-radius: 50% 0% 50% 0%;
    box-shadow: 
        0 0 8px rgba(255, 255, 255, 1),
        0 0 16px rgba(255, 255, 255, 0.8),
        0 0 24px rgba(173, 216, 230, 0.6),
        0 0 32px rgba(135, 206, 235, 0.4);
    transform-origin: right center; /* Changed to right center so tail follows behind */
    will-change: transform, opacity, filter;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.shooting-star.left-direction {
    transform-origin: left center; /* Left direction uses left center */
}

.shooting-star.right-direction {
    transform-origin: right center; /* Right direction uses right center */
}

.shooting-star.left-direction {
    animation-name: shootingStarMoveLeft;
}

.shooting-star.right-direction {
    animation-name: shootingStarMoveRight;
}

/* Mouse-Follow Effects */

/* Magnetic Particles */
.magnetic-particle {
    will-change: transform, opacity;
}

/* Trailing Comet */
.trailing-comet {
    will-change: transform, opacity;
}

.comet-tail-particle {
    will-change: opacity;
}

@keyframes cometTailFade {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.3);
    }
}

/* Lightning Arcs */
.lightning-arc {
    will-change: opacity;
}

@keyframes lightningFlash {
    0% {
        opacity: 0;
        transform: rotate(var(--angle, 0deg)) scaleX(0);
    }
    20% {
        opacity: 1;
        transform: rotate(var(--angle, 0deg)) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: rotate(var(--angle, 0deg)) scaleX(1);
    }
}

/* Enhanced effects for existing elements */
.floating-orb {
    will-change: transform, opacity, filter;
    transition: filter 0.2s ease-out;
}

.star {
    will-change: transform, filter;
    transition: transform 0.1s ease-out, filter 0.1s ease-out;
}

/* Supernova Click Effects */
.supernova-container {
    z-index: 1000;
}

.supernova-flash {
    transform: translate(-50%, -50%);
}

@keyframes supernovaFlash {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    20% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

.supernova-particle {
    transform: translate(-50%, -50%);
}

@keyframes supernovaParticle {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--endX)), calc(-50% + var(--endY))) scale(0);
        opacity: 0;
    }
}

.supernova-sparkle {
    transform: translate(-50%, -50%);
}

@keyframes supernovaSparkle {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    50% {
        transform: translate(calc(-50% + var(--endX) * 0.5), calc(-50% + var(--endY) * 0.5)) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--endX)), calc(-50% + var(--endY))) scale(0);
        opacity: 0;
    }
}

.supernova-ring {
    transform: translate(-50%, -50%);
}

@keyframes supernovaRing {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
    20% {
        opacity: 1;
    }
    100% {
        width: var(--maxSize);
        height: var(--maxSize);
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Dynamic elliptic curve keyframes are generated in JavaScript */

/* Mobile optimizations for shooting stars */
@media (max-width: 768px) {
    .shooting-star {
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    }
    
    /* Even fewer shooting stars on mobile */
    .shooting-stars-container .shooting-star:nth-child(n+5) {
        display: none; /* Show only first 5 shooting stars on mobile for performance */
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .gradient-layer {
        background: rgba(0, 0, 0, 0.9);
    }
    
    .floating-orb {
        opacity: 0.8;
        filter: none;
    }
}