/* =========================================
   1. VARIABLES & GLOBAL RESET
   ========================================= */
:root {
    --font-main: "courier new", courier, monospace;
    --color-text: color: rgba(0, 0, 0, 0.85); ;
    --color-bg: #ffffff;
    --color-blue: rgb(0, 47, 167);
    --color-border: #e0e0e0;
}

*, *::before, *::after, body, html {
    cursor: none !important; /* Hide System Cursor Globally */
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: 14px;
    overflow: hidden; 
    transition: background-color 1s;
}

/* Custom Scrollbar Styling (Global) */
::-webkit-scrollbar {
   display: none;
}
/* =========================================
   2. CANVAS & BACKGROUND LAYERS
   ========================================= */
#three-canvas {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 6 !important;        
    opacity: 0;        
    filter: blur(10px); 
    transition: opacity 2s ease, filter 2s ease !important;
    pointer-events: none !important;
}

/* =========================================
   3. CUSTOM CURSOR SYSTEM
   ========================================= */
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 7px;
    height: 7px;
    background-color: red; 
    border-radius: 50%;
    pointer-events: none; 
    z-index: 99999; 
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
    filter: blur(1px);
}

#custom-cursor.hover-active {
    box-shadow: 0 0 3px 1px rgba(255, 0, 0);
}

/* Loading Pulse Animation applied to cursor */
.cursor-loading {
    width: 8px !important;
    height: 8px !important;
    background-color: red !important;
    animation: loadPulse 0.8s infinite ease-in-out;
}

@keyframes loadPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

/* Carousel Arrow Transformations */
#custom-cursor.cursor-arrow-next,
#custom-cursor.cursor-arrow-prev {
    background: transparent !important; 
    border-radius: 0; 
    width: 20px !important;
    height: 20px !important;
    box-shadow: none !important;
    filter: none !important;
    border-top: 4px solid red;
    border-right: 4px solid red;
    transition: transform 0.2s ease;
}

#custom-cursor.cursor-arrow-next {
    transform: translate(-50%, -50%) rotate(45deg);
}
#custom-cursor.cursor-arrow-prev {
    transform: translate(-50%, -50%) rotate(-135deg);
}

/* Touch Interaction Pulse */
.touch-pulse {
    position: fixed;
    width: 20px;
    height: 20px;
    background: rgba(255, 0, 0, 0.7); 
    border-radius: 50%;
    pointer-events: none;
    z-index: 100000;
    transform: translate(-50%, -50%);
    animation: pulse-out 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes pulse-out {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* Hide custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
    #custom-cursor, .cursor-dot, .cursor-circle {
        display: none !important;
        opacity: 0 !important;
    }
    body { cursor: auto; }
}

/* =========================================
   4. LOADING SCREEN
   ========================================= */
#loading-screen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff !important; 
    z-index: 9999 !important;      
    opacity: 1;        
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 2s ease-in-out !important;
    pointer-events: auto;
}

.is-loading-blur {
    filter: blur(10px) !important;
}

.cursor-loading-pulse {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;
    pointer-events: none;
    z-index: 10000; 
    filter: blur(2px);
    scale: 2;
    animation: cursorPulse 1.5s infinite ease-in-out;
}

/* =========================================
   5. HEADER & NAVIGATION
   ========================================= */
header {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%); 
    max-width: 80%;
    width: max-content;
    z-index: 10001 !important; 
    pointer-events: none;
    text-align: center;
}

.header-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    pointer-events: auto; 
}   

.title {
    font-weight: 400;
    font-size: 1.8rem;
    margin: 0;
    cursor: pointer;
    background: none;
    padding: 10px 4px;
    pointer-events: none;
    transition: transform 0.3s ease;
}

/* --- ABOUT DOT (White) --- */

#fixed-archive-dot, 
#fixed-about-dot, #fixed-contact-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    top: 1px;
    
    /* Smooth transition for the HOVER glow */
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
    z-index: 100; /* Ensure they stay on top */
}

/* 1. EXPANDED CLICK AREA (::before) - Invisible */
#fixed-archive-dot::before, 
#fixed-about-dot::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; 
    height: 40px;
    background: transparent;
    border-radius: 50%;
    z-index: 1; 
}

/* 2. PULSE ANIMATION LAYER (::after) - The "Ghost" */
#fixed-archive-dot::after, 
#fixed-about-dot::after {
    content: '';
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    border-radius: 50%;
    pointer-events: none; /* Let clicks pass through to the dot */
    
    /* This ensures the pulse fades out smoothly on hover */
    transition: opacity 0.3s ease; 
    opacity: 1;
}

/* =========================================
   SPECIFIC STYLES & ANIMATIONS
   ========================================= */

/* --- ARCHIVE DOT (Red) --- */
#fixed-archive-dot {
    background-color: red;
}

/* Hover State: Main Dot Glows */
#fixed-archive-dot:hover {
    box-shadow: 0 0 20px 5px rgba(255, 0, 0, 1);
}

/* Pulse Animation on the Ghost Layer */
#fixed-archive-dot::after {
    animation: archivePulse 4s infinite ease-in-out;
}

/* --- ABOUT DOT (White) --- */
#fixed-about-dot {
    background-color: white;
}

/* Hover State: Main Dot Glows (Slightly larger as per preference) */
#fixed-about-dot:hover {
    box-shadow: 0 0 20px 8px rgba(255, 0, 0, 1);
}

/* Pulse Animation on the Ghost Layer */
#fixed-about-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: archivePulse 4s infinite ease-in-out;
}

/* =========================================
   INTERACTION LOGIC (The Smooth Fix)
   ========================================= */

/* When hovering the MAIN dot, hide the PULSING layer */
#fixed-archive-dot:hover::after, 
#fixed-about-dot:hover::after {
    opacity: 0;
}

/* =========================================
   KEYFRAMES
   ========================================= */

@keyframes archivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5), inset 0 0 0 0 rgba(255, 255, 255, 1); }
    50%  { box-shadow: 0 0 20px 5px rgba(255, 0, 0, 1), inset 0 0 12px 4px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5), inset 0 0 0 0 rgba(255, 255, 255, 1); }
}

@keyframes contactPulse {
    0%   { box-shadow: 0 0 2px 0 rgba(255, 0, 0, 0.5), inset 0 0 0 0 rgba(255, 255, 255, 1); }
    50%  { box-shadow: 0 0 20px 5px rgba(255, 0, 0, 1), inset 0 0 12px 4px rgba(255, 255, 255, 0.2); }
    100% { box-shadow: 0 0 2px 0 rgba(255, 0, 0, 0.5), inset 0 0 0 0 rgba(255, 255, 255, 1); }
}


/* =========================================
   6. 3D SCENE DOTS
   ========================================= */
#main-scene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5 !important; 
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1.5s ease, filter 2s ease;
    pointer-events: none; 
}

#dots-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none; 
}

.dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--color-blue);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    pointer-events: auto;
    will-change: transform, left, top;
}
.dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35px;
    height: 35px;
    transform: translate(-50%, -50%);
    background: transparent;
    border-radius: 50%;
}   

/* 3D Model Glow Effect */
.dot.has-3d::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none; 
    animation: modelGlow 4s infinite ease-out;
    animation-delay: var(--delay);
}
@keyframes modelGlow {
    0% { box-shadow: 0 0 0 0 rgba(0, 47, 167, 0.5); }
    50% { box-shadow: 0 0 16px 8px rgba(0, 47, 167, 1); }
    100% { box-shadow: 0 0 0 0 rgba(0, 47, 167, 0.5); }
}

/* Audio Sonar Effect */
.dot.has-audio {
    z-index: 10;
    box-shadow: 0 0 5px var(--color-blue);
}
.dot.has-audio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30.5px;
    margin-left: -30.5px;
    border: 1px solid var(--color-blue);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.2); 
    animation: audioSonar 1.5s infinite ease-out;
    animation-delay: var(--delay);
}
@keyframes audioSonar {
    0% { transform: scale(0.2); opacity: 0; border-width: 2px; }
    50% { opacity: 0.8; }
    100% { transform: scale(0.8); opacity: 0; border-width: 0px; }
}

/* =========================================
   7. THE OVERLAY & GLASS CARD (UNIFIED)
   ========================================= */
.overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    align-items: center;
    justify-content: center;
    z-index: 100; 
}

/* The Card Logic */
.glass-card {
    /* Floating Card Dimensions */
    width: 85vw; 
    height: 85vh; 
    margin-top: 50px; /* Offset from header */
    padding: 50px;  
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 30px; 
    box-shadow: 0 0 80px rgba(0,0,0,0.08);
    
    position: relative;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    
    opacity: 0; 
    animation: slideUp 0.5s forwards;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(60px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Close Button (Universal) */
.close-btn { 
    position: absolute;
    top: 30px;
    right: 30px;
    border: none;
    background: var(--color-blue);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 200; 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.close-btn:hover { 
    transform: scale(1.1);
    box-shadow: 0 0 10px 4px rgba(0, 47, 167, 0.4); 
}

.close-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;  /* The invisible hit area width */
    height: 40px; /* The invisible hit area height */
    background: transparent;
}

/* =========================================
   8. CONTENT LAYOUTS
   ========================================= */
/* =========================================
   1. UPDATE THE MAIN CARD (The Container)
   ========================================= */
#about-overlay .glass-card {
    /* --- Your Existing Settings --- */
    width: 50vw !important;
    max-width: 750px;
    min-width: 400px;
    transform: translateX(-50%);
    
    /* --- NEW: Layout Logic for Fixed Footer --- */
    display: flex;
    flex-direction: column; /* Stack Bio and Credits vertically */
    max-height: 85vh;       /* STOP the card from growing off-screen */
    padding: 0 !important;  /* Remove padding from parent so borders go edge-to-edge */
    overflow: hidden;       /* Clean corners */
}

/* =========================================
   2. THE BIO AREA (The Scrollable Part)
   ========================================= */
.card-content.scroll-content {
    flex: 1;                /* Take up all available space */
    overflow-y: auto;       /* Scroll ONLY this section */
    padding: 40px 40px 40px 40px; /* Restore padding here */
}

.card-content.scroll-content a {
    color: rgb(0, 47, 167);
    font-size: 0.9rem;     /* Readable but elegant (approx 15px) */
    line-height: 1.7;       /* Generous breathing room */
    letter-spacing: 0.01em; /* Tiny bit of spacing for clarity */
    text-decoration: none;
    font-weight: 600;
    transition: text-shadow 0.2s;
}

.card-content.scroll-content a:hover {
    text-shadow: rgba(255, 0, 0, 0.5) 0 0 6px;
}

/* 1. TYPOGRAPHY (The "Gallery" Look) */

.bio-layout-wrapper {
    display: flex;
    align-items: flex-start; /* Aligns items to the top */
    gap: 30px;              /* Space between GIF and text */
    padding: 20px;
    flex-direction: column;
    
}
.portrait-container {
    position: relative;
    width: 100%; /* Match your desired portrait width */
    height: auto;
    flex-shrink: 0;
}

.bio-portrait {
    width: 100%;           /* Adjust size as needed */
    height: auto;
    border-radius: 15px;     /* Optional styling */
    flex-shrink: 0;         /* Prevents the image from getting squashed */
}

/* Place the GIF exactly on top of the PNG */
.bio-portrait.animated {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* When the container is hovered, show the GIF */
.portrait-container:hover .bio-portrait.animated {
    opacity: 1;
}

#bio-text-slot {
    font-size: 0.8rem;     /* Readable but elegant (approx 15px) */
    line-height: 1.7;       /* Generous breathing room */
    letter-spacing: 0.01em; /* Tiny bit of spacing for clarity */
    
    /* Color */
    color: rgba(0, 0, 0, 0.85); /* Deep Charcoal, not pitch black */
    
    /* Layout */
    margin-bottom: 10px;
    
    /* Interaction */
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text !important;
}



/* =========================================
   3. THE CREDITS (Fixed at Bottom)
   ========================================= */
.credits-content {
    display: flex;          /* Enables side-by-side layout */
    justify-content: space-between; /* Pushes text LEFT and dot RIGHT */
    align-items: center;    /* Keeps them vertically centered with each other */
    flex-shrink: 0;
    padding: 20px 40px;
    background: rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    
    /* Typography */
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.6);
    text-align: left;
}

.credits-content p {
    margin: 4px 0;
}

/* Link Styling */
.credits-content a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    transition: text-shadow 0.2s;
}

.credits-content a:hover {
    text-shadow: rgba(255, 0, 0, 0.5) 0 0 6px;
}

/* --- CONTACT GROUP (In Credits) --- */
#fixed-contact-dot {
    display: flex !important;   /* Force horizontal */
    flex-direction: row;
    align-items: center;        /* Perfect vertical center */
    justify-content: flex-end;  /* Stick to the right */
    gap: 12px;                  /* Gap between text and dot */
    cursor: pointer;
    position: relative;
    background: transparent;    /* Ensure no background box appears */
}

/* The Label */
.contact-text {
    font-size: 0.75rem;
    color: rgba(255, 0, 0, 0.6);
    white-space: nowrap;        /* Keeps "Contact me" on one line */
    font-weight: 600;
    pointer-events: none;
}

/* The Red Dot itself */
.red-core {
    width: 12px;
    height: 12px;
    background-color: red;
    border-radius: 50%;
    position: relative;         /* Anchor for its own pulse */
    flex-shrink: 0;             /* Don't let it squash */
    transition: all 0.3s ease-in-out;
}

#fixed-contact-dot:hover .red-core {
    transform: scale(1.2);
    box-shadow: 0 0 10px 3px rgba(255, 0, 0, 1);
}

/* Attach pulse ONLY to the red dot, not the text */
.red-core::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid red;
    opacity: 0;
    animation: simplePulse 3s infinite ease-out;
}

@keyframes simplePulse {
    0% { width: 100%; height: 100%; opacity: 0.8; }
    100% { width: 400%; height: 400%; opacity: 0; }
}

@media (max-width: 1400px) {
    .credits-content {
        flex-direction: column-reverse; /* Stacks Contact (top) and Credits (bottom) */
        align-items: flex-start;       /* Align everything to the left */
        gap: 15px;                     /* Space between the two blocks */
        padding: 25px 30px !important;
    }

    #fixed-contact-dot {
        justify-content: flex-start;   /* Keeps dot/text left-aligned */
        width: 100%;
        margin-bottom: 5px;            /* Extra breathing room */
    }

    .credits-text-stack {
        text-align: left;
    }
    .red-core {
        order: -1; /* This forces the dot to appear BEFORE the text */
    }
    
    .contact-text {
        order: 1; /* This forces the text to appear AFTER the dot */
    }
}
/* =========================================
   MOBILE ADJUSTMENTS
   ========================================= */
@media (max-width: 768px) {
    #about-overlay .glass-card {
        width: 90vw !important;
        min-width: unset;
        max-height: 80vh; /* Slightly smaller on phone */
    }
    
    .card-content.scroll-content {
        padding: 25px;
    }
    
    .credits-content {
        padding: 15px 25px;
    }
}




/* --- A. ARCHIVE & DATABASE --- */
.type-archive .archive-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    /* ADD THIS: Forces children to the top */
    justify-content: flex-start; 
    align-items: stretch;
}
    
#tag-bar { 
    display: flex; 
    gap: 8px; 
    flex-wrap: wrap;
    margin: 0; /* Remove any default pushing space */
}

.database-wrapper {
    position: relative;
    flex: 1; 
    overflow-y: auto; 
    min-height: 0;
    border-top: 1px solid var(--color-border);
    margin-top: 30px; 
    transition: -webkit-mask-image 0.3s ease; 
}

/* Faded state: Applied via JS */
.database-wrapper.is-faded {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 47, 167, 0.8), transparent 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 47, 167, 0.8), transparent 100%);
}
#artist-database {
    border-collapse: collapse; /* Removes gaps between borders */
    table-layout: fixed;       /* 1. Strict Widths: Ignores content length */
    width: 100%;               /* 2. Forces table to fill the container */
}

#artist-database th { 
    text-align: left;
    padding: 12px 8px;
    position: sticky;
    top: 0; 
    background: white; /* Solid white so rows don't show behind headers */
    color: black;
    z-index: 10;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
}

/* Table Columns */
#artist-database th:nth-child(1) { width: 9%; }  
#artist-database th:nth-child(2) { width: 27%; } 
#artist-database th:nth-child(3) { width: 8%; } 
#artist-database th:nth-child(4) { width: 14%; } 
#artist-database th:nth-child(5) { width: 20%; } 
#artist-database th:nth-child(6) { width: 19%; } 

#artist-database th { 
    text-align: left;
    padding: 12px 8px;
    position: sticky;
    top: 0; 
    background: linear-gradient(rgb(255, 255, 255, 1), rgb(255, 255, 255, 0)); 
    color: black;
    z-index: 10;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.2s ease-in-out;
    overflow: hidden;
    text-overflow: ellipsis;
}

#artist-database th:hover{
    text-shadow: rgb(0, 47, 167, 0.5) 0 0 8px;
}
#artist-database th.active-sort {
    text-shadow: rgb(0, 47, 167, 1) 0 0 8px;
}
#artist-database td {
    padding: 12px 8px;
    border-bottom: 1px solid #e0e0e0;
}

.project-row.has-folder {
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}
.project-row.has-folder:hover {
    box-shadow: inset 0 0 7px 2px rgb(0, 48, 168, 0.5);
}

/* Filter Tags */
#tag-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
input, 
textarea, 
select, 
button,
#tag-bar {
    font-family: var(--font-main) !important;
    font-size: 12px;
}

.tag-btn { 
    background: transparent;
    border: 1px solid #e0e0e0; 
    padding: 4px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease-in-out; 
}
.tag-btn:hover {
    box-shadow: inset 0 0 7px 2px rgb(0, 48, 168, 0.2);
}
.tag-btn.active {
    box-shadow: inset 0 0 7px 2px rgb(0, 48, 168, 0.5);
    color: black;
}

/* --- C. PROJECT (3-COLUMN CARD) --- */
.project-grid {
    display: flex; 
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-x: scroll;
}

/* Group 1: Text Info (Meta + Desc) */
.text-group {
    flex: 0 0 40%; /* 40% Width */
    display: flex;
    flex-direction: row;
    gap: 20px;
    height: 100%;
    padding-top: 10px;
    padding-right: 20px
    
}
.col-meta { flex: 1; overflow-y: auto; padding-right: 10px; }
.col-desc {
    flex: 1.5; 
    overflow-y: auto; 
    padding-right: 10px; 
    cursor:none;
}

#popup-description, 
#popup-description p, 
#popup-description span{
    /* Allow highlighting */
    user-select: text !important;
    -webkit-user-select: text !important;
    
    /* BRING BACK THE SYSTEM CURSOR (Crucial!) */
    cursor: text !important; 
    
    /* Ensure clicks pass through to the text */
    pointer-events: auto !important; 
}

/* =========================================
   META DATA "STACKED" LAYOUT
   ========================================= */
.meta-grid {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between each block (Year, Place, etc.) */
    margin-top: 40px;
}

.meta-row {
    display: flex;
    flex-direction: column; /* Always Stacked */
    width: 100%;
}

.meta-label {
    width: 100%;
    font-weight: 600; 
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    opacity: 0.6;
    
    /* The Line is now strictly under the title */
    border-bottom: 1.5px solid #e0e0e0; 
    padding-bottom: 4px;
    margin-bottom: 8px; /* Space between line and content */

}

.meta-value {
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 400;
    color: var(--color-text);
    white-space: pre-wrap;
     user-select: text !important;
    -webkit-user-select: text !important; /* Safari support */
    cursor: text !important;
}

/* Group 2: Visuals */
.col-visual {
    flex: 1; /* Remaining 60% Width */
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    padding: 10px;
}

/* Project Typography */
.col-meta h2 {
    font-size: 1.6rem;
    margin-top: 0;
    font-weight: 400;
    line-height: 1.2;
}
.meta-data p {
    font-size: 0.9rem;
    color: #e0e0e0;
    margin: 5px 0; 
}
.col-desc p {
    font-size: 1rem;
    line-height: 1.5;
}

/* =========================================
   SCROLL FADE OVERLAY (The "White Shadow")
.scroll-shadow-overlay {
    position: fixed;      
    z-index: 9999;         
    pointer-events: none; 

    height: 60px;          
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgb(255, 0, 0) 90%);

    opacity: 0;
    transition: opacity 0.3s ease;
}
.scroll-shadow-overlay.is-visible {
    opacity: 1;
}

.mobile-card-shadow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; 
  
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgb(255, 255, 255) 90%);
    
    z-index: 9999;
    pointer-events: none;
    

    border-radius: 0; 
}*/

/* =========================================
   9. VISUAL INTERACTIONS & MEDIA
   ========================================= */

/* Generic Visuals */
.visual-content {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Clickable Link Images */
.website-link-img {
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}
.website-link-img:hover, .website-link-img.hover-active {
    transform: scale(1.005);
    box-shadow: 0 0 7px 2px rgba(0, 47, 167, 0.5);
}

/* Carousel Logic */
.carousel-container {
    position: relative;
    width: fit-content;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.carousel-img {
    /* Smoothly animate the blur and opacity */
transition: filter 0.5s ease, opacity 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease;    
    /* Default State (Clear) */
    filter: blur(0px);
    opacity: 1;
    transform: translateZ(0); /* Hardware acceleration helper */
}

/* Loading State (Blurred) */
.carousel-img.is-loading {
    filter: blur(20px); /* Heavy blur like the intro */
    opacity: 0.8;       /* Slight fade, but not white-out */
}

/* Invisible Cursor Zones */
.carousel-click-zone {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    z-index: 20;
    cursor: none;
}
.zone-left { left: 0; }
.zone-right { right: 0; }

.carousel-shadow-overlay {
    position: absolute;
    top: 0;
    height: 100%;
    width: 15%; /* Matches the width of your click zones */
    pointer-events: none; /* Let clicks pass through */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
    z-index: 19; /* Above image, below click zones */
}

/* Left Shadow: Fades from Dark to Transparent */
.shadow-left {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), transparent);
}

/* Right Shadow: Fades from Dark to Transparent */
.shadow-right {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), transparent);
}
/* =========================================
   INTERLACED CIRCLES LINK (Symbol)
   ========================================= */
.link-interlaced {
    position: relative;
    cursor: pointer;
    margin: 20px;
}

.link-interlaced::before, 
.link-interlaced::after {
    content: '';
    position: absolute;

    width: 15px; 
    height: 15px;
    border: 1.5px solid var(--color-blue); 
    border-radius: 50%;
    transition: all 0.3s ease;
}

.link-interlaced::before { left: 0; z-index: 1; }
.link-interlaced::after { right: 0; z-index: 0; }

/* HOVER: Pull apart */
.link-interlaced:hover::before { transform: translateX(-3px); box-shadow: 0 0 7px 2px rgba(0, 47, 167, 0.5);}
.link-interlaced:hover::after { transform: translateX(3px); box-shadow: 0 0 7px 2px rgba(0, 47, 167, 0.5);}

/* =========================================
   10. MOBILE & VERTICAL LAYOUT (RESPONSIVE)
   ========================================= */

   
@media (max-width: 900px), (orientation: portrait) {

    /* Reset Glass Card to Full Screen */
    .glass-card, .popup-panel {
        width: 85vw; 
        height: 85vh; /* Full screen */
    }

    .project-grid, 
    .archive-layout, 
    .card-content {
        width: 100%;
        height: 100%;       /* Fill the card */
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iPhone */

    }
    
    /* Project Layout: Stacked */
    .project-grid {
        display: flex;
        flex-direction: column; /* Stack Text on top of Visuals */
        width: 100%;
        height: auto; /* Allow it to grow as long as needed */
    }

    
    /* Slide 1: Meta + Description (Side-by-side Top) */
    .text-group {
        width: 100%;
        height: auto;
        flex: none;
        flex-direction: row;
        padding: none;
        margin: none;
    }
    
    .col-meta h2 { font-size: 1.4rem; }
    .col-desc p { font-size: 0.9rem; }
    
    /* Slide 2: Visuals */
    .col-visual {
        width: 100%;
        margin-top: 20px;
    }
    .visual-content {
        width: 100%;
        height: auto;
        max-height: none; /* Remove desktop restriction */
        object-fit: contain;
    }

    /* Mobile Carousel Override */
    .carousel-container {
        height: auto !important; /* Grow with the image! */
        display: block;          /* Ensure it wraps the content */
    }

    .close-btn { 
    position: absolute;
    top: 20px;
    right: 20px;
    }
    .archive-layout td, 
    .archive-layout th {
        /* Top/Bottom: 15px | Left/Right: 10px */
        
        /* Optional: Prevent text from hitting the very edge */
        box-sizing: border-box;
    }
    /* 1. The Container: Allow it to scroll sideways */
    .archive-layout {
        display: block;        /* Necessary for scrolling to work */
        width: 100%;
        overflow-x: auto;      /* Enables the horizontal swipe */
        -webkit-overflow-scrolling: touch;
    }

    /* 2. The Table: Force it to stay wide enough */
    .archive-layout table {
        width: 100%;
        min-width: 600px; /* Forces table to be wider than the phone screen */
        border-collapse: separate; 
        border-spacing: 0;
    }
    
}

/* =========================================
   10. MOBILE & VERTICAL LAYOUT (RESPONSIVE)
   ========================================= */
@media (max-width: 768px) {

    /* 1. THE FRAME (Card) - Fixed Window, Anchors Shadow */
    .glass-card, .popup-panel {
        width: 85vw;            /* Your Width Preference */
        max-width: 400px !important;
        height: 85vh;           /* Your Height Preference */
        position: relative;     /* Anchors the shadow */
        overflow: hidden;       /* STOPS shadow from scrolling */
        display: flex;
        flex-direction: column;
        padding: 30px !important;  /* Padding moved to Grid so scrollbar is correct */
    }

    /* 2. THE CONTENT (Grid) - Scrolls inside the Frame */
    .project-grid {
        display: flex;
        flex-direction: column; /* Stack items */
        width: 100%;
        height: 100%;           /* Fill the card */
        overflow-y: auto;       /* SCROLL HAPPENS HERE */
        -webkit-overflow-scrolling: touch; 
    }

    /* 3. THE FIX: Text Groups MUST NOT shrink or scroll */
    .text-group, 
    .col-meta, 
    .col-desc {
        display: block;          /* Flex sometimes bugs on nested text, Block is safer here */
        width: 100%;
        height: auto !important; /* Force full height */
        flex: 0 0 auto;          /* DO NOT SHRINK to fit screen */
        overflow: visible !important; /* Never create a scrollbar here */
    }

    /* Order Logic */
    .text-group {
        display: flex;
        flex-direction: column;
    }
    .col-meta {
        order: -1;
        margin-bottom: 15px;
    }

    /* 4. VISUALS - Ensure images fit */
    .visual-content {
        height: auto;
        width: 100%;
        max-height: none;
    }
}