/* ============================================================
   PORTFOLIO – style.css
   Custom animations, cyber-themed polish, and utility classes
   not easily handled by Tailwind CSS alone.
   ============================================================ */

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* 
  Cyber-Themed Secure Network Grid 
  Adding an animated scroll effect to the background grid
*/
.grid-bg {
    background-image: 
        linear-gradient(to right, rgba(140, 144, 159, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(140, 144, 159, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 40px 40px;
    }
}

/* Scroll Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Terminal Typing Accent */
.typing-cursor::after {
    content: '_';
    animation: blink 1s step-end infinite;
}

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

/* Active Nav Link Styling */
.nav-link.active {
    color: #adc6ff; /* primary */
    font-weight: 600;
}

/* Mobile Nav Menu Transitions */
#navMenu {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    overflow: hidden;
}

@media (max-width: 768px) {
    #navMenu:not(.open) {
        max-height: 0;
        opacity: 0;
        pointer-events: none;
    }
    #navMenu.open {
        max-height: 400px;
        opacity: 1;
        pointer-events: auto;
    }
}

/* Certificate Zoom functionality */
.cert-zoom {
    transform: scale(1.5);
    cursor: zoom-out !important;
}