/* Stars Background */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars::before,
.stars::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: calc(100% + 20px);
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 50px 160px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 160px 120px, #fff, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: stars 4s linear infinite;
}

.stars::after {
    background-size: 400px 400px;
    animation-delay: -2s;
    opacity: 0.5;
}

@keyframes stars {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-200px);
    }
}

/* Shooting Stars */
@keyframes shoot {
    0% {
        transform: translate(0, 0) rotate(-45deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: 1;
    }
    100% {
        transform: translate(300px, 300px) rotate(-45deg);
        opacity: 0;
    }
}

.shooting-star {
    position: absolute;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, #fff, transparent);
    animation: shoot 3s ease-in-out infinite;
}

.shooting-star::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 20px #fff, 0 0 40px var(--neon-blue);
    animation: twinkle 1s ease-in-out infinite;
}

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

/* Floating Elements Animation */
.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hex-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        60deg,
        var(--grid-color),
        var(--grid-color) 1px,
        transparent 1px,
        transparent 60px
    );
    opacity: 0.2;
    animation: hexFloat 20s linear infinite;
}

@keyframes hexFloat {
    0% {
        transform: translateY(0) rotate(0);
    }
    100% {
        transform: translateY(-100px) rotate(10deg);
    }
}

/* Particle Field */
.particle-field {
    position: absolute;
    width: 100%;
    height: 100%;
    perspective: 1000px;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--neon-blue);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--neon-blue);
    animation: particleFloat 10s ease-in-out infinite;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    25% {
        transform: translate3d(50px, -50px, 100px) rotate(90deg);
    }
    50% {
        transform: translate3d(100px, 0, 200px) rotate(180deg);
    }
    75% {
        transform: translate3d(50px, 50px, 100px) rotate(270deg);
    }
}

/* ==================
   Keyframe Animations
   ================== */

/* Subtle Pulse */
@keyframes subtlePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(0, 234, 255, 0.4); }
  50% { transform: scale(1.03); box-shadow: 0 0 25px rgba(0, 234, 255, 0.7); }
}

/* Subtle Glow */
@keyframes subtleGlow {
  0%, 100% { text-shadow: 0 0 8px var(--neon-purple); }
  50% { text-shadow: 0 0 16px var(--neon-purple), 0 0 20px var(--neon-purple); }
}

/* Card Hover Border Pulse */
@keyframes borderPulse {
  0% { border-color: var(--neon-blue); box-shadow: 0 0 10px var(--neon-blue); }
  50% { border-color: var(--neon-purple); box-shadow: 0 0 20px var(--neon-purple); }
  100% { border-color: var(--neon-blue); box-shadow: 0 0 10px var(--neon-blue); }
}

/* Icon Hover Animation */
@keyframes iconHover {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(10deg); }
}

/* Enhanced Glitch/Scanline */
@keyframes scanline {
  0% { transform: translateY(0); }
  10% { transform: translateY(-2px); }
  20% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}
@keyframes enhancedGlitch {
  0% { text-shadow: 1px 1px 0 var(--neon-blue), -1px -1px 0 var(--neon-purple); opacity: 1; }
  25% { text-shadow: -1px -1px 0 var(--neon-blue), 1px 1px 0 var(--neon-purple); opacity: 0.8; }
  50% { text-shadow: 1px -1px 0 var(--neon-blue), -1px 1px 0 var(--neon-purple); opacity: 1; }
  75% { text-shadow: -1px 1px 0 var(--neon-blue), 1px -1px 0 var(--neon-purple); opacity: 0.8; }
  100% { text-shadow: 1px 1px 0 var(--neon-blue), -1px -1px 0 var(--neon-purple); opacity: 1; }
}

/* Load Animations */
@keyframes loadFadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Slide-In From Left */
@keyframes slideInLeft {
  from { transform: translateX(-50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Slide-In From Right */
@keyframes slideInRight {
  from { transform: translateX(50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Background Gradient Shift */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* ==================
   Animation Applications
   ================== */

/* --- Section Entrances --- */
.section.fade-in {
    opacity: 0; /* Start hidden */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section.fade-in:nth-child(odd) {
    transform: translateX(-50px); /* Start off-screen left */
}

.section.fade-in:nth-child(even) {
    transform: translateX(50px); /* Start off-screen right */
}

.section.fade-in.visible {
    opacity: 1;
    transform: translateX(0); /* Slide in */
}

/* --- Button Animations --- */
.cyber-button.primary,
.cyber-header .launch-btn { /* Target launch btn specifically in header */
    animation: subtlePulse 2.5s infinite ease-in-out;
}

.cyber-button:hover {
    /* Add a scanline effect overlay */
    position: relative;
    overflow: hidden;
}
.cyber-button:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    animation: scanline 0.5s linear infinite;
    box-shadow: 0 0 10px var(--neon-blue);
}
/* Apply enhanced glitch to the button content on hover */
.cyber-button:hover .button-content {
    animation: enhancedGlitch 0.3s infinite;
}

/* --- Card Animations --- */
.pool-card, .feature-card, .benefit-card, .team-card, .token-card {
    position: relative;
    overflow: hidden; /* Needed for gradient shift */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Keep existing transitions */
}

.pool-card::before, .feature-card::before, .benefit-card::before, .team-card::before, .token-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(0, 234, 255, 0.1), rgba(111, 0, 255, 0.1), rgba(0, 234, 255, 0.1));
    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0; /* Behind content */
}

.pool-card:hover::before, .feature-card:hover::before, .benefit-card:hover::before, .team-card:hover::before, .token-card:hover::before {
    opacity: 1;
    animation: gradientShift 4s ease infinite;
}

.pool-card > *, .feature-card > *, .benefit-card > *, .team-card > *, .token-card > * {
    position: relative; /* Ensure content is above the ::before pseudo-element */
    z-index: 1;
}

.pool-card:hover, .feature-card:hover, .benefit-card:hover, .team-card:hover, .token-card:hover {
    animation: borderPulse 1.5s infinite ease-in-out;
    transform: translateY(-8px); /* Slightly more lift */
}

/* Card Icon Animation */
.pool-card:hover .feature-icon, /* Example, adapt selector if needed */
.feature-card:hover .feature-icon,
.benefit-card:hover .benefit-icon {
    animation: iconHover 1s ease-in-out infinite;
}

/* Team Image Glitch */
.team-card .image-glitch {
     animation: glitch-effect 1.5s infinite steps(8); /* Faster, more steps */
     background: linear-gradient(45deg, transparent, rgba(144, 0, 255, 0.5), transparent); /* More opaque */
}

/* --- Hero Animations --- */
.hero-section .hero-content h2 {
    opacity: 0; /* Start hidden */
    animation: loadFadeSlideUp 1s ease-out 0.5s forwards;
}

.hero-section .cta-buttons {
    opacity: 0; /* Start hidden */
    animation: loadFadeSlideUp 1s ease-out 0.8s forwards;
}

/* --- Logo Animation --- */
.logo-text {
    animation: subtleGlow 3s infinite ease-in-out;
}

/* --- Misc Hover Effects --- */
.faq-question:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.social-link:hover {
    transform: scale(1.1) translateY(-2px);
}


/* --- Existing Glitch Effect --- */
@keyframes glitch-effect {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Add glitch effect on hover for interactive elements */
.glitch-hover {
  position: relative;
  overflow: hidden;
}

.glitch-hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 234, 255, 0.3), transparent);
  animation: glitchScan 1s linear infinite;
}

@keyframes glitchScan {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* Background Layers - Place inside .background-container */

/* 1. Static Base Color (already on body) */

/* 2. Animated Circuitry Layer */
.circuit-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        radial-gradient(circle at 1px 1px, var(--circuit-color) 1px, transparent 0),
        linear-gradient(var(--circuit-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--circuit-color) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 40px 40px; /* Radial dots, horizontal, vertical */
    opacity: 0.3;
    animation: 
        circuitryPulse 15s infinite alternate ease-in-out, 
        circuitFlow 20s linear infinite; /* Add flow animation */
    z-index: 1;
}

@keyframes circuitryPulse { /* Keep existing pulse */
    from { opacity: 0.1; } 
    to { opacity: 0.4; }
}

/* Use background-position to simulate flow */
@keyframes circuitFlow {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 400px 400px, 400px 0, 0 400px; } /* Move all patterns */
}

/* 3. Enhanced Cyber Grid - Layer 1 (Faster, diagonal) */
.cyber-grid-layer-1 {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        repeating-linear-gradient(
            45deg,
            var(--grid-color),
            var(--grid-color) 1px,
            transparent 1px,
            transparent 40px /* Smaller grid size */
        ),
        repeating-linear-gradient(
            135deg,
            var(--grid-color),
            var(--grid-color) 1px,
            transparent 1px,
            transparent 40px
        );
    opacity: 0.5; /* Slightly more visible */
    animation: gridMoveFast 20s linear infinite;
    transition: background-position 0.1s linear; /* Smooth JS updates */
    z-index: 2;
}

@keyframes gridMoveFast {
    0% { background-position: 0 0; }
    100% { background-position: 400px 400px; }
}

/* 4. Enhanced Cyber Grid - Layer 2 (Slower, different angle) */
.cyber-grid-layer-2 {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        repeating-linear-gradient(
            60deg,
            rgba(159, 0, 255, 0.06), /* Faint purple */
            rgba(159, 0, 255, 0.06) 1px,
            transparent 1px,
            transparent 80px /* Larger grid size */
        ),
        repeating-linear-gradient(
            -60deg,
            rgba(159, 0, 255, 0.06),
            rgba(159, 0, 255, 0.06) 1px,
            transparent 1px,
            transparent 80px
        );
    opacity: 0.4;
    animation: gridMoveSlow 40s linear infinite reverse;
    transition: background-position 0.1s linear;
    z-index: 3;
}

@keyframes gridMoveSlow {
    0% { background-position: 0 0; }
    100% { background-position: -800px 800px; }
}

/* 5. Data Stream Layer - Intensified */
.data-stream-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 234, 255, 0.02) 5%, /* Start fainter */
        rgba(0, 234, 255, 0.1) 15%,
        rgba(0, 234, 255, 0.15) 50%, /* Brighter core */
        rgba(0, 234, 255, 0.1) 85%,
        rgba(0, 234, 255, 0.02) 95%,
        transparent 100%
    );
    background-size: 100% 300px; /* Shorter, more frequent streams */
    animation: dataFlow 5s linear infinite; /* Faster flow */
    mix-blend-mode: screen; /* Try 'screen' for brighter effect */
    filter: blur(1px); /* Slightly blur streams */
    z-index: 8;
}

/* Add a second, slower data stream layer */
.data-stream-layer-slow {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(159, 0, 255, 0.03) 20%,
        rgba(159, 0, 255, 0.08) 50%,
        rgba(159, 0, 255, 0.03) 80%,
        transparent 100%
    );
    background-size: 100% 600px; /* Longer streams */
    animation: dataFlow 12s linear infinite reverse; /* Slower, opposite direction */
    mix-blend-mode: screen;
    opacity: 0.7;
    z-index: 9;
}

@keyframes dataFlow { /* Keep existing keyframe */
    0% { background-position: 0 -300px; } /* Adjust based on size */
    100% { background-position: 0 100%; }
}

/* 6. Faint Starfield (Replaces old .stars) */
.starfield-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        radial-gradient(1px 1px at 30px 50px, #ccc, transparent),
        radial-gradient(1px 1px at 80px 120px, #aaa, transparent),
        radial-gradient(1.5px 1.5px at 150px 80px, #fff, transparent),
        radial-gradient(1px 1px at 220px 180px, #ccc, transparent);
    background-repeat: repeat;
    background-size: 300px 300px;
    animation: starMove 60s linear infinite; /* Slow drift */
    opacity: 0.6;
    z-index: 4;
}

@keyframes starMove {
    from { background-position: 0 0; }
    to { background-position: -300px 300px; }
}

/* Optional: Subtle noise/static layer */
.noise-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
    opacity: 0.03;
    pointer-events: none;
    animation: noiseAnim 0.5s steps(2) infinite;
    z-index: 11;
}

@keyframes noiseAnim {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-1px, -1px); }
  20% { transform: translate(1px, 1px); }
  /* ... add more steps for variety ... */
  100% { transform: translate(0, 0); }
}

/* Add slow color shift using CSS variables */
@keyframes backgroundColorShift {
  0% { --current-neon-blue: var(--neon-blue); --current-neon-purple: var(--neon-purple); }
  50% { --current-neon-blue: #00c0ff; --current-neon-purple: #b000ff; } /* Slightly different hues */
  100% { --current-neon-blue: var(--neon-blue); --current-neon-purple: var(--neon-purple); }
}

.background-container {
    /* Apply the shifting variables */
    animation: backgroundColorShift 60s infinite alternate;
    /* We'll need to update elements using these colors to use --current-neon-* vars */
}

/* 7. Distant Nebulae Layer */
.nebula-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(159, 0, 255, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse at 80% 70%, rgba(0, 234, 255, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    mix-blend-mode: screen;
    animation: nebulaDrift 120s linear infinite alternate;
    opacity: 0.7;
    z-index: 5;
}

@keyframes nebulaDrift {
    from { transform: translate(0, 0) rotate(0deg); }
    to { transform: translate(100px, 50px) rotate(10deg); }
}

/* 8. Asteroid Field Layer */
.asteroid-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    perspective: 800px; /* Create perspective for 3D */
    z-index: 6;
}

.asteroid {
    position: absolute;
    width: 2px; height: 2px;
    background: #aaa;
    border-radius: 50%;
    box-shadow: 0 0 3px #ccc;
    opacity: 0.7;
    /* Animation set via JS */
}

/* 9. Planetary Body Layer */
.planet-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    perspective: 1000px;
    z-index: 7;
}

.planet {
    position: absolute;
    width: 150px; /* Size of planet */
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #e0e0e0, #555);
    box-shadow: inset -20px -10px 40px rgba(0,0,0,0.5), 0 0 50px rgba(159, 0, 255, 0.2); /* Shadow and glow */
    /* Position and animation set via JS or specific classes */
    animation: slowRotate 200s linear infinite;
}

@keyframes slowRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 10. Tiny Spaceship Layer (Optional) */
.spaceship-layer {
     position: absolute;
     top: 0; left: 0; right: 0; bottom: 0;
     z-index: 10;
}

.spaceship {
    position: absolute;
    width: 5px; height: 10px; /* Tiny */
    background: #eee;
    transform: rotate(45deg);
    box-shadow: 0 0 5px #fff;
    /* Animation set via JS */
}

.spaceship::after { /* Thruster trail */
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 15px;
    background: linear-gradient(to top, rgba(0, 234, 255, 0.8), transparent);
    border-radius: 0 0 2px 2px;
    animation: thrusterPulse 0.5s infinite alternate;
}

@keyframes thrusterPulse {
    from { opacity: 0.5; transform: translateX(-50%) scaleY(0.8); }
    to { opacity: 1; transform: translateX(-50%) scaleY(1); }
}

/* Adjust existing background layer z-indexes if needed */
.circuit-layer { z-index: 1; }
.cyber-grid-layer-1 { z-index: 2; }
.cyber-grid-layer-2 { z-index: 3; }
.starfield-layer { z-index: 4; }
.nebula-layer { z-index: 5; }
.asteroid-layer { z-index: 6; }
.planet-layer { z-index: 7; }
.data-stream-layer { z-index: 8; }
.data-stream-layer-slow { z-index: 9; }
.spaceship-layer { z-index: 10; }
.noise-layer { z-index: 11; }

/* NEW: Construction Dots Layer */
.construction-dots-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    perspective: 600px; /* Needed for potential 3D movement */
    z-index: 6; /* Adjust as needed */
    pointer-events: none; /* Don't interfere with clicks */
}

.construction-dot {
    position: absolute;
    width: 2px; /* Small dots */
    height: 2px;
    background-color: var(--neon-blue); /* Bright color */
    border-radius: 50%;
    box-shadow: 0 0 5px var(--neon-blue), 0 0 8px var(--neon-blue);
    opacity: 0; /* Start invisible */
    /* Animation will be handled by JS */
}