/* ============================================================
   THREE.JS EFFECTS — Canvas, cursor glow, floating decorations
   ============================================================ */

/* ---- Hero Three.js Canvas ---- */
#hero-three-canvas {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
    pointer-events: none;
}

/* Ensure hero content sits above the canvas */
#hero {
    position: relative;
}
#hero .hero-inner {
    position: relative;
    z-index: 1;
}
#hero .hero-bottom-svg {
    z-index: 1;
}

/* ---- Ambient Cursor Glow ---- */
#cursor-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 245, 180, 0.07) 0%,
        rgba(220, 195, 240, 0.04) 40%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    will-change: transform;
    mix-blend-mode: normal;
}

.dark #cursor-glow {
    background: radial-gradient(circle,
        rgba(200, 180, 255, 0.06) 0%,
        rgba(100, 140, 255, 0.03) 40%,
        transparent 70%);
}

/* Hide on mobile / touch devices */
@media (hover: none) {
    #cursor-glow { display: none !important; }
}
@media (max-width: 767px) {
    #cursor-glow { display: none !important; }
}

/* ---- Section Floating Dots (decorative) ---- */
.section-float-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.float-dot {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: floatDotAnim 8s ease-in-out infinite;
}

.float-dot-0 {
    width: 6px;
    height: 6px;
    background-color: rgba(255, 210, 200, 0.25);
    top: 15%;
    right: 8%;
    animation-duration: 7s;
}
.float-dot-1 {
    width: 4px;
    height: 4px;
    background-color: rgba(220, 195, 240, 0.2);
    top: 60%;
    left: 5%;
    animation-duration: 9s;
}
.float-dot-2 {
    width: 8px;
    height: 8px;
    background-color: rgba(200, 220, 255, 0.18);
    bottom: 20%;
    right: 15%;
    animation-duration: 11s;
}

.dark .float-dot-0 {
    background-color: rgba(255, 210, 200, 0.08);
}
.dark .float-dot-1 {
    background-color: rgba(220, 195, 240, 0.06);
}
.dark .float-dot-2 {
    background-color: rgba(200, 220, 255, 0.06);
}

@keyframes floatDotAnim {
    0%, 100% {
        opacity: 0;
        transform: translateY(0) scale(1);
    }
    20% {
        opacity: 1;
    }
    50% {
        transform: translateY(-20px) scale(1.3);
        opacity: 0.8;
    }
    80% {
        opacity: 1;
    }
}

/* ---- Ensure all section content stays above decorations ---- */
#about .container,
#experience .container,
#education .container,
#courses .container,
#achievements .container,
#projects .container,
#contact .container {
    position: relative;
    z-index: 1;
}

/* ---- Smooth GSAP animation base states ---- */
/* Prevent flash of unstyled content for elements GSAP will animate */
.timeline-item,
#education .card,
#courses .card,
#achievements .card,
#projects .card {
    will-change: transform, opacity;
}

/* ---- Hero canvas responsive ---- */
@media (max-width: 767px) {
    #hero-three-canvas {
        opacity: 0.5;
    }
    .section-float-dots {
        display: none;
    }
}

/* ---- Prevent horizontal overflow from decorations ---- */
html, body {
    overflow-x: hidden;
}
section {
    overflow-x: clip;
}