/* --- Fonts & Base --- */
@font-face {
    font-family: "Aller";
    src: url("../assets/fonts/Aller_Std.ttf") format("truetype");
    font-weight: normal;
}
@font-face {
    font-family: "Aller";
    src: url("../assets/fonts/Aller_Std_Bdlt.ttf") format("truetype");
    font-weight: bold;
}
@font-face {
    font-family: "Aptos";
    src: url("../assets/fonts/Aptos.ttf") format("truetype");
    font-weight: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Aptos", sans-serif;
    background: #0f172a;
    color: white;
    overflow-x: hidden;
}

h1 { font-family: "Aller", sans-serif; }

/* --- Navbar --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background: rgba(15, 23, 42, 0.85); 
    transition: background 0.3s ease;
}

header a {
    color: white;
    text-decoration: none;
    margin-left: 20px;
    font-weight: 500;
    opacity: 0.8;
    transition: opacity 0.3s;
}

header a:hover { opacity: 1; }
header .logo img { height: 30px; }

/* --- Background --- */
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
    background: #080818; 
}

/* --- Hero Section --- */
.hero {
    position: relative;
    height: 120vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;

    padding-bottom: 20vh;
    
    /* NEW: Feathers the bottom 30% of the Hero into pure darkness 
       so it dissolves before the harsh edge can be seen! */
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* 1. THE BACKGROUND SAFETY BUFFER */
.hero-background {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 120vh; /* Matching your hero container */
    
    z-index: -5; 
    background-color: #0f172a; 
    background-image: url('../assets/images/hero-bg.png'); 
    background-size: cover; 
    background-position: center bottom; 
    
    /* NEW: Zooms the image in by 15% to create a buffer zone. 
       Now when JS drags it around, the edges stay safely hidden! */
    transform: scale(1.15); 
    
    will-change: transform, opacity;
}

/* 2. THE FIXED FEATHER OVERLAY */
.hero-overlay {
    position: fixed; /* NEW: Detached from the document flow */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom, transparent 90%, #0f172a 100%);
    z-index: -9; /* Sits right in front of the hero background */
    pointer-events: none; 
    will-change: opacity;
}

.hero-avatar {
    position: relative;
    animation: spaceFloat 12s ease-in-out infinite;
    margin-right: 3rem;
}

.hero-avatar img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.hero-content {
    max-width: 500px;
    text-align: left;
    animation: spaceFloat 14s ease-in-out infinite;
    animation-delay: -5s; 
}

.hero-content h1 {
    font-size: 5rem;
    font-weight: 300;
    margin-bottom: 10px;
    background: linear-gradient(to right, #ffffff, #a5b4fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #e2e8f0;
}

.hero-content p {
    font-size: 1.1rem;
    color: #94a3b8;
    line-height: 1.6;
}

/* --- Aurora Wave Separator --- */
.aurora-wave {
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 15vh;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(
        to top, 
        rgba(15, 23, 42, 1) 0%, 
        rgba(138, 43, 226, 0.4) 30%,   
        rgba(65, 105, 225, 0.15) 70%,  
        transparent 100%
    );
    z-index: 1; 
    pointer-events: none;
}

/* --- Animations --- */
@keyframes spaceFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0px); }
}

.scroll-arrow {
    position: absolute;
    /* MODIFIED: This forces it to sit exactly near the bottom of your monitor, 
       completely ignoring the 120vh height of the parent container. */
    top: calc(100vh - 4rem); 
    left: 50%;
    transform: translateX(-50%);
    
    /* (Keep all your existing font/color styles below) */
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.7;
    z-index: 10;
}

/* --- Projects Section --- */
.projects-section {
    position: relative;
    /* Pushes the planets down safely so they don't crash into the falling hero */
    margin-top: 30vh; 
    z-index: 2;
    /* IMPORTANT: Remove 'overflow: hidden' and the 'mask-image' lines entirely! */
}

.projects-background {
    position: fixed; 
    
    /* NEW: Massive 20% safety buffer on all sides */
    top: -20%;
    left: -20%;
    width: 140vw;
    height: 140vh;
    
    background-image: url('../assets/images/projects-bg.png');
    background-size: cover;
    background-position: center;
    z-index: -5; 
    pointer-events: none;
    will-change: transform, opacity;
    opacity: 0; 
}

.atmosphere-mist {
    position: absolute;
    top: -45vh; 
    left: -20%;
    width: 140%;
    height: 70vh; 
    background: linear-gradient(to bottom, transparent 0%, rgba(45, 212, 191, 0.05) 20%, rgba(79, 70, 229, 0.5) 60%, rgba(11, 17, 32, 1) 100%);
    pointer-events: none;
    z-index: -1;
}

.content-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.section-title {
    font-size: 3.5rem;
    font-weight: 300;
    margin-bottom: 3rem;
    background: linear-gradient(to right, #a78bfa, #60a5fa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

/* Optimized Cards (No Blur) */
.glass-card {
    background: rgba(20, 15, 35, 0.85); 
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.glass-card:hover {
    transform: translateY(-10px);
    border-color: rgba(96, 165, 250, 0.3); 
}

.card-image-placeholder {
    width: 100%;
    height: 180px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
}

.glass-card h3 {
    font-size: 1.5rem;
    color: #e2e8f0;
    margin-bottom: 1rem;
}

.glass-card p {
    color: #94a3b8;
    line-height: 1.6;
}



.orbital-system {
    position: relative;
    width: 600px;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 5rem auto; 
    z-index: 2;

    /* NEW: Hardware acceleration for smooth scrolling */
    will-change: opacity, transform;
    opacity: 0; 
}

.system-core {
    position: relative; /* Needed to anchor the tooltip */
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    z-index: 50; 
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    
    /* NEW: Link styling */
    text-decoration: none; 
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.system-core:hover {
    transform: scale(1.1);
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.9);
    z-index: 150; 
}

/* --- 2. The Core HUD --- */
.core-tooltip {
    position: absolute;
    /* MODIFIED: Anchors the tooltip above the Core instead of below it */
    bottom: 120%; 
    left: 50%;
    
    /* Starts slightly lower (closer to the core) for the slide-up animation */
    transform: translateX(-50%) translateY(10px);
    
    width: max-content;
    padding: 16px 24px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Slide up and fade in */
.system-core:hover .core-tooltip {
    opacity: 1;
    /* Slides exactly into place above the core */
    transform: translateX(-50%) translateY(0);
}
/* --- 3. Core HUD Typography --- */
.core-tooltip h4 {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.core-tooltip p {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-bottom: 16px;
}

.core-tooltip .enter-btn {
    display: inline-block;
    font-size: 0.85rem;
    color: #0f172a;
    background: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}



/* The invisible rings that spin */
.orbit {
    position: absolute;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    will-change: transform;
    pointer-events: none; 
    
    /* Read the rotation angle from JS */
    transform: rotate(var(--orbit-angle, 0deg));
}

/* FIX 1: Explicitly matching the duration and direction for BOTH 
   the ring and the text inside it, so they sync perfectly.
*/
.orbit-1 { width: 300px; height: 300px; }
.orbit-1 .node-content { animation-duration: 20s; }

.orbit-2 { width: 500px; height: 500px; }
.orbit-2 .node-content { animation-duration: 35s; animation-direction: reverse; }

/* The physical "planet" */
.project-node {
    position: absolute;
    top: -20px; 
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: #60a5fa;
    border-radius: 50%;
    cursor: pointer; 
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.6);
    pointer-events: auto; 
    transition: transform 0.3s ease; /* Smooth scaling */
    z-index: 10;
    /*opacity: 0;
    transition: opacity 0.3 ease-out;*/
}

.project-node::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%; /* Starts wide */
    height: 250%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    
    /* Subtle sci-fi border and faint background tint */
    border: 1px solid rgba(96, 165, 250, 0.3);
    background: rgba(96, 165, 250, 0.1); 
    
    opacity: 0;
    pointer-events: none;
    
    /* Slower, less abrupt opacity transition for a smoother fade-out */
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 0.4s ease-out; 
}

/* --- LAYER 2: The 3 Spinning Lines (Outer Ring) --- */
.project-node::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%; 
    height: 250%;
    transform: translate(-50%, -50%); /* Removed the 0deg rotation since animation handles it */
    border-radius: 50%;
    
    /* MODIFIED: Longer Lines! 
       Changed from 40-degree chunks to 60-degree chunks */
    background: conic-gradient(
        #60a5fa 0deg 60deg, transparent 60deg 120deg,
        #60a5fa 120deg 180deg, transparent 180deg 240deg,
        #60a5fa 240deg 300deg, transparent 300deg 360deg
    );
    
    /* MODIFIED: Thinner Lines! 
       Pushed the hollow center mask outwards from 88% to 94% */
    -webkit-mask: radial-gradient(farthest-side, transparent 94%, black 96%);
    mask: radial-gradient(farthest-side, transparent 94%, black 96%);
    
    opacity: 0;
    pointer-events: none;
    
    /* FIX: The Anti-Snap Trick! 
       By placing the animation here, it spins endlessly in the invisible background. */
    animation: target-scan 4s linear infinite;
    
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 0.4s ease-out;
}

/* The counter-spinning text */
.node-content {
    position: absolute;
    top: 50%; 
    left: 50%;
    white-space: nowrap;
    font-weight: bold;
    color: #e2e8f0;
    
    /* MATHEMATICAL COUNTER-ROTATION:
       We take the parent's angle, multiply it by -1 to keep it upright, 
       and then push it down 45px.
    */
    transform: translate(-50%, -50%) rotate(calc(var(--orbit-angle, 0deg) * -1)) translateY(45px);
}

/* FIX 2: The `:has()` selector. 
   This tells the browser to ONLY pause if a `.project-node` is actively being hovered.
*/
.orbital-system:has(.project-node:hover) .orbit,
.orbital-system:has(.project-node:hover) .node-content {
    animation-play-state: paused;
}

/* Make the specific planet being hovered pop out slightly */
.project-node:hover {
    transform: translateX(-50%) scale(1.2);
    /* NEW: Forces the hovered planet and its HUD above the entire solar system */
    z-index: 100; 
}

.project-node:hover::before {
    opacity: 1;
    width: 120%;
    height: 120%;
}

/* 2. Outer 3-line ring shrinks to a wider orbit and begins spinning */
.project-node:hover::after {
    opacity: 1;
    width: 160%;
    height: 160%;
    /* The animation property was removed from here so it doesn't reset on mouse-leave! */
}


/* Elevates the ENTIRE orbit to the front when its node is hovered, 
   breaking it out of the stacking context trap! */
.orbit:has(.project-node:hover) {
    z-index: 100;
}


.content-container, .orbital-system {
    position: relative;
    z-index: 2;
}


/* =========================================
   SCI-FI HUD TOOLTIP
   ========================================= */

/* 1. The Wrapper: Handles the counter-rotation so the HUD stays perfectly upright */
.hud-wrapper {
    position: absolute;
    /* 1. Anchor to the exact dead-center of the planet */
    top: 50%; 
    left: 50%;
    
    /* 2. Shift it perfectly back to the core (-50%, -50%), THEN counter-rotate */
    transform: translate(-50%, -50%) rotate(calc(var(--orbit-angle, 0deg) * -1));
    
    pointer-events: none;
    z-index: 20;
}

/* 2. The HUD Card: Handles the visuals and the slide animation */
.hud-tooltip {
    position: absolute;
    /* Base distance above the planet */
    bottom: 55px; 
    left: 50%;
    
    /* Starts slightly lower to create the "slide up" lock-on effect */
    transform: translateX(-50%) translateY(15px);
    
    width: max-content;
    padding: 12px 18px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(96, 165, 250, 0.6);
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.2);
    
    /* Hidden by default */
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 3. The Laser Connecting Line */
.hud-tooltip::before {
    content: '';
    position: absolute;
    top: 100%; /* Spawns exactly at the bottom border of the HUD */
    left: 50%;
    transform: translateX(-50%);
    
    width: 2px;
    height: 30px; /* Stretches down to the planet */
    background: linear-gradient(to bottom, rgba(96, 165, 250, 0.8), transparent);
}

/* 4. Text Styling for the HUD */
.hud-tooltip h4 {
    font-size: 1.1rem;
    color: white;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hud-tooltip p {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-bottom: 8px;
}

.hud-tooltip .tech-stack {
    display: inline-block;
    font-size: 0.75rem;
    color: #60a5fa;
    font-family: monospace;
    background: rgba(96, 165, 250, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

/* 5. The Hover Trigger */
/* When hovering the planet, the HUD fades in and snaps upwards into position */
.project-node:hover .hud-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* --- Global Navigation HUD --- */
.nav-hud {
    position: fixed;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    pointer-events: none; /* Lets users click through the empty space */
}

/* Data Readouts */
.hud-data {
    text-align: right;
    font-family: monospace; /* Matches your existing tech-stack style */
    text-transform: uppercase;
}

.hud-label {
    display: block;
    font-size: 0.65rem;
    color: #94a3b8; /* Matches your existing paragraph colors */
    letter-spacing: 2px;
    margin-bottom: 2px;
}

.hud-value {
    display: block;
    font-size: 0.9rem;
    color: #60a5fa; /* Your primary glowing blue */
    font-weight: bold;
    letter-spacing: 1px;
}

/* The Star Chart */
.star-chart {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    position: relative;
    pointer-events: auto; /* Make the dots clickable! */
}

/* The vertical connecting line */
.star-chart::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(96, 165, 250, 0.3);
    z-index: -1;
}

/* The Chart Dots */
.star-chart li {
    width: 8px;
    height: 8px;
    background: #0f172a; /* Hollow inside */
    border: 1px solid rgba(96, 165, 250, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Active / Filled Dot */
.star-chart li.active {
    background: #60a5fa;
    border-color: #60a5fa;
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.8);
    transform: scale(1.2);
}

/* --- The Scan Animation --- */
.scan-effect {
    animation: text-glitch 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}








/* The Animations */
@keyframes spin {
    100% { transform: rotate(360deg); }
}

@keyframes counterSpin {
    0% { 
        /* 1. Center exactly (-50%, -50%)
           2. Counter-rotate to stay upright (0deg)
           3. Push it 45px DOWN in the newly corrected screen space
        */
        transform: translate(-50%, -50%) rotate(0deg) translateY(45px); 
    }
    100% { 
        transform: translate(-50%, -50%) rotate(-360deg) translateY(45px); 
    }
}

/* --- The Rotation Keyframes --- */
@keyframes target-scan {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes text-glitch {
    0% { opacity: 0; transform: translateX(10px); color: white; }
    20% { opacity: 1; transform: translateX(-5px); color: #60a5fa; }
    40% { opacity: 0.5; transform: translateX(5px); }
    60% { opacity: 1; transform: translateX(-2px); color: white; }
    80% { opacity: 0.8; transform: translateX(2px); }
    100% { opacity: 1; transform: translateX(0); color: #60a5fa; }
}