/* =============================================
   EFFECTS.CSS — Visual Effects (index.html)
   ============================================= */



/* --------------------------------------------------
   2. CUSTOM CURSOR  (desktop only)
-------------------------------------------------- */
#cursor {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 1.5px solid rgba(255, 96, 4, 0.55);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    top: 0; left: 0;
    will-change: transform;
    transition: width 0.2s ease, height 0.2s ease,
                border-color 0.2s ease, background 0.2s ease;
}

#cursor-dot {
    position: fixed;
    width: 8px;
    height: 8px;
    background: #FF6004;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    top: 0; left: 0;
    box-shadow: 0 0 10px #FF6004, 0 0 20px rgba(255,96,4,0.5);
    will-change: transform;
}

#cursor.cursor-hover {
    width: 56px;
    height: 56px;
    border-color: #FF6004;
    background: rgba(255, 96, 4, 0.06);
}

@media (pointer: coarse) {
    #cursor, #cursor-dot { display: none !important; }
}


/* --------------------------------------------------
   3. HERO — canvas + aurora overlay + dark bg
-------------------------------------------------- */
.hero {
    position: relative !important;
    overflow: hidden !important;
    background: radial-gradient(ellipse at 30% 60%, #1a0d00 0%, #0d0d0d 60%, #111 100%) !important;
}

/* Slowly-animated aurora blobs */
.hero::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse at 25% 50%, rgba(255, 96, 4, 0.09) 0%, transparent 45%),
        radial-gradient(ellipse at 75% 25%, rgba(255, 130, 50, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 55% 80%, rgba(200, 60, 0, 0.07) 0%, transparent 40%);
    animation: aurora 10s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
}

@keyframes aurora {
    0%   { transform: translate(0,   0)   rotate(0deg);   }
    33%  { transform: translate(-3%, 2%)  rotate(1deg);   }
    66%  { transform: translate(3%, -1%)  rotate(-0.8deg);}
    100% { transform: translate(-1%, 3%)  rotate(0.5deg); }
}

/* Particle canvas sits above the aurora */
#particle-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Hero content above canvas */
.hero-content {
    position: relative;
    z-index: 2;
    will-change: transform;
}


/* --------------------------------------------------
   4. GLITCH EFFECT on .highlight (name)
-------------------------------------------------- */
.highlight {
    position: relative;
    display: inline-block;
    animation: glitch-cycle 5s infinite;
}

@keyframes glitch-cycle {
    0%,  85%, 100% {
        text-shadow: none;
        transform: translate(0, 0);
        clip-path: none;
    }
    86% {
        text-shadow: -3px 0 #00ffff, 3px 0 #ff0066;
        transform: translate(-2px, 0) skewX(-3deg);
    }
    87% {
        text-shadow: 3px 0 #00ffff, -3px 0 #ff0066;
        transform: translate(2px, 0) skewX(3deg);
    }
    88% {
        text-shadow: -2px 0 #00ffff;
        transform: translate(-1px, 0);
    }
    89% {
        text-shadow: none;
        transform: translate(0, 0);
    }
    90% {
        text-shadow: 2px 0 #ff0066;
        transform: translate(1px, 0) skewX(-2deg);
    }
    91% {
        text-shadow: none;
        transform: translate(0, 0);
    }
}


/* --------------------------------------------------
   5. TAGS — staggered pop-in
-------------------------------------------------- */
.tags span {
    opacity: 0;
    animation: tag-pop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.tags span:nth-child(1) { animation-delay: 2.2s; }
.tags span:nth-child(2) { animation-delay: 2.45s; }
.tags span:nth-child(3) { animation-delay: 2.7s; }
.tags span:nth-child(4) { animation-delay: 2.95s; }

@keyframes tag-pop {
    from { opacity: 0; transform: scale(0.7) translateY(12px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);    }
}


/* --------------------------------------------------
   6. TYPING CURSOR
-------------------------------------------------- */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: #FF6004;
    margin-left: 3px;
    vertical-align: middle;
    animation: blink 0.75s step-end infinite;
    box-shadow: 0 0 6px #FF6004;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}


/* --------------------------------------------------
   7. SCROLL INDICATOR (bottom of hero)
-------------------------------------------------- */
.scroll-indicator {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 3.2s forwards;
}
.scroll-indicator .scroll-label {
    font-size: 0.65rem;
    letter-spacing: 4px;
    color: #555;
    text-transform: uppercase;
}
.scroll-indicator .scroll-line {
    width: 1px;
    height: 44px;
    background: linear-gradient(#FF6004, transparent);
    animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse {
    0%, 100% { transform: scaleY(1);   opacity: 0.5; }
    50%       { transform: scaleY(0.4); opacity: 1;   }
}
@media (max-width: 768px) {
    .scroll-indicator { display: none; }
}


/* --------------------------------------------------
   8. CARD — glow on hover + override for 3D tilt
-------------------------------------------------- */
.project-card {
    transform-style: preserve-3d;
}
.project-card.visible:hover {
    /* Let JS handle transform — add only the glow */
    box-shadow: 0 20px 50px rgba(255, 96, 4, 0.15),
                0 0 0 1px rgba(255, 96, 4, 0.08) !important;
}


/* --------------------------------------------------
   9. TECH CARD shimmer
-------------------------------------------------- */
.tech-card {
    position: relative;
    overflow: hidden;
}
.tech-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 35%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.09), transparent);
    transform: skewX(-20deg);
    animation: shimmer 5s linear infinite;
}
@keyframes shimmer {
    0%   { left: -60%; }
    100% { left: 160%; }
}


/* --------------------------------------------------
   10. VIEW-MORE-BTN — glow
-------------------------------------------------- */
.view-more-btn:hover {
    box-shadow: 0 0 18px rgba(255, 96, 4, 0.45) !important;
}