/* --- 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;
}


/* --- Spacecraft Altimeter HUD --- */
.altimeter-hud {
    position: fixed;
    left: 40px;
    top: 50%;
    height: 0; /* The container is just a single point in space */
    z-index: 200;
    
    /* Starts hidden in the Dreamscape */
    opacity: 0; 
    pointer-events: none; /* Allows hovering over the whole area */
}

/* 1. The Static Center Lock */
.hud-center-lock {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    color: #60a5fa;
    font-size: 0.6rem;
    opacity: 0.8;
}

.lock-line {
    height: 1px;
    background: #60a5fa;
    box-shadow: 0 0 5px rgba(96, 165, 250, 0.5);
}
.lock-line.left { width: 40px; }
.lock-line.right { width: 40px; }

/* 2. The Moving Scale */
.hud-tape {
    align-items: flex-start; /* Forces the ticks and labels to the left */
}

/* 3. The Ticks (Altimeter markings) */
.tick {
    height: 1px;
    background: rgba(96, 165, 250, 0.4);
    transition: width 0.4s ease, background 0.4s ease;
}
.tick.minor { width: 8px; margin-left: 2px; }
.tick.medium { width: 14px; margin-left: 2px; }
.tick.major { width: 22px; background: rgba(96, 165, 250, 0.7); }

/* 4. The Nodes (Destinations) */
.hud-node {
    display: flex;
    align-items: center;
    cursor: pointer;
    pointer-events: auto; /* Makes them clickable */
}
.hud-node, .tick-cluster {
    align-items: flex-start;
    text-align: left;
}

.hud-node .label {
    font-family: monospace;
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-left: 15px;
    
    /* Passive state: dim and tucked away */
    opacity: 0.3;
    transform: translateX(-10px);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 5. The "Active" State (When passing the center lock) */
.hud-node.active .tick.major {
    width: 30px;
    background: #60a5fa;
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.8);
}
.hud-node.active .label {
    opacity: 1;
    color: #60a5fa;
    transform: translateX(5px);
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
    font-size: 0.85rem;
}

/* 6. The Hover Interaction (Revealing the Instrument) */
.altimeter-hud:hover .tick.major { width: 30px; }
.altimeter-hud:hover .label {
    opacity: 0.8;
    transform: translateX(10px);
}
.altimeter-hud:hover .hud-node.active .label {
    opacity: 1; /* Keep the active one brightest */
}


/* --- 1. Transmission Section Base --- */
.transmission-section {
    position: relative;
    min-height: 100vh;
    background: transparent; /* FIX: Removes the harsh dividing line */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2; /* Sits above the backgrounds */
}

.transmission-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    
    /* Kept your image asset and gradient blend */
    background: linear-gradient(to bottom, rgba(10, 15, 26, 0.2), #020408), 
                url('../assets/images/transmissions-bg.png') center center no-repeat; 
    background-size: cover;
                
    z-index: -6; 
    pointer-events: none;
    opacity: 0; 
    will-change: opacity, transform;
}

/* ... (Keep your .space-dust and .beacon classes exactly the same) ... */

/* Update the holographic UI starting state */

/* --- 2. Deep Space Environment (Drifting Dust) --- */
.space-dust {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    /* Creates a very sparse dot pattern using a radial gradient */
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    z-index: 0;
}
.space-dust.layer-1 {
    background-size: 120px 120px;
    animation: void-drift 90s linear infinite; /* Excruciatingly slow */
}
.space-dust.layer-2 {
    background-size: 180px 180px;
    opacity: 0.5;
    animation: void-drift 140s linear infinite reverse; /* Parallax effect */
}

@keyframes void-drift {
    0% { transform: translateY(0); }
    100% { transform: translateY(-150px); }
}

/* --- 3. The Distant Beacon --- */
.beacon-container {
    position: absolute;
    /* Placed slightly above center so the text sits nicely below it */
    top: 30%; 
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* The tiny physical satellite */
.beacon-core {
    width: 3px;
    height: 3px;
    background: #e2e8f0;
    border-radius: 50%;
    box-shadow: 0 0 10px #60a5fa;
}

/* The quiet radio wave pulse */
.beacon-pulse {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(96, 165, 250, 0.4);
    border-radius: 50%;
    /* A long 6-second gap between pings */
    animation: beacon-ping 6s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; 
}

@keyframes beacon-ping {
    0% { transform: scale(0); opacity: 1; border-width: 1px; }
    40% { opacity: 0; }
    100% { transform: scale(1); opacity: 0; border-width: 0px; }
}

/* --- 4. Holographic Broadcast UI --- */
.broadcast-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 15vh; 
    
    /* Removed the transition so JS can control it smoothly! */
    opacity: 0; 
    transform: translateY(20px);
    will-change: opacity, transform;
}

/* You can also DELETE the .broadcast-content.visible block below it */

/* Added by JavaScript when scrolled into view */
.broadcast-content.visible {
    opacity: 1;
    transform: translateY(0);
}

.broadcast-header {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.broadcast-id {
    font-family: monospace;
    font-size: 0.9rem;
    color: #60a5fa;
    letter-spacing: 3px;
    text-shadow: 0 0 15px rgba(96, 165, 250, 0.5); /* Glowing hologram text */
}

.broadcast-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: monospace;
}

.meta-label {
    font-size: 0.6rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.meta-value {
    font-size: 0.8rem;
    color: #94a3b8;
    letter-spacing: 1px;
}

/* The defining line, fading out to the right */
.broadcast-divider {
    width: 100%;
    max-width: 300px;
    height: 1px;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.5), transparent);
    margin-bottom: 35px;
}

/* The actual message */
.broadcast-message {
    font-size: 1.3rem;
    line-height: 1.5;
    color: #f8fafc;
    letter-spacing: 0.5px;
    font-weight: 300; /* Keeps it delicate */
}

.broadcast-message p {
    opacity: 0.85; /* Slight transparency so it isn't blindingly white */
}


.origin-background {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    
    /* CHANGED: Both gradient colors are now highly transparent (0.2 and 0.5 opacity) */
    background: linear-gradient(to bottom, rgba(2, 4, 8, 0.1), rgba(5, 11, 20, 0.4)), 
                url('../assets/images/origin-bg.png') center center no-repeat;
    background-size: cover;
    
    z-index: -5; 
    pointer-events: none;
    opacity: 0; 
    will-change: opacity, transform;
}

/* The Distant Star */
.distant-star {
    position: absolute;
    top: 20%;
    right: 20%;
    width: 4px;
    height: 4px;
    background: #e0f2fe;
    border-radius: 50%;
    box-shadow: 
        0 0 20px 2px rgba(186, 230, 253, 0.4),
        0 0 60px 5px rgba(56, 189, 248, 0.2);
}

/* The Abstract Observatory Silhouette */
.observatory-silhouette {
    position: absolute;
    bottom: -5%;
    right: 15%;
    width: 300px;
    height: 250px;
    opacity: 0.15; /* Barely visible */
    filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.observatory-silhouette .dome {
    width: 160px;
    height: 90px;
    background: #0f172a;
    border-top-left-radius: 90px;
    border-top-right-radius: 90px;
    position: relative;
}

/* The subtle telescope opening */
.observatory-silhouette .dome::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 30px;
    width: 25px;
    height: 80px;
    background: #020408;
    transform: rotate(25deg);
}

.observatory-silhouette .base {
    width: 200px;
    height: 160px;
    background: #0f172a;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- The Scrolling Letter --- */
.origin-section {
    position: relative;
    height: 250vh; /* Creates the "time" needed to scroll through the stillness */
    padding-left: 22vw; /* Clears the HUD */
    z-index: 2;
}

.letter-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center; /* Locks the letter perfectly in the vertical center */
}
.letter-container {
    max-width: 800px; 
    display: flex;
    flex-direction: column;
    gap: 24px;
    opacity: 0;
    will-change: opacity;
    
    /* NEW: Nudges the entire letter block down to fix the optical center */
    margin-top: 11vh; 
}

.letter-container p {
    font-size: 0.95rem; /* Scaled down from 1.1rem */
    line-height: 1.85;
    color: #94a3b8;
    font-weight: 300;
}

.letter-container p.closing-thought {
    color: #cbd5e1;
    font-style: italic;
    margin-top: 15px;
}

.interests-list {
    /* ... keep existing flex properties ... */
    font-size: 0.75rem; /* Scaled down from 0.85rem */
}

.interests-list .dot {
    color: #334155;
}

/* --- The Signature --- */
.personal-seal {
    margin-top: 30px; /* BASE VERTICAL SPACING: Increase to push down from the quote */
    display: flex;
    flex-direction: row; 
    align-items: center; 
    align-self: flex-end; 
    gap: 12px; 
    
    /* THE NUDGE CONTROLS: 
       First value (X): Negative moves LEFT, Positive moves RIGHT
       Second value (Y): Negative moves UP, Positive moves DOWN 
    */
    transform: translate(-30px, -15px); 
}

.seal-mark {
    font-size: 1.1rem;
    color: #60a5fa;
    opacity: 0.6;
    /* Optional: A slight nudge down to perfectly optically align with uppercase text */
    transform: translateY(1px); 
}

.seal-name {
    font-family: 'Aller', sans-serif;
    font-size: 1rem;
    color: #e2e8f0;
    letter-spacing: 2px;
    /* text-transform: uppercase; */
}

/* --- The Star Pulse--- */
.star-pulse {
    position: absolute;
    
    /* 🎯 Tweak these two numbers until the red dot is perfectly on your star */
    top: 18.7%; 
    left: 71.6%; 
    
    /* --- Temporary Calibration Styles --- */
    /*width: 6px;
    /*height: 6px;
    /*background-color: #ff0000;
    /*border-radius: 50%;
    /*transform: translate(-50%, -50%);
    /*z-index: 999;

    /* --- Real Pulse Animation --- */
    width: 50px;
    height: 50px;
    border: 1px solid rgba(226, 232, 240, 0.25);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: stellar-pulse 4s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==========================================
   BEYOND SECTION (Connected Worlds)
   ========================================== */

.beyond-background {
    position: fixed;
    top: -5%; left: -5%;
    width: 110vw; height: 110vh;
    
    /* Add your image here */
    background-image: url('beyond-bg.png'); 
    background-size: cover;
    background-position: center;
    
    z-index: -4;
    opacity: 0; 
    will-change: opacity, transform;
    pointer-events: none;
}

/* Optional: A dark celestial overlay to ensure the interactive stars pop */
.beyond-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top center, rgba(10, 17, 40, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%);
    pointer-events: none;
}

.beyond-section {
    position: relative;
    width: 100vw;
    height: 180vh; /* Extremely tall so the user drifts through the stars */
    z-index: 2;
}



.portal-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px; 
    height: 130px;
    z-index: -1; 
    
    transform: translate(-50%, -50%) translateZ(0); 
    will-change: opacity, transform;
    
    /* The Rim Glow is safe here because there is no clip-path to cut it */
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) 
            drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
    
    opacity: 0;
    transition: opacity 0.6s ease;
}
.star-link:hover .portal-wrapper {
    opacity: 1; 
    pointer-events: auto;
}
.star-link:hover .portal-base,
.star-link:hover .portal-distortion {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    transform: scale(1);
}
.star-link:hover .portal-distortion {
    opacity: 1;
    filter: url('#spatial-distortion');
    visibility: visible; /* Wakes up the GPU only when needed */
    transition: clip-path 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.85s ease,
                visibility 0s linear 0s; /* Instantly visible so it can begin fading in */
}


.star-link:hover .star-portal-distortion {
    /* Cheaply fade in the pre-calculated distortion */
    opacity: 1; 
}

/* --- The Interactive Stars --- */
/* --- The Interactive Stars --- */
.star-link {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    padding: 20px; /* Invisible hover area */
    transform: translate(-50%, -50%);
}

/* 1. The Glow Container */
.star-core {
    position: relative;
    width: 16px; /* The perfect middle ground */
    height: 16px;
    /* We use drop-shadow instead of box-shadow because clip-path cuts off normal shadows */
    filter: drop-shadow(0 0 6px rgba(226, 232, 240, 0.6));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease;
}

/* 2. The True Geometric Star */
.star-core::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #e2e8f0;
    /* This carves a perfect 4-pointed star out of the square */
    clip-path: polygon(
        50% 0%,   /* Top point */
        58% 42%,  /* Top right inner corner */
        100% 50%, /* Right point */
        58% 58%,  /* Bottom right inner corner */
        50% 100%, /* Bottom point */
        42% 58%,  /* Bottom left inner corner */
        0% 50%,   /* Left point */
        42% 42%   /* Top left inner corner */
    );
    transition: background 0.4s ease;
}

/* --- Hover State --- */
.star-link:hover .star-core {
    transform: scale(1.3);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1)); /* Brighten glow */
}

.star-link:hover .star-core::before {
    background: #ffffff;
}

/* --- Tooltip Alignment --- */
.star-tooltip {
    position: absolute;
    top: 90px; /* Sits perfectly below the 16px star and its padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    z-index: 10;
}

.star-link:hover .star-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* --- 3. The Space Fracture (Portal) --- */
.star-portal {
    position: relative;
    width: 100%;
    height: 100%;
    
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
    transform: scale(1.15); 
    will-change: transform, clip-path;
    
    transition: clip-path 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.star-portal::after {
    content: '';
    position: absolute;
    inset: -100%; /* Massive size so it can rotate freely */
    /* Creates rays of light/distortion that pass over the image */
    background: conic-gradient(from 0deg at 50% 50%, 
        transparent 0deg, 
        rgba(255, 255, 255, 0.15) 60deg, 
        transparent 120deg,
        rgba(255, 255, 255, 0.15) 180deg,
        transparent 240deg);
    mix-blend-mode: overlay; /* Blends with the image colors dynamically */
    opacity: 0;
    transition: opacity 0.85s ease;
    pointer-events: none;
}

/* State 2: Reality Opens */
/* Expand the hexagon shape */
.star-link:hover .star-portal {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    transform: scale(1);
}

.star-link:hover .star-portal::after {
    opacity: 1;
    animation: portal-spin 8s infinite linear;
}

/* State 3: Stepping Through (Triggered by JS) */
.star-portal.gateway-open {
    width: 250vw; 
    height: 250vh;
    z-index: 999;
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%) !important;
    
    /* Instantly clear the heatwave and the glowing edges for a clean takeover */
    filter: none !important;
    box-shadow: inset 0 0 0px rgba(0,0,0,0) !important;
    
    transition: clip-path 1.2s cubic-bezier(0.7, 0, 0.2, 1),
                width 1.2s cubic-bezier(0.7, 0, 0.2, 1),
                height 1.2s cubic-bezier(0.7, 0, 0.2, 1),
                box-shadow 1.2s ease,
                filter 0.2s ease; /* Faster transition for the filter snap */
}

.star-portal-base, .star-portal-distortion {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 0; /* Ensures clean edges */
}

/* THE DISTORTION LAYER: Permanently distorted, but invisible */
.star-portal-distortion {
    filter: url('#spatial-distortion');
    opacity: 0; /* Hidden by default */
    will-change: opacity;
    transition: opacity 0.85s ease; /* We ONLY animate opacity now! */
}

.portal-wrapper.gateway-open {
    width: 250vw; 
    height: 250vh;
    z-index: 999;
    filter: none !important; /* Kills the glow for full-screen */
    transition: width 1.2s cubic-bezier(0.7, 0, 0.2, 1),
                height 1.2s cubic-bezier(0.7, 0, 0.2, 1);
}
.portal-wrapper.gateway-open .star-portal-distortion {
    /* Instantly drop the distortion during full-screen takeover for smooth performance */
    opacity: 0 !important;
    transition: opacity 0.2s ease; 
}

/* Instantly kill the heatwave and vignette so the destination page is clear */
.portal-wrapper.gateway-open .star-portal {
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%) !important;
    transition: clip-path 1.2s cubic-bezier(0.7, 0, 0.2, 1);
}

.portal-wrapper.gateway-open .portal-distortion {
    opacity: 0 !important; /* Immediately drops the expensive filter during screen takeover */
    transition: opacity 0.2s ease; 
}

.portal-base, .portal-distortion {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 0; 
}

.portal-distortion {
    /*filter: url('#spatial-distortion');*/
    opacity: 0;
    visibility: hidden; /* Stops the GPU from calculating the filter when idle */
    
    will-change: transform, clip-path, opacity;
    
    /* Notice we add visibility to the transition, but delay it on the way out so it fades cleanly */
    transition: clip-path 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.85s ease,
                visibility 0s linear 0.85s; 
}

.star-portal.gateway-open::after {
    display: none !important;
}

.star-name {
    font-size: 0.85rem;
    color: #f8fafc;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.star-desc {
    font-size: 0.65rem;
    color: #64748b;
    /*text-transform: uppercase;*/
    letter-spacing: 1px;
}

/* --- The Transition into Darkness --- */
.beyond-gradient-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* A massive, viewport-sized shadow */
    background: linear-gradient(to bottom, transparent, #000000 90%);
    pointer-events: none;
}

.portal-wrapper, 
.star-tooltip {
    pointer-events: none; 
}

/* ==========================================
   THE EPILOGUE (Footer)
   ========================================== */

.epilogue {
    position: relative;
    background: #000000;
    min-height: 40vh; /* Quiet breathing room */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    gap: 15px; /* Restrained spacing */
}

.epilogue-seal {
    font-size: 1rem;
    color: #475569;
    margin-bottom: 25px;
    opacity: 0.5;
}

.epilogue-text {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 300;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.epilogue-meta {
    font-size: 0.7rem;
    color: #334155;
    font-family: monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.epilogue-name {
    margin-top: 20px;
    font-family: 'Aller', sans-serif;
    font-size: 1rem;
    color: #475569;
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: 0.6;
}



#portal-svg-filter {
    display: none;
}

/* 2. Only wake it up when the body gets the active class */
body.portal-active #portal-svg-filter {
    display: block;
}





/* 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; }
}

@keyframes stellar-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

@keyframes portal-instability {
    0% { filter: drop-shadow(0 0 12px rgba(226, 232, 240, 0.4)) blur(0px) hue-rotate(0deg); }
    33% { filter: drop-shadow(0 0 16px rgba(226, 232, 240, 0.7)) blur(0.8px) hue-rotate(10deg); }
    66% { filter: drop-shadow(0 0 8px rgba(226, 232, 240, 0.3)) blur(0px) hue-rotate(-5deg); }
    100% { filter: drop-shadow(0 0 15px rgba(226, 232, 240, 0.5)) blur(0.4px) hue-rotate(5deg); }
}

@keyframes portal-spin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}