/* ========================================
   HAL 9000 HOMEPAGE STYLES
   ======================================== */

/* Light/Dark Theme Integration */
body {
    background: var(--bg-gradient-light) !important;
    color: var(--text-primary-light);
    transition: all 0.3s ease;
}

/* Center philosophical tagline in projects section */
.projects .philosophical-tagline {
    text-align: center;
}

/* Philosophical tagline contrast adjustments */
.philosophical-tagline {
    color: rgba(160, 100, 15, 0.9) !important; /* Darker for light mode contrast */
}

body.dark-mode .philosophical-tagline {
    color: #d4af37 !important; /* Original golden color for dark mode */
}

/* Project description styling */
.project-description {
    max-width: 800px;
    margin: 2rem auto;
    text-align: center;
    line-height: 1.6;
}

/* Override project-grid margin for proper footer spacing */
.project-grid {
    margin-bottom: 0 !important; /* Remove excessive bottom margin */
}

.project-description p {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    opacity: 0.9;
}

.project-description p:last-child {
    margin-bottom: 0;
    font-style: italic;
    color: rgba(160, 100, 15, 0.9); /* Darker for light mode contrast */
}

body.dark-mode .project-description p:last-child {
    color: rgba(251, 191, 36, 0.9); /* Brighter for dark mode visibility */
}

body.dark-mode {
    background: var(--bg-gradient-dark) !important;
    color: var(--text-primary-dark);
}

/* Page Containers */
.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 0 2rem; /* Remove bottom padding to allow mating */
}

.projects-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem 2rem 2rem; /* Reduce top padding to allow mating */
    /* REMOVED margin-top - let background panels handle spacing */
}

/* Override main styles.css for homepage */
main {
    max-width: none !important; /* NEEDED: Override styles.css main constraint */
    margin: 0 !important; /* NEEDED: Override styles.css main margin */
    padding: 0 !important; /* NEEDED: Override styles.css main padding */
}

/* Header Theme Styling */
header {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    min-height: 80px !important; /* Maintain header height without h1 */
}

body.dark-mode header {
    background: rgba(0, 0, 0, 0.2) !important;
}

nav {
    display: flex !important;
    justify-content: space-between !important; /* Space between left menu and right controls */
    align-items: center !important;
    min-height: 80px !important;
    max-width: none !important; /* Override 1200px constraint - allow full width */
    margin: 0 !important; /* Remove auto centering */
    width: 100% !important; /* Take full header width */
    padding: 0 2rem !important; /* Add padding for better spacing */
}

/* Navigation Layout */
.nav-left {
    position: relative;
    display: flex;
    align-items: center;
}

/* Hamburger Menu Button */
.hamburger-menu {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 2.5rem;
    height: 2rem;
    transition: all 0.3s ease;
}

.hamburger-menu:hover {
    opacity: 0.8;
}

.hamburger-line {
    width: 100%;
    height: 2px;
    background: var(--text-primary-light);
    transition: all 0.3s ease;
    border-radius: 1px;
}

body.dark-mode .hamburger-line {
    background: var(--text-primary-dark);
}

/* Hamburger Animation */
.hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    padding: 1.5rem;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

body.dark-mode .dropdown-menu {
    background: linear-gradient(135deg,
      rgba(15, 20, 35, 0.95) 0%,
      rgba(20, 25, 45, 0.9) 30%,
      rgba(10, 15, 30, 0.95) 70%,
      rgba(18, 23, 40, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
      0 10px 40px rgba(0, 0, 0, 0.3),
      0 0 20px rgba(56, 189, 248, 0.1),
      inset 0 0 20px rgba(50, 80, 150, 0.05);
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown Sections */
.dropdown-section {
    margin-bottom: 1.5rem;
}

.dropdown-section:last-child {
    margin-bottom: 0;
}

.dropdown-section h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a2744;
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow:
      0 0 10px var(--accent-secondary),
      1px 1px 2px rgba(56, 189, 248, 0.1);
    position: relative;
}

.dropdown-section h4::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
      var(--accent-primary) 0%,
      transparent 100%);
    opacity: 0.6;
}

/* Dark mode dropdown title styling */
body.dark-mode .dropdown-section h4 {
    color: var(--text-header-dark);
    text-shadow:
      0 0 10px rgba(56, 189, 248, 0.4),
      0 0 15px rgba(251, 191, 36, 0.2),
      1px 1px 2px rgba(0, 0, 0, 0.8);
}

.dropdown-section a {
    display: block;
    color: var(--text-primary-light);
    text-decoration: none;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    line-height: 1.3;
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
    padding-left: 0.5rem;
    margin-left: -0.5rem;
}

body.dark-mode .dropdown-section a {
    color: var(--text-primary-dark);
}

.dropdown-section a:hover {
    color: #d4af37;
    border-left-color: #d4af37;
    padding-left: 0.75rem;
}


/* Flash Animation Keyframe */
@keyframes flash {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* Responsive Design */
@media (max-width: 768px) {
    nav {
        padding: 0 1rem !important;
    }

    .dropdown-menu {
        min-width: 260px;
        padding: 1rem;
    }
}

.hero {
    text-align: center;
    padding: 0 !important; /* NEEDED: Override styles.css hero padding */
    color: var(--text-primary-light);
    /* max-width and margin not needed - no constraints in main CSS */
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(1200px + 4rem); /* Match container max-width + padding */
    max-width: calc(100vw - 4rem); /* Respect viewport on smaller screens */
    bottom: 0px; /* Extend to section bottom for seamless connection */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 25px 25px 0 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-bottom: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: -1;
}

body.dark-mode .hero {
    color: var(--text-primary-dark);
}

body.dark-mode .hero::before {
    background: rgba(10, 15, 25, 0.3); /* Subtle blue-tinted dark instead of pure black */
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 4rem 0 2rem 0; /* Reduce bottom padding to allow sections to mate */
}

.hero h2 {
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero p {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

.hero p:not(.philosophical-tagline) {
    margin-top: 1rem;
}

.projects {
    margin-top: 0 !important; /* NEEDED: Override styles.css projects margin-top: 4rem */
    /* max-width and padding not needed - no constraints in main CSS */
    position: relative;
}

.projects::before {
    content: '';
    position: absolute;
    top: 0px; /* Start flush at section top */
    left: 50%;
    transform: translateX(-50%);
    width: calc(1200px + 6rem); /* Slightly wider than hero for layered effect */
    max-width: calc(100vw - 2rem); /* Respect viewport on smaller screens */
    bottom: 20px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    border-radius: 0 0 25px 25px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top: none;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    z-index: -1;
}

body.dark-mode .projects::before {
    background: rgba(15, 20, 30, 0.35); /* Subtle blue-tinted dark for consistency */
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.projects h3 {
    color: var(--text-header-light);
    font-size: 2rem;
    font-weight: 300;
    text-align: center;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .projects h3 {
    color: var(--text-header-dark);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.projects-subtitle {
    color: var(--text-secondary-light);
    font-size: 1.1rem;
    text-align: center;
    margin: 0 auto 3rem auto;
    max-width: 600px;
    font-weight: 300;
    line-height: 1.6;
}

body.dark-mode .projects-subtitle {
    color: var(--text-secondary-dark);
}

/* Enhanced Layered Project Cards */
.project-card {
    background: rgba(255, 255, 255, 0.2) !important; /* MORE VISIBLE */
    backdrop-filter: blur(18px) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-5px) !important; /* SUBTLE FLOAT */
    margin: 15px !important;
}

body.dark-mode .project-card {
    background: rgba(0, 0, 0, 0.35) !important; /* MORE VISIBLE FOR DARK */
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.project-card:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.15),
        0 0 20px var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

body.dark-mode .project-card:hover {
    background: rgba(0, 0, 0, 0.3) !important;
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.4),
        0 0 25px var(--accent-primary) !important;
}

.project-card h4 {
    color: var(--text-header-light) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .project-card h4 {
    color: var(--text-header-dark) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.project-card p {
    color: var(--text-secondary-light) !important;
}

body.dark-mode .project-card p {
    color: var(--text-secondary-dark) !important;
}

/* Navigation Controls */
.nav-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
}

.dark-mode-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--accent-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

body.dark-mode .dark-mode-toggle {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--accent-primary);
}

.dark-mode-toggle:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    transform: scale(1.1);
    box-shadow: 0 0 15px var(--accent-primary);
}

body.dark-mode .dark-mode-toggle:hover {
    background: rgba(251, 191, 36, 0.3);
    box-shadow: 0 0 20px var(--accent-primary);
}

.toggle-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.dark-mode-toggle:hover .toggle-icon {
    transform: rotate(20deg);
}

/* Override original learn-more positioning */
.simple-learn-more {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
}


/* Dark mode toggle icon behavior */
body.dark-mode .dark-mode-toggle .toggle-icon {
    content: "☀️";
}

body.dark-mode .dark-mode-toggle .toggle-icon::after {
    content: "☀️";
}

/* ========================================
   HAL EYE EFFECTS
   ======================================== */

/* Enhanced sparkle effect */
.hal-sparkle {
    animation: enhancedSparkle 8s infinite !important;
}

@keyframes enhancedSparkle {
    0%, 85% { 
        opacity: 0; 
        transform: scale(0.3);
        box-shadow: 0 0 4px var(--hal-white-sparkle);
    }
    87% { 
        opacity: 0.6; 
        transform: scale(1.3);
        box-shadow: 0 0 8px var(--hal-white-sparkle);
    }
    89% { 
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 0 12px var(--hal-white-sparkle);
    }
    91% { 
        opacity: 0.7; 
        transform: scale(0.8);
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
    }
    93%, 100% { 
        opacity: 0; 
        transform: scale(0.3);
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
    }
}

/* Enhanced HAL eye pulse */
.hal-logo {
    animation: enhancedPulse 6s infinite !important;
}

@keyframes enhancedPulse {
    0% { 
        filter: drop-shadow(0 0 20px var(--hal-red)) 
                drop-shadow(0 0 40px rgba(255, 0, 0, 0.3));
    }
    50% { 
        filter: drop-shadow(0 0 30px var(--hal-red-glow)) 
                drop-shadow(0 0 50px rgba(255, 0, 0, 0.5))
                drop-shadow(0 0 70px rgba(255, 0, 0, 0.2));
    }
    100% { 
        filter: drop-shadow(0 0 20px var(--hal-red)) 
                drop-shadow(0 0 40px rgba(255, 0, 0, 0.3));
    }
}

/* Status message enhancement */
.hal-status {
    font-family: 'Courier New', monospace !important;
    font-weight: bold !important;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important;
}

/* Scanning line effect */
.hal-scan-line {
    position: absolute;
    top: 0;
    left: -2px;
    width: 2px;
    height: 120px;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255, 255, 255, 0.8) 30%, 
        var(--hal-white-sparkle) 50%, 
        rgba(255, 255, 255, 0.8) 70%, 
        transparent 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 12;
    animation: scanLine 20s infinite;
}

@keyframes scanLine {
    0%, 90% { opacity: 0; left: -2px; }
    91% { opacity: 0.7; left: -2px; }
    95% { opacity: 1; left: 122px; }
    96%, 100% { opacity: 0; left: 122px; }
}

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


/* ========================================
   OVERLAY ANIMATIONS
   ======================================== */

@keyframes overlayLightFadeIn {
    from { 
        opacity: 0;
        background: radial-gradient(circle at center, 
            rgba(251, 191, 36, 0) 0%, 
            rgba(0, 0, 0, 0) 70%);
    }
    to { 
        opacity: 1;
        background: radial-gradient(circle at center, 
            rgba(251, 191, 36, 0.1) 0%, 
            rgba(0, 0, 0, 0.85) 70%);
    }
}

@keyframes contentLightSlideIn {
    from { 
        opacity: 0;
        transform: scale(0.9) translateY(20px);
        box-shadow: 
            0 0 20px rgba(251, 191, 36, 0.1),
            0 0 40px rgba(251, 191, 36, 0.05);
    }
    to { 
        opacity: 1;
        transform: scale(1) translateY(0);
        box-shadow: 
            0 0 60px rgba(251, 191, 36, 0.3),
            0 0 120px rgba(251, 191, 36, 0.15);
    }
}

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

/* ========================================
   DARK MODE OVERLAY STYLES
   ======================================== */



/* ========================================
   ORIGIN INDICATOR STYLES
   ======================================== */
.origin-indicator {
    position: absolute;
    top: 8px;
    left: 8px;
    cursor: pointer;
    z-index: 10;
    user-select: none;
    border-radius: 50%;
    padding: 12px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    animation: originPulse 3s ease-in-out infinite;
}

.origin-indicator:hover img {
    opacity: 1 !important;
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.8)) !important;
    transform: scale(1.1);
}

/* Origin pulse animation for mobile visibility */
@keyframes originPulse {
    0%, 100% { 
        opacity: 0.8; 
        transform: scale(1); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.05); 
    }
}



/* ========================================
   RESPONSIVE CONTAINERS
   ======================================== */

@media (max-width: 768px) {
    .hero-container,
    .projects-container {
        padding: 1rem;
    }
}