/*
=== EDUCATIONAL PORTFOLIO CSS ===
This file contains all the styling for the portfolio website.
CSS (Cascading Style Sheets) controls how HTML elements look and behave.

Key concepts you'll learn:
- CSS Reset and Global Styles
- CSS Custom Properties (Variables)
- Flexbox and Grid Layouts
- Responsive Design with Media Queries
- CSS Animations and Transitions
- Positioning and Z-index
- Pseudo-elements and Pseudo-classes
*/

/* HERO SUBTITLE STYLES */
.hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-top: -10px;
    margin-bottom: 20px;
    font-weight: 400;
    letter-spacing: 1px;
    opacity: 0.9;
}

/* GLOBAL STYLES - Applied to entire document */
/* These styles reset browser defaults and set foundation styles */
/* UNIVERSAL SELECTOR (*) - Applies to every element on the page */
/* CSS Reset: Removes default browser spacing and sizing */
* {
    margin: 0;           /* Remove default margins */
    padding: 0;          /* Remove default padding */
    box-sizing: border-box;  /* Include padding/border in element width/height */
    /* border-box makes width calculations much more predictable */
}

/* Hide custom cursor on touch devices */
@media (min-width: 1024px) {
    * {
        cursor: none;    /* Hide default cursor for custom cursor effect on desktop */
    }
}

/* CUSTOM CURSOR EFFECT */
/* Custom cursor that follows mouse movement */
.custom-cursor {
    position: fixed;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 99999;  /* Much higher z-index to stay on top */
    transition: transform 0.1s ease-out;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #ff1493;  /* Fuscia color */
    text-shadow: 0 0 10px rgba(255, 20, 147, 0.5);
    display: none;  /* Hide on mobile devices */
}

/* Show cursor only on desktop */
@media (min-width: 1024px) {
    .custom-cursor {
        display: block;
    }
}

.custom-cursor::before {
    content: '👆';
    display: block;
    filter: hue-rotate(300deg) saturate(2) brightness(1.2);
}

/* Cursor hover effect for interactive elements */
.custom-cursor.hover {
    transform: translate(-50%, -50%) scale(1.3);
}

.custom-cursor.hover::before {
    content: '👉';
}

/* ACCESSIBILITY IMPROVEMENTS */
/* Skip links for keyboard navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-green);
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    z-index: 100000;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 6px;
}

/* Enhanced focus indicators for better accessibility */
/* Ensure focus works well with dark theme and custom cursor */
*:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Custom focus styles for specific elements */
button:focus,
.btn:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(143, 228, 2, 0.2);
}

/* Navigation links focus */
.nav-link:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 4px;
    background: rgba(143, 228, 2, 0.1);
    border-radius: 4px;
}

/* Social links and interactive elements */
.social-link:focus,
.project-link:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Form elements focus states */
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--primary-green);
    background: rgba(143, 228, 2, 0.05);
}

/* Ensure focus indicators work with custom cursor */
@media (min-width: 1024px) {
    *:focus {
        cursor: none; /* Maintain custom cursor on focus */
    }
}

/* CSS CUSTOM PROPERTIES (CSS Variables) */
/* :root selector makes variables available globally */
/* Variables start with -- and can be reused throughout the stylesheet */
:root {
    /* Primary brand color - bright green for modern tech feel */
    --primary-green: #8FE402;
    --av-blue: #0099D8;  /* AV industry blue accent */
    
    /* Dark theme color palette */
    --dark-bg: #1a1a1a;        /* Very dark gray - almost black like Tucker's */
    --darker-bg: #2a2a2a;      /* Even darker for contrast sections */
    --card-bg: #1a1a1a;       /* Slightly lighter for cards/containers */
    
    /* Text colors for dark theme */
    --text-primary: #ffffff;    /* Main text - white for readability */
    --text-secondary: #a8a8a8;  /* Secondary text - light gray */
    
    /* Accent colors for visual interest and variety */
    --accent-blue: #5B8DEE;
    --accent-purple: #7B68EE;
    --accent-pink: #FF6B6B;
    --accent-orange: #FFA500;
    --accent-yellow: #FFD700;
    /* Having a defined color palette ensures visual consistency */
}

/* BODY ELEMENT - Base styles for the entire page */
body {
    /* Font stack: Try Inter first, fall back to system fonts if unavailable */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Use CSS variable for consistent background color */
    background-color: var(--dark-bg);
    
    /* Default text color using CSS variable */
    color: var(--text-primary);
    
    /* Line height: 1.6 creates comfortable reading spacing */
    line-height: 1.6;
    
    /* Prevent horizontal scrolling (for mobile) */
    overflow-x: hidden;
    
    /* Ensure vertical scrolling is enabled */
    overflow-y: auto;
    
    /* Ensure the body can scroll */
    min-height: 100vh;
    position: relative;
}

/* CONTAINER CLASS - Reusable layout component */
/* Used throughout site to center content and control width */
.container {
    max-width: 1200px;  /* Maximum width prevents content from getting too wide */
    margin: 0 auto;     /* Center the container horizontally */
    padding: 0 20px;    /* Add horizontal padding for mobile spacing */
    /* This pattern is used in most modern websites for content layout */
}

/* ========================================
   NAVIGATION STYLES
   Fixed header that stays visible while scrolling
   ======================================== */
/* NAVIGATION BAR - Fixed header (hidden initially) */
.navbar {
    position: fixed;    /* Stays in place when scrolling */
    top: 0;            /* Stick to top of viewport */
    left: 0;           /* Full width from left... */
    right: 0;          /* ...to right edge */
    
    /* Semi-transparent background with alpha channel */
    background: rgba(26, 26, 26, 0.95);
    
    /* Modern glass effect - blurs content behind navbar */
    backdrop-filter: blur(10px);
    
    /* Z-index controls stacking order - higher numbers appear on top */
    z-index: 1000;     /* High value ensures navbar stays above other content */
    
    padding: 1rem 0;   /* Vertical padding (1rem = 16px typically) */
    
    /* HIDDEN BY DEFAULT - will appear on scroll */
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* NAVBAR VISIBLE STATE - shown when scrolled */
.navbar.visible {
    opacity: 1;
    transform: translateY(0);
}

/* NAVIGATION CONTAINER - Layout for nav content */
.nav-container {
    max-width: 1200px;           /* Same max-width as main container */
    margin: 0 auto;              /* Center horizontally */
    padding: 0 2rem;             /* Horizontal padding */
    
    /* FLEXBOX LAYOUT - Modern CSS layout method */
    display: flex;               /* Enable flexbox */
    justify-content: space-between;  /* Push logo left, menu right */
    align-items: center;         /* Center items vertically */
    /* Flexbox is perfect for navigation layouts */
}

/* NAVIGATION LOGO */
.nav-logo {
    font-size: 1.5rem;          /* Larger than body text */
    font-weight: 700;           /* Bold weight (100-900 scale) */
    color: var(--primary-green); /* Brand color for logo */
    /* Logo should be prominent but not overwhelming */
}

/* NAVIGATION MENU - Horizontal list of links */
.nav-menu {
    display: flex;        /* Arrange menu items horizontally */
    gap: 2rem;           /* Space between menu items */
    list-style: none;    /* Remove bullet points from list */
    /* Flexbox makes horizontal menus easy to create */
}

/* Mobile Menu Button */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

/* Mobile Navigation Styles */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }
    
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: var(--dark-bg);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
        transition: right 0.3s ease;
        z-index: 1000;
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    .nav-link {
        font-size: 1.2rem;
        padding: 1rem;
        width: 100%;
        text-align: center;
    }
    
    .nav-highlight {
        margin-top: 1rem;
    }
}

/* NAVIGATION LINKS - Individual menu items */
.nav-link {
    color: var(--text-secondary);  /* Start with secondary text color */
    text-decoration: none;         /* Remove underline from links */
    transition: color 0.3s;        /* Smooth color change on hover */
    /* Transitions make interactions feel smooth and professional */
}

/* NAVIGATION LINK HOVER STATE */
/* :hover is a pseudo-class that applies when user mouses over element */
.nav-link:hover {
    color: var(--text-primary);  /* Brighten color on hover */
    /* This provides visual feedback for interactive elements */
}

/* HIGHLIGHTED NAVIGATION LINK - Prominent styling for case studies */
.nav-highlight {
    color: var(--primary-green) !important;  /* Use brand green color */
    font-weight: 600;                         /* Make it bold */
    background: rgba(143, 228, 2, 0.1);      /* Subtle green background */
    padding: 0.5rem 1rem;                    /* Add padding around text */
    border-radius: 6px;                      /* Rounded corners */
    border: 1px solid rgba(143, 228, 2, 0.2); /* Subtle green border */
    transition: all 0.3s ease;               /* Smooth transitions */
}

.nav-highlight:hover {
    background: rgba(143, 228, 2, 0.15);     /* Slightly brighter on hover */
    border-color: rgba(143, 228, 2, 0.3);    /* More visible border on hover */
    transform: translateY(-1px);              /* Subtle lift effect */
}

/* ========================================
   HERO SECTION STYLES
   Large banner area with animated background
   ======================================== */
/* HERO SECTION - Main banner area */
.hero {
    position: relative;      /* Allows absolute positioning of child elements */
    min-height: 100vh;      /* Full viewport height */
    padding: 2rem 1rem;     /* Add padding for mobile */
    
    /* FLEXBOX CENTERING - Classic technique for perfect centering */
    display: flex;
    align-items: center;     /* Center vertically like Tucker's */
    justify-content: center;  /* Center horizontally */
    
    overflow: visible;       /* Allow content to be visible for proper scrolling */
    background: var(--dark-bg);
    z-index: 1;             /* Lower than navbar but above background elements */
}

/* ANIMATED BACKGROUND CONTAINER */
.wavy-background {
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 400px;
    overflow: visible;
    z-index: 1;
}

/* SVG WAVE STYLING */
.wave-svg {
    position: absolute;
    width: 150%;
    height: 100%;
    left: -25%;
}

.wave-path {
    fill: none;
    stroke: var(--primary-green);
    stroke-width: 2;
    opacity: 0.3;
    filter: drop-shadow(0 0 10px rgba(143, 228, 2, 0.3));
}

/* First wave animation */
.wave-svg {
    animation: wave-flow 20s linear infinite;
}

/* Second wave animation */
.wave-svg.wave-2 {
    animation: wave-flow 15s linear infinite reverse;
    opacity: 0.5;
}

.wave-svg.wave-2 .wave-path {
    opacity: 0.2;
}

/* Smooth horizontal wave flow animation */
@keyframes wave-flow {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* HERO CONTENT CONTAINER */
.hero-container {
    text-align: center;    /* Center all text inside */
    z-index: 10;          /* Well above waves */
    padding: 0;           /* No padding needed */
    position: relative;   /* For z-index to work */
    
    /* TRANSITION for parallax effect (controlled by JavaScript) */
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    /* Smooth movement when JavaScript changes transform and opacity */
}

/* HERO PROFILE IMAGE CONTAINER */
.hero-avatar {
    width: 400px;          /* Even larger profile image to fill space */
    height: 400px;
    margin: 0 auto 4rem;   /* More bottom margin */
    border-radius: 50%;    /* Makes square into perfect circle */
    border: 8px solid var(--primary-green);  /* Thicker border */
    overflow: hidden;      /* Clips image to circle shape */
    position: relative;
    z-index: 10;          /* Well above the waves */
    background: var(--dark-bg);  /* Solid background */
    box-shadow: 0 20px 60px rgba(143, 228, 2, 0.3);  /* Add glow effect */
    /* border-radius: 50% is the standard way to make circular images */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .hero-avatar {
        width: 250px;
        height: 250px;
        margin: 0 auto 2rem;
        border-width: 5px;
    }
}

/* PROFILE IMAGE STYLING */
.avatar-image {
    width: 100%;          /* Fill container width */
    height: 100%;         /* Fill container height */
    object-fit: cover;    /* Crop image to fit without distortion */
    /* object-fit: cover maintains aspect ratio while filling container */
}

/* HERO TITLE - Main heading */
.hero-title {
    font-size: 4.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--text-primary);
    letter-spacing: -1px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Mobile title adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
        letter-spacing: -0.5px;
    }
}

.hero-subtitle {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--primary-green);
    margin-bottom: 2rem;
    margin-top: -0.5rem;
    letter-spacing: 0.5px;
    text-align: center;
}

/* CODE ICON - Replaces emoji with code symbol */
.code-icon {
    color: var(--primary-green);  /* Brand color for emphasis */
    font-family: 'Courier New', monospace;  /* Code-style font */
    font-weight: 700;
}

/* HERO BUTTONS CONTAINER */
.hero-buttons {
    display: flex;           /* Arrange buttons horizontally */
    gap: 2rem;              /* More space between buttons */
    justify-content: center; /* Center buttons horizontally */
    flex-wrap: wrap;        /* Allow wrapping on mobile */
    margin-top: 3rem;       /* Add space above buttons */
    /* Flexbox makes button groups easy to align and space */
}

/* Mobile button adjustments */
@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
    
    .btn-outline {
        width: 100%;
        justify-content: center;
        font-size: 1rem;
        padding: 0.9rem 1.5rem;
    }
}

/* BUTTON BASE STYLES - Shared by all buttons */
.btn {
    padding: 1rem 2.5rem;     /* Larger padding for rectangular look */
    text-decoration: none;    /* Remove link underline */
    border-radius: 8px;       /* Subtle rounded corners */
    font-weight: 300;         /* Light font weight */
    transition: all 0.3s;     /* Smooth animation for all properties */
    display: inline-flex;     /* Flex for icon alignment */
    align-items: center;      /* Center items vertically */
    /* This creates the foundation styling that all buttons share */
}

/* PRIMARY BUTTON - Main call-to-action */
.btn-primary {
    background: var(--primary-green);  /* Bright brand color background */
    color: var(--dark-bg);            /* Dark text for contrast */
    /* Primary buttons should be the most visually prominent */
}

/* SECONDARY BUTTON - Less prominent action */
.btn-secondary {
    background: transparent;           /* No background fill */
    color: var(--text-primary);       /* Light text */
    border: 1px solid var(--text-secondary);  /* Subtle border */
    /* Secondary buttons are less prominent than primary buttons */
}

/* BUTTON HOVER EFFECT - Works on all button types */
.btn:hover {
    transform: translateY(-2px);  /* Move button up slightly */
    /* Subtle hover animation provides tactile feedback */
    /* translateY() moves elements vertically (negative = up) */
}

/* OUTLINE BUTTON - Modern rectangular style */
.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-size: 1.3rem;
    padding: 1.3rem 3rem;
    border-radius: 8px;  /* Subtle rounded corners */
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.btn-outline i {
    font-size: 1.4rem;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* HERO STATS SECTION */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
    position: relative;
    flex-wrap: wrap;
}

/* Mobile stats adjustments */
@media (max-width: 768px) {
    .hero-stats {
        gap: 1.5rem;
        margin-top: 2rem;
        padding: 1.5rem 0;
    }
    
    .hero-stats .stat-item {
        min-width: 100px;
    }
    
    .hero-stats .stat-number {
        font-size: 1.8rem;
    }
    
    .hero-stats .stat-label {
        font-size: 0.75rem;
    }
}

.hero-stats .stat-item {
    text-align: center;
    min-width: 120px;
}

.hero-stats .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-green);
    display: block;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(143, 228, 2, 0.3);
}

.hero-stats .stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 300;
}

/* Services Section */
.services {
    padding: 60px 0;
    background: var(--darker-bg);
    position: relative;
    z-index: 2;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}

/* Mobile services adjustments */
@media (max-width: 768px) {
    .services {
        padding: 40px 0;
    }
    
    .services .section-subtitle {
        font-size: 1.5rem !important;
        margin-bottom: 2rem !important;
        padding: 0 1rem;
    }
}

.services .section-title {
    margin-bottom: 0.5rem;
}

.services .section-subtitle {
    margin-bottom: 2rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Mobile grid adjustments */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }
}

.service-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: transform 0.3s;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon: Web Dev */
.icon-web {
    position: relative;
    width: 100%;
    height: 100%;
}

.monitor {
    width: 80px;
    height: 60px;
    background: #333;
    border-radius: 8px;
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.monitor-screen {
    width: 90%;
    height: 85%;
    background: #222;
    border-radius: 4px;
    padding: 8px;
}

.color-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    height: 100%;
}

.block {
    border-radius: 2px;
}

.block.orange { background: var(--accent-orange); }
.block.pink { background: var(--accent-pink); }
.block.yellow { background: var(--accent-yellow); }
.block.green { background: var(--primary-green); }

.monitor-stand {
    width: 20px;
    height: 15px;
    background: #555;
    position: absolute;
    bottom: 20px;
    left: 50px;
}

.monitor-base {
    width: 40px;
    height: 4px;
    background: #666;
    position: absolute;
    bottom: 16px;
    left: 40px;
    border-radius: 2px;
}

.pencil {
    position: absolute;
    right: 15px;
    top: 15px;
    transform: rotate(-45deg);
}

.pencil-body {
    width: 40px;
    height: 8px;
    background: var(--accent-pink);
    position: relative;
}

.pencil-tip {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid #333;
    position: absolute;
    left: -4px;
    bottom: -12px;
}

/* Icon: Backend */
.icon-backend {
    position: relative;
    width: 100%;
    height: 100%;
}

.crane {
    position: relative;
    width: 100%;
    height: 100%;
}

.crane-arm {
    width: 4px;
    height: 80px;
    background: var(--accent-blue);
    position: absolute;
    left: 50%;
    top: 10px;
}

.crane-arm::before {
    content: '';
    width: 60px;
    height: 4px;
    background: var(--accent-blue);
    position: absolute;
    top: 0;
    left: 0;
}

.crane-cable {
    width: 2px;
    height: 30px;
    background: #666;
    position: absolute;
    left: 80px;
    top: 14px;
}

.crane-bucket {
    width: 20px;
    height: 15px;
    background: var(--accent-pink);
    position: absolute;
    left: 70px;
    top: 44px;
    border-radius: 0 0 4px 4px;
}

.crane-base {
    width: 80px;
    height: 2px;
    background: #888;
    position: absolute;
    bottom: 10px;
    left: 20px;
}

/* Icon: App */
.icon-app {
    position: relative;
    width: 100%;
    height: 100%;
}

.phone {
    width: 60px;
    height: 100px;
    background: var(--accent-blue);
    border-radius: 12px;
    position: absolute;
    left: 30px;
    top: 10px;
    padding: 8px;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    border-radius: 8px;
    padding: 6px;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    height: 100%;
}

.app-icon {
    background: var(--accent-pink);
    border-radius: 2px;
}

.hand {
    position: absolute;
    right: 25px;
    bottom: 20px;
}

.finger {
    width: 12px;
    height: 30px;
    background: #fdbcb4;
    border-radius: 6px;
    transform: rotate(-20deg);
}

/* Icon: Stay Curious */
.icon-curious {
    position: relative;
    width: 100%;
    height: 100%;
}

.lightbulb {
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
}

.bulb {
    width: 40px;
    height: 40px;
    background: var(--accent-yellow);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.bulb-base {
    width: 20px;
    height: 15px;
    background: #666;
    margin: -5px auto 0;
    border-radius: 0 0 4px 4px;
}

.sparkles {
    position: absolute;
    top: 10px;
    width: 100%;
    text-align: center;
}

.sparkle {
    color: var(--accent-yellow);
    font-size: 20px;
    position: absolute;
    animation: sparkle 2s infinite;
}

.sparkle:nth-child(1) { left: 20px; animation-delay: 0s; }
.sparkle:nth-child(2) { left: 50px; animation-delay: 0.5s; }
.sparkle:nth-child(3) { right: 20px; animation-delay: 1s; }

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.people {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.person {
    width: 25px;
    height: 40px;
}

.head {
    width: 12px;
    height: 12px;
    background: #fdbcb4;
    border-radius: 50%;
    margin: 0 auto 4px;
}

.body {
    width: 15px;
    height: 20px;
    background: var(--accent-pink);
    border-radius: 4px 4px 0 0;
    margin: 0 auto;
}

/* Service Card Content */
.service-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.service-card p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

.highlight {
    color: var(--primary-green);
    text-decoration: none;
}

.highlight-green {
    color: var(--primary-green);
    text-decoration: underline;
}

/* Blog Section */
.blog-link {
    text-decoration: none;
    color: inherit;
}

.blog-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.av-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    color: var(--accent-blue);
}

.av-preview i {
    font-size: 3rem;
}

.av-preview span {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 2px;
}

.nexxt-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    color: var(--primary-green);
}

.nexxt-preview i {
    font-size: 3rem;
}

.nexxt-preview span {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 2px;
}
.blog {
    padding: 60px 0;
    background: var(--dark-bg);
}

.section-title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

.section-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.blog-card {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-preview {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.code-preview {
    background: #0d1117;
    width: 100%;
    height: 100%;
    padding: 2rem;
}

.code-preview pre {
    color: #e6edf3;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    white-space: pre-wrap;
}

.react-preview {
    background: var(--accent-purple);
}

.react-icon {
    font-size: 4rem;
    color: white;
    animation: spin 10s linear infinite;
}

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

.css-preview {
    background: var(--accent-pink);
}

.css-shapes {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.shape {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
}

.shape.circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--accent-pink);
    font-size: 1.2rem;
}

.shape.diamond {
    transform: rotate(45deg);
}

.shape.triangle {
    width: 0;
    height: 0;
    background: transparent;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 35px solid rgba(255, 255, 255, 0.9);
}

.components-preview {
    background: #66d9ef;
}

.component-icon {
    color: white;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.component-icon i {
    font-size: 2rem;
}

.memo-preview {
    background: #bd93f9;
}

.memo-text {
    color: white;
    font-size: 1.5rem;
    font-family: 'Consolas', monospace;
}

.js-preview {
    background: var(--accent-yellow);
}

.js-tags {
    display: flex;
    gap: 1rem;
}

.tag {
    background: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    color: var(--dark-bg);
    font-weight: 500;
}

.blog-card h3 {
    padding: 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.blog-card time {
    display: block;
    padding: 0 1.5rem 1.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Story Section */
.story {
    padding: 100px 0;
    background: var(--dark-bg);
}

.story-simple {
    max-width: 800px;
    margin: 3rem auto;
    text-align: center;
}

.story-simple p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.story-simple p:last-child {
    margin-bottom: 0;
}

.story-cta {
    text-align: center;
    margin-top: 3rem;
}

.story-cta .btn {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    background: var(--green);
    color: var(--dark-bg);
    border: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.story-cta .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(143, 228, 2, 0.3);
}

/* Stats Section */
.stats {
    padding: 60px 0;
    background: var(--dark-bg);
}

/* Mobile stats section adjustments */
@media (max-width: 768px) {
    .stats {
        padding: 40px 0;
    }
    
    .stats-title {
        font-size: 1.3rem;
        padding: 0 1rem;
    }
}

.stats-title {
    text-align: center;
    font-size: 1.75rem;
    margin-bottom: 2rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

/* Mobile stats grid adjustments */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    .stat-item .stat-number {
        font-size: 2rem;
    }
    
    .stat-item .stat-label {
        font-size: 0.8rem;
    }
}

.stat-item {
    text-align: center;
}

/* Custom animated stat icons */
.stat-icon {
    font-size: 2.5rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    position: relative;
}

/* Years in Tech - Animated Progress Circle */
.stat-item:nth-child(1) .stat-icon {
    background: none;
}

.stat-item:nth-child(1) .stat-icon::before {
    content: '';
    width: 60px;
    height: 60px;
    border: 4px solid rgba(143, 228, 2, 0.2);
    border-top: 4px solid var(--primary-green);
    border-radius: 50%;
    animation: yearProgress 3s ease-in-out infinite;
}

.stat-item:nth-child(1) .stat-icon::after {
    content: '👨‍💻';
    position: absolute;
    font-size: 2rem;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes yearProgress {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* Coffee Cup - Steaming Animation */
.stat-item:nth-child(2) .stat-icon {
    background: none;
}

.stat-item:nth-child(2) .stat-icon::before {
    content: '';
    width: 40px;
    height: 50px;
    background: linear-gradient(to bottom, #8B4513 0%, #654321 100%);
    border-radius: 0 0 20px 20px;
    position: relative;
    box-shadow: inset 0 -10px 0 rgba(0,0,0,0.3);
}

.stat-item:nth-child(2) .stat-icon::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
    border-radius: 50%;
    animation: steam 2s ease-in-out infinite;
}

@keyframes steam {
    0% { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.5); }
    50% { opacity: 1; transform: translateX(-50%) translateY(-20px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(1.5); }
}

/* Code Lines - Matrix Style */
.stat-item:nth-child(3) .stat-icon {
    background: none;
    overflow: hidden;
}

.stat-item:nth-child(3) .stat-icon::before {
    content: '</>';
    font-family: 'Courier New', monospace;
    font-size: 2rem;
    color: var(--primary-green);
    position: absolute;
    animation: codeFlash 1.5s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(143, 228, 2, 0.5);
}

.stat-item:nth-child(3) .stat-icon::after {
    content: '010110100111010001100101';
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 0.5rem;
    color: rgba(143, 228, 2, 0.3);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    animation: binaryFlow 3s linear infinite;
}

@keyframes codeFlash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.3; }
}

@keyframes binaryFlow {
    0% { opacity: 0; transform: translateY(-20px); }
    50% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(20px); }
}

/* Brain - Pulsing Neural Network */
.stat-item:nth-child(4) .stat-icon {
    background: none;
}

.stat-item:nth-child(4) .stat-icon::before {
    content: '';
    width: 50px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-green) 0%, #00d4aa 100%);
    border-radius: 25px 25px 20px 20px;
    position: relative;
    animation: brainPulse 2s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(143, 228, 2, 0.3);
}

.stat-item:nth-child(4) .stat-icon::after {
    content: '⚡';
    position: absolute;
    font-size: 1.5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: sparkle 1s ease-in-out infinite;
}

@keyframes brainPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

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

/* AI Agents - Robot Animation */
.stat-item:nth-child(5) .stat-icon {
    background: none;
}

.stat-item:nth-child(5) .stat-icon::before {
    content: '';
    width: 45px;
    height: 35px;
    background: linear-gradient(145deg, #444 0%, #666 100%);
    border-radius: 8px;
    position: relative;
    box-shadow: 
        0 0 0 3px var(--primary-green),
        0 0 20px rgba(143, 228, 2, 0.3);
    animation: robotMove 3s ease-in-out infinite;
}

.stat-item:nth-child(5) .stat-icon::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--primary-green);
    border-radius: 50%;
    box-shadow: 
        -15px 0 0 var(--primary-green),
        15px 0 0 var(--primary-green);
    animation: robotEyes 2s ease-in-out infinite;
}

@keyframes robotMove {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    25% { transform: translateY(-5px) rotate(0deg); }
    75% { transform: translateY(-3px) rotate(2deg); }
}

@keyframes robotEyes {
    0%, 90%, 100% { opacity: 1; }
    95% { opacity: 0.2; }
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: 0.25rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.stats-update {
    text-align: center;
    margin-top: 3rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Parallax Elements - Add data-parallax attribute to elements */
[data-parallax] {
    transition: transform 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
}

/* Fade-in animation for sections */
.fade-in-section {
    opacity: 1;  /* Start visible to ensure content is accessible */
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animation state for fade-in effect */
.fade-in-section:not(.visible) {
    opacity: 0;
    transform: translateY(30px);
}

.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* About Section */
.about {
    padding: 60px 0;
    background: var(--dark-bg);
}

/* Mobile about adjustments */
@media (max-width: 768px) {
    .about {
        padding: 40px 0;
    }
}

.about-story {
    max-width: 900px;
    margin: 2rem auto 4rem;
    text-align: center;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Mobile about content adjustments */
@media (max-width: 768px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .about-left .section-title {
        font-size: 1.3rem !important;
        text-align: center !important;
    }
    
    .about-bio {
        font-size: 1rem;
        text-align: left;
    }
    
    .timeline {
        padding-left: 30px;
    }
}

.about-left .section-title {
    font-size: 1.5rem;
    text-align: left;
    margin-bottom: 2rem;
    color: var(--green);
}

.about-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.small-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
}

.small-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-bio {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: 400;
}

.about-bio-first {
    font-size: 1.15rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: 1.5rem;
}

/* Timeline */
.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline-line {
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--primary-green);
}

.timeline-item {
    position: relative;
    margin-bottom: 3rem;
}

.timeline-dot {
    position: absolute;
    left: -40px;
    top: 5px;
    width: 30px;
    height: 30px;
    background: var(--primary-green);
    border-radius: 50%;
    border: 3px solid var(--dark-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-bg);
    font-weight: 700;
    font-size: 16px;
}

.timeline-header {
    margin-bottom: 2rem;
}

.timeline-header h3 {
    color: var(--primary-green);
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.timeline-year {
    color: var(--primary-green);
    font-size: 0.85rem;
    font-weight: 600;
}

.timeline-content h3 {
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

.timeline-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Featured Projects Section */
.codepens {
    padding: 120px 0 80px;  /* Much more top padding for parallax space */
    background: var(--darker-bg);
}

/* Mobile projects adjustments */
@media (max-width: 768px) {
    .codepens {
        padding: 60px 0 40px;
    }
    
    .codepens .section-title {
        font-size: 1.8rem;
        margin-bottom: 3rem;
    }
}

/* Larger title for featured projects section */
.codepens .section-title {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 5rem;  /* More space below title */
}

.codepen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Tablet codepen grid adjustments */
@media (max-width: 1024px) {
    .codepen-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Mobile codepen grid adjustments */
@media (max-width: 768px) {
    .codepen-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }
}

/* Project Link Wrapper */
.project-link {
    text-decoration: none;
    display: block;
    transition: transform 0.3s ease;
}

.project-link:hover {
    transform: translateY(-8px);
}

.codepen-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-link:hover .codepen-card {
    border-color: var(--primary-green);
    box-shadow: 0 10px 30px rgba(143, 228, 2, 0.2);
}

.project-link:hover .codepen-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(143, 228, 2, 0.1) 100%);
    pointer-events: none;
}

.codepen-card h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    transition: color 0.3s;
    position: relative;
    z-index: 10;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.project-link:hover .codepen-card h3 {
    color: var(--primary-green);
}

.project-type {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 10;
    font-weight: 600;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
}

/* Tech Stack Tags */
.project-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
    position: relative;
    z-index: 10;
}

.tech-tag {
    background: rgba(143, 228, 2, 0.1);
    color: var(--primary-green);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid rgba(143, 228, 2, 0.3);
    transition: all 0.3s;
}

.project-link:hover .tech-tag {
    background: rgba(143, 228, 2, 0.2);
    border-color: var(--primary-green);
}

.codepen-preview {
    display: none;
}

/* Code Rain 1 - Green RAG System */
.code-rain-1::after {
    content: 'RAG embed vector chunk query index search retrieve context semantic similarity 1101001 0110011 1100001 1110100 1100001 documents.vectorize() embeddings.similarity() context.retrieve() query.process() index.search() vector.space() chunk.overlap() semantic.distance() cosine.similarity() 1010101 0011100 1110011 0101010 1100110 0000111 1111000 0110101 RAG.pipeline() embedding.model() chunk.size(512) overlap.ratio(0.2) similarity.threshold(0.8) context.window(4096) retrieval.topk(10) rerank.crossencoder() 1100101 0011010 1110110 0101100 vector.database() pinecone.upsert() chromadb.query() faiss.index() weaviate.search() qdrant.retrieve() milvus.similarity() 0110011 1010010 0011101 1111010 0101001 1100011 document.loader() text.splitter() metadata.extract() preprocessing.clean() tokenization.subword() embedding.openai() similarity.cosine() distance.euclidean() 1010110 0110101 1111001 0011010 context.relevance() query.expansion() hypothetical.documents() retrieval.augmented() generation.grounded() factual.accuracy() hallucination.reduction() 0101011 1100100 0011110 1010001 1110101 0100110 vector.dimensions(1536) embedding.ada002() context.injection() prompt.engineering() response.generation() knowledge.retrieval() information.extraction() 1100011 0101110 1111010 0010101 1001100 0110111 semantic.search() hybrid.retrieval() dense.sparse() keyword.matching() neural.ranking() passage.reranking() query.understanding() intent.classification()';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: rgba(143, 228, 2, 0.25);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 16px;
    white-space: pre-wrap;
    word-spacing: 3px;
    animation: codeRain1 7s linear infinite;
    animation-play-state: running;
    z-index: 1;
    pointer-events: none;
    padding: 1rem;
    overflow: hidden;
}

/* Code Rain 2 - Blue Multi-Agent */
.code-rain-2::after {
    content: 'agent.hierarchy() protocol.delegate() coordinate.communicate() 1010111 0101010 1111000 0011101 1001100 0110110 multi.agent.system() task.distribution() consensus.algorithm() distributed.computing() message.passing() coordination.protocol() 0110101 1010011 0011110 1100101 0101001 1111010 agent.spawn() worker.delegate() supervisor.monitor() failover.mechanism() load.balancing() resource.allocation() 1100110 0010101 1110011 0101100 1001010 0110111 communication.bus() event.driven() async.messaging() queue.management() broker.pattern() publish.subscribe() 0101110 1100011 0011101 1010010 1111001 0100110 agent.lifecycle() state.machine() behavior.tree() decision.making() planning.algorithm() goal.oriented() 1010101 0110100 1111010 0011001 0101111 1100010 swarm.intelligence() collective.behavior() emergent.properties() self.organization() adaptive.systems() machine.learning() 0110111 1010010 0011100 1101001 0101010 1110011 peer.to.peer() network.topology() graph.algorithms() shortest.path() routing.protocol() discovery.service() 1100101 0101001 1111100 0010110 1010011 0110101 task.queue() priority.scheduling() deadline.management() resource.contention() mutex.locks() semaphore.signals() 0011110 1100110 0101101 1010001 1111010 0100111 distributed.consensus() raft.algorithm() byzantine.fault() leader.election() quorum.based() consistency.model()';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: rgba(91, 141, 238, 0.25);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 16px;
    white-space: pre-wrap;
    word-spacing: 4px;
    animation: codeRain2 5s linear infinite 1s;
    animation-play-state: running;
    z-index: 1;
    pointer-events: none;
    padding: 1rem;
    overflow: hidden;
}

/* Code Rain 3 - Purple E2B Sandbox */
.code-rain-3::after {
    content: 'sandbox.execute() secure.isolate() container.runtime() 1100110 1010101 0011101 1111000 0101010 1001100 docker.container() kubernetes.pod() namespace.isolation() cgroup.limits() seccomp.filter() 0110101 1010011 0011110 1100101 0101001 1111010 process.sandbox() memory.protection() filesystem.mount() network.namespace() security.context() 1100110 0010101 1110011 0101100 1001010 0110111 chroot.jail() capability.drop() user.namespace() privilege.escalation() access.control() permission.model() 0101110 1100011 0011101 1010010 1111001 0100110 virtual.machine() hypervisor.type1() hardware.isolation() guest.os() paravirtualization() container.escape() 1010101 0110100 1111010 0011001 0101111 1100010 code.execution() dynamic.analysis() static.analysis() malware.detection() behavior.monitoring() anomaly.detection() 0110111 1010010 0011100 1101001 0101010 1110011 runtime.security() exploit.mitigation() buffer.overflow() return.oriented() stack.canary() address.randomization() 1100101 0101001 1111100 0010110 1010011 0110101 zero.trust() defense.depth() least.privilege() attack.surface() threat.modeling() vulnerability.assessment() 0011110 1100110 0101101 1010001 1111010 0100111 secure.boot() trusted.execution() enclave.protection() attestation.remote() cryptographic.verification() hardware.security()';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: rgba(123, 104, 238, 0.25);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 16px;
    white-space: pre-wrap;
    word-spacing: 2px;
    animation: codeRain3 8s linear infinite 2.5s;
    animation-play-state: running;
    z-index: 1;
    pointer-events: none;
    padding: 1rem;
    overflow: hidden;
}

/* Code Rain 4 - Orange A2A Protocol */
.code-rain-4::after {
    content: 'protocol.vision() future.network() communicate.bridge() enterprise.architecture() 0110011 1111000 0101010 1100110 0011101 1010101 agent.to.agent() p2p.communication() mesh.network() distributed.ledger() blockchain.consensus() smart.contracts() 1010110 0110101 1111001 0011010 0101100 1100011 interoperability.layer() protocol.stack() osi.model() tcp.ip() http.websocket() grpc.streaming() 0101011 1100100 0011110 1010001 1111101 0100110 api.gateway() service.mesh() microservices() container.orchestration() load.balancer() circuit.breaker() 1100011 0101110 1111010 0010101 1001100 0110111 message.broker() event.sourcing() cqrs.pattern() saga.orchestration() eventual.consistency() distributed.transaction() 0110101 1010011 0011110 1100101 0101001 1111010 network.topology() graph.theory() spanning.tree() routing.algorithm() bgp.protocol() ospf.link.state() 1100110 0010101 1110011 0101100 1001010 0110111 encryption.transport() tls.handshake() certificate.authority() public.key() digital.signature() cryptographic.hash() 0101110 1100011 0011101 1010010 1111001 0100110 federated.learning() distributed.ai() model.aggregation() privacy.preserving() differential.privacy() homomorphic.encryption() 1010101 0110100 1111010 0011001 0101111 1100010 edge.computing() fog.layer() latency.optimization() bandwidth.management() cdn.distribution() caching.strategy() 0110111 1010010 0011100 1101001 0101010 1110011 protocol.governance() standards.compliance() rfc.specifications() ieee.standards() w3c.recommendations() internet.engineering()';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: rgba(255, 165, 0, 0.25);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 16px;
    white-space: pre-wrap;
    word-spacing: 5px;
    animation: codeRain4 6s linear infinite 4s;
    animation-play-state: running;
    z-index: 1;
    pointer-events: none;
    padding: 1rem;
    overflow: hidden;
}

/* Animations are now always running */
/* Removed visibility dependency for constant animation */

@keyframes codeRain1 {
    0% {
        transform: translateY(-50px) rotateX(0deg);
        opacity: 0.8;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: translateY(50px) rotateX(2deg);
        opacity: 0.8;
    }
}

@keyframes codeRain2 {
    0% {
        transform: translateY(-30px) scale(0.98);
        opacity: 0.8;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: translateY(30px) scale(1.02);
        opacity: 0.8;
    }
}

@keyframes codeRain3 {
    0% {
        transform: translateY(-40px) skewX(-1deg);
        opacity: 0.8;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: translateY(40px) skewX(1deg);
        opacity: 0.8;
    }
}

@keyframes codeRain4 {
    0% {
        transform: translateY(-35px) rotateZ(-0.5deg);
        opacity: 0.8;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: translateY(35px) rotateZ(0.5deg);
        opacity: 0.8;
    }
}

.animation-demo {
    width: 60px;
    height: 60px;
    background: rgba(143, 228, 2, 0.3);
    border: 2px solid var(--primary-green);
    border-radius: 50%;
}

.animation-demo.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 0.5; }
    100% { transform: scale(1); opacity: 0.8; }
}

.animation-demo.rotate {
    background: rgba(0, 123, 255, 0.3);
    border-color: #007bff;
    border-radius: 8px;
    animation: rotateCard 3s infinite;
}

@keyframes rotateCard {
    0% { transform: rotateY(0); }
    50% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}

.animation-demo.wave {
    background: rgba(138, 43, 226, 0.3);
    border-color: #8a2be2;
    animation: waveLoader 2s infinite;
}

@keyframes waveLoader {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.5); }
}

.animation-demo.gradient {
    background: rgba(255, 215, 0, 0.3);
    border-color: #ffd700;
    animation: gradientShift 3s infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.carousel-dots .dot {
    width: 10px;
    height: 10px;
    background: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.carousel-dots .dot.active {
    background: var(--primary-green);
}

/* Contact Section */
.contact {
    padding: 60px 0;
    background: var(--dark-bg);
}

/* Mobile contact adjustments */
@media (max-width: 768px) {
    .contact {
        padding: 40px 0;
    }
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Mobile contact wrapper adjustments */
@media (max-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact-form {
        padding: 2rem 1.5rem;
    }
    
    .contact-form h3 {
        font-size: 1.2rem;
    }
    
    .terminal-container {
        max-height: 400px;
    }
    
    .terminal-body {
        height: 250px;
    }
}

/* Terminal Container Styling */
.terminal-container {
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 500px; /* Match form height */
}

.terminal-header {
    background: #2a2a2a;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(143, 228, 2, 0.1);
}

.terminal-dots {
    display: flex;
    gap: 0.5rem;
}

.terminal-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.terminal-dots .dot.red {
    background: #ff5f57;
}

.terminal-dots .dot.yellow {
    background: #ffbd2e;
}

.terminal-dots .dot.green {
    background: #28ca42;
}

.terminal-title {
    color: #888;
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
    margin-left: auto;
}

.terminal-body {
    flex: 1;
    padding: 1.5rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #ccc;
    overflow-y: auto;
    height: 350px; /* Fixed height for scrolling */
    position: relative;
}

.terminal-content {
    margin-bottom: 1rem;
}

.terminal-line {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.terminal-prompt {
    color: var(--primary-green);
    margin-right: 0.5rem;
    font-weight: 600;
}

.terminal-command {
    color: #fff;
}

.terminal-output {
    color: #888;
    white-space: pre-wrap;
}

.terminal-input-line {
    display: flex;
    align-items: center;
}

.terminal-cursor {
    width: 10px;
    height: 20px;
    background: var(--primary-green);
    animation: blink 1s infinite;
    margin-left: 2px;
}

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

.terminal-footer {
    padding: 1rem 1.5rem;
    background: rgba(143, 228, 2, 0.05);
    border-top: 1px solid rgba(143, 228, 2, 0.1);
}

/* Keep terminal input line at bottom */
.terminal-input-line {
    position: sticky;
    bottom: 0;
    background: #1a1a1a;
    padding-bottom: 0.5rem;
}

/* Smooth scrolling for terminal */
.terminal-body::-webkit-scrollbar {
    width: 8px;
}

.terminal-body::-webkit-scrollbar-track {
    background: #0a0a0a;
}

.terminal-body::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

.terminal-body::-webkit-scrollbar-thumb:hover {
    background: #444;
}

.contact-form-container {
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
}

.form-header {
    background: #2a2a2a;
    padding: 1rem;
}

.dots {
    display: flex;
    gap: 0.5rem;
}

.dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }

.contact-form {
    padding: 3rem;
}

.contact-form h3 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 8px;
    color: white;
    font-family: inherit;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--text-secondary);
}

.submit-btn {
    width: 100%;
    padding: 1rem;
    background: var(--primary-green);
    color: var(--dark-bg);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(158, 255, 0, 0.3);
}

.contact-info-card {
    background: var(--primary-green);
    color: var(--dark-bg);
    padding: 3rem;
    border-radius: 12px;
}

.contact-info-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.contact-info-card p {
    margin-bottom: 2rem;
    opacity: 0.8;
}

.contact-details {
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.contact-item i {
    width: 20px;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 40px;
    height: 40px;
    background: var(--dark-bg);
    color: var(--primary-green);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s;
}

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

/* Wave background mobile adjustments */
@media (max-width: 768px) {
    .wavy-background {
        height: 300px;
        top: 20%;
    }
    
    .wave-svg {
        width: 200%;
        left: -50%;
    }
}

/* Responsive */
/* Coming Soon Message Animations */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Additional mobile optimizations */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2.2rem;
    }
    
    .hero-avatar {
        width: 200px;
        height: 200px;
    }
    
    .btn-outline {
        font-size: 1.1rem;
        padding: 1rem 1.8rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .service-card p {
        font-size: 0.8rem;
    }
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Fix horizontal scrolling */
html, body {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Ensure html element allows scrolling */
html {
    height: 100%;
}

/* Ensure smooth scrolling behavior */
html {
    scroll-behavior: smooth;
}

/* Improve touch targets for mobile */
@media (max-width: 768px) {
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
    
    .nav-link {
        padding: 1rem;
    }
    
    .social-link {
        width: 44px;
        height: 44px;
    }
}

/* TECHNICAL TOOLTIPS AND EXPANDABLE SECTIONS */

/* Tooltip Styles */
.project-link[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid var(--primary-green);
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: 300px;
    width: max-content;
    z-index: 1000;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: tooltipFadeIn 0.3s ease-out;
    margin-bottom: 8px;
}

.project-link[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--primary-green);
    z-index: 1000;
    margin-bottom: 2px;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Technical Expand Sections */
.technical-expand {
    transition: all 0.3s ease-out;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(-10px);
}

.technical-expand.expanded {
    opacity: 1;
    max-height: 300px;
    transform: translateY(0);
}

.technical-expand p {
    margin: 8px 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #ccc;
}

.technical-expand strong {
    color: var(--primary-green);
}

/* Project Card Hover Enhancements */
.codepen-card {
    position: relative;
    overflow: hidden; /* Keep code rain contained */
}

.codepen-card:hover .technical-expand {
    display: block !important;
    opacity: 1;
    max-height: 300px;
    transform: translateY(0);
}

/* Expand Button for Mobile */
.expand-btn {
    display: none;
    background: rgba(143, 228, 2, 0.2);
    border: 1px solid var(--primary-green);
    color: var(--primary-green);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    margin-top: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.expand-btn:hover {
    background: rgba(143, 228, 2, 0.3);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    /* Hide tooltips on mobile, show expand buttons instead */
    .project-link[data-tooltip]:hover::after,
    .project-link[data-tooltip]:hover::before {
        display: none;
    }
    
    .expand-btn {
        display: inline-block;
    }
    
    .codepen-card:hover .technical-expand {
        display: none !important;
    }
}

/* Enhanced Service Card Technical Details */
.service-card .tech-details {
    margin-top: 15px;
    padding: 15px;
    background: rgba(143, 228, 2, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(143, 228, 2, 0.2);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease-out;
}

.service-card:hover .tech-details {
    opacity: 1;
    max-height: 200px;
}

.tech-details h4 {
    color: var(--primary-green);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.tech-details ul {
    list-style: none;
    padding: 0;
}

.tech-details li {
    color: #999;
    font-size: 0.8rem;
    margin: 4px 0;
    padding-left: 15px;
    position: relative;
}

.tech-details li::before {
    content: "▸";
    color: var(--primary-green);
    position: absolute;
    left: 0;
}