/*
////////////////////////////////////////////////////////////////////////////////
//
//   S T Y L E   S Y S T E M
//   =======================
//   file: style.css [core]
//   engine: css3 / no-framework
//   palette: navy (#002366) + cream (#FAEBD7)
//
//   NOTE: this sheet handles the "digital glass" physics
//   and the dark mode "nightmare" overrides.
//
////////////////////////////////////////////////////////////////////////////////
 *
 *
 *     /++++++  /++       
 *    /++__  ++| ++       
 *   | ++  \ ++| ++       
 *   | ++++++++| ++       
 *   | ++__  ++| ++       
 *   | ++  | ++| ++       
 *   | ++  | ++| ++++++++ 
 *   |__/  |__/|________/ 
 * 
 */

/* [ 01 ] RESET & VARIABLES */

::selection {
    background: var(--accent-blue);
    color: var(--bg-color);
}
:root {
    --bg-color: #FAEBD7;
    --text-color: #555555;
    --accent-blue: #002366;
    --accent-grey: #A0A0A0;
    --grid-line: rgba(160, 160, 160, 0.3);
    --texture-opacity: 0.07;
    --flashlight-opacity: 0;
}

body.dark-mode {
    --bg-color: #050505;
    --text-color: #666666;
    --accent-blue: #FAEBD7;
    --accent-grey: #444444;
    --grid-line: rgba(255, 255, 255, 0.05);
    --texture-opacity: 0.05; 
    --flashlight-opacity: 1;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex; flex-direction: column;
    padding: 20px 120px 40px 120px; 
    position: relative; overflow-x: hidden;
    transition: background-color 0.8s ease, color 0.8s ease;
    animation: softFade 0.8s ease-out forwards;
}

/* [ 02 ] ATMOSPHERE */
body::after {
    content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 9998; opacity: var(--texture-opacity); 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    transition: opacity 0.8s ease;
}

#flashlight {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9990; pointer-events: none;
    background: radial-gradient(circle 350px at var(--x, 50%) var(--y, 50%), transparent 0%, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.98) 100%);
    opacity: var(--flashlight-opacity);
    transition: opacity 0.8s ease;
}

/* [ 03 ] HIDDEN LAYERS */
.easter-egg { display: none; }
body.dark-mode .easter-egg {
    display: block; position: absolute; z-index: 5;
    font-family: 'Courier New', monospace; font-size: 10px; letter-spacing: 2px;
    color: rgba(250, 235, 215, 0.4); pointer-events: none; white-space: nowrap;
}
body.dark-mode a.easter-egg { pointer-events: auto; cursor: pointer; text-decoration: none; transition: color 0.3s ease; }
body.dark-mode a.easter-egg:hover { color: var(--accent-blue); }

/* [ 04 ] TYPOGRAPHY */
.serif-font, h1, h2, h3, .brand-name, .big-link { font-family: 'Rockwell', 'Rockwell Nova', 'Roboto Slab', serif; }
.mono-font, p, a, span, li, div { font-family: 'Courier New', Courier, monospace; font-size: 13px; letter-spacing: 1px; }
.plus { font-size: 0.6em; vertical-align: 2px; margin: 0 4px; color: var(--accent-grey); }

.fixed-axis { position: fixed; top: 0; bottom: 0; width: 1px; background-color: var(--grid-line); z-index: 0; }
.left-axis { left: 40px; } .right-axis { right: 40px; }
.axis-label { position: fixed; top: 50%; width: 300px; text-align: center; left: -132px; transform: translateY(-50%) rotate(-90deg); font-family: 'Courier New', monospace; font-size: 10px; color: var(--accent-grey); letter-spacing: 2px; z-index: 1; pointer-events: none; }
.right-label { left: auto; right: -135px; }

/* [ 05 ] HEADER & NAV (Ghost List / Transparent) */
header { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 60px; padding-top: 10px; 
    position: relative; 
    z-index: 10002; 
}

.brand-link { text-decoration: none !important; border: none !important; display: inline-block; position: relative; }
.brand-name { color: var(--accent-blue); font-size: 0.8rem; letter-spacing: 1px; background: var(--bg-color); padding-right: 20px; font-weight: bold; transition: all 0.5s ease; }
.brand-link:hover .brand-name { opacity: 0.7; }

/* HAMBURGER TOGGLE */
.mobile-toggle { 
    display: flex; flex-direction: column; gap: 6px; 
    cursor: pointer; width: 30px; 
    z-index: 10002;
}
.mobile-toggle span {
    width: 100%; height: 2px; 
    background-color: var(--accent-blue);
    transition: all 0.3s ease;
}
.mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.mobile-toggle.active span:nth-child(2) { transform: rotate(-45deg) translate(5px, -6px); }

/* NAVIGATION (Transparent Ghost List) */
nav {
    position: absolute;
    top: 40px; 
    right: 0;
    min-width: 150px;
    
    /* YOUR CHANGE: Fully Transparent */
    background-color: transparent; 
    
    border: none;
    padding: 20px 0;
    z-index: 10000;
    
    /* Hidden State */
    opacity: 0; 
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

nav.active { 
    opacity: 1; 
    pointer-events: auto; 
    transform: translateY(0); 
}

/* Link Styling */
nav ul { 
    list-style: none; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    text-align: right; 
}

nav a { 
    text-decoration: none; 
    color: var(--text-color); 
    font-size: 13px; /* Small Mono */
    transition: color 0.3s ease; 
    display: block;
    position: relative;
}

/* The Plus Sign Effect */
nav a::before {
    content: "++++ "; 
    opacity: 0;
    color: var(--accent-blue);
    transition: opacity 0.3s ease;
    margin-right: 5px;
}

nav a:hover { color: var(--accent-blue); }
nav a:hover::before { opacity: 1; }
nav a.active { color: var(--accent-blue); font-weight: bold; }

/* [ 06 ] LAYOUTS */
main { flex-grow: 1; z-index: 10; width: 100%; position: relative; }
.grid-layout { display: grid; grid-template-columns: 45% 55%; gap: 60px; align-items: center; max-width: 1100px; margin: 0 auto; }
.studio-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; max-width: 1100px; margin: 0 auto; }
.contact-layout { display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 1000px; margin: 0 auto; }
.journal-layout { display: flex; flex-direction: column; align-items: flex-start; padding-top: 40px; max-width: 800px; margin: 0 auto; }
.project-list-container { width: 100%; max-width: 1000px; margin: 0 auto; }

/* [ 07 ] ELEMENTS */
h2.hero-statement { font-size: 4rem; color: var(--text-color); line-height: 1.1; margin-bottom: 30px; }

.image-frame { width: 100%; max-width: 450px; height: 550px; background-color: var(--accent-grey); border: 1px solid var(--accent-blue); padding: 10px; position: relative; justify-self: center; transition: border-color 0.8s ease; }
body.dark-mode .image-frame { border-color: #444; }
.image-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(110%); transition: filter 0.8s ease; }
body.dark-mode .image-frame img { filter: grayscale(0%) contrast(100%); }
.image-meta { position: absolute; bottom: -25px; right: 0; color: var(--accent-blue); font-size: 11px; }

.project-list { width: 100%; border-top: 1px solid var(--accent-grey); }
.project-row { display: grid; grid-template-columns: 0.5fr 3fr 1fr; padding: 20px 0; border-bottom: 1px solid var(--grid-line); text-decoration: none; color: inherit; transition: all 0.2s ease; }
.project-row:hover { color: var(--accent-blue); padding-left: 10px; }
.project-row span:last-child { text-align: right; }

.bio-text { font-size: 1.2rem; line-height: 1.6; color: var(--accent-blue); }
.service-list ul { list-style: none; }
.service-list li { margin-bottom: 10px; display: flex; justify-content: space-between; border-bottom: 1px dotted #A0A0A0; padding-bottom: 5px; }

.journal-entry { max-width: 600px; width: 100%; margin-bottom: 60px; }
.date-stamp { font-size: 11px; color: var(--accent-blue); margin-bottom: 10px; display: block; }
.entry-title { font-size: 1.5rem; margin-bottom: 15px; color: var(--text-color); }
.read-more { font-size: 11px; text-decoration: underline; color: var(--accent-grey); }

.contact-label { color: var(--accent-grey); margin-bottom: 20px; font-size: 11px; }
.big-link { font-size: 3rem; color: var(--accent-blue); text-decoration: none; border-bottom: 2px solid transparent; transition: all 0.3s ease; }
.big-link:hover { border-bottom: 2px solid var(--accent-blue); }
.address-block { margin-top: 60px; text-align: center; line-height: 1.6; }

.back-link { display: inline-block; margin-bottom: 40px; text-decoration: none; color: var(--accent-grey); font-size: 11px; transition: color 0.3s ease; }
.back-link:hover { color: var(--accent-blue); }

.status-badge { font-size: 9px; border: 1px solid var(--accent-grey); padding: 2px 6px; margin-left: 10px; text-transform: uppercase; letter-spacing: 1px; }
.status-ongoing { color: var(--accent-blue); border-color: var(--accent-blue); }
.status-paused { color: var(--accent-grey); border-color: var(--accent-grey); }

footer { margin-top: 60px; padding-top: 20px; display: flex; justify-content: space-between; align-items: flex-end; color: var(--accent-grey); line-height: 1.5; z-index: 10; }
.footer-center { text-align: center; position: absolute; left: 50%; transform: translateX(-50%); }

#mode-toggle { cursor: pointer; margin-left: 15px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--accent-grey); transition: transform 0.3s ease, color 0.3s ease; position: relative; }
#mode-toggle:hover { transform: rotate(15deg); color: var(--accent-blue); }
.sun-icon, .moon-icon { position: absolute; transition: opacity 0.3s ease; }
.moon-icon { opacity: 0; } .sun-icon { opacity: 1; }
body.dark-mode .sun-icon { opacity: 0; } body.dark-mode .moon-icon { opacity: 1; }

/* [ 09 ] RESPONSIVE RULES (Mobile) */
@media (max-width: 900px) {
    body { padding: 20px 20px; }
    
    header { margin-bottom: 40px; }

    /* OVERRIDE: Full Screen Overlay for Mobile */
    nav {
        position: fixed; 
        top: 0; left: 0; 
        width: 100%; height: 100vh;
        align-items: center; justify-content: center;
        background-color: var(--bg-color);
        transform: none;
    }
    
    nav.active { transform: none; }

    nav ul { 
        gap: 30px; 
        text-align: center; /* Center align on mobile for balance */
    }
    
    /* FORCE SMALL TEXT ON MOBILE */
    nav a { 
        font-size: 13px; /* Kept small to create emptiness */
        letter-spacing: 2px;
    }

    /* Adjust Layouts */
    .grid-layout, .studio-layout { grid-template-columns: 1fr; gap: 40px; }
    h2.hero-statement { font-size: 2.5rem; }
    .image-frame { width: 100%; height: auto; aspect-ratio: 4/5; }
    .big-link { font-size: 1.5rem; }
    .journal-entry { padding: 0; }
    
    footer { flex-direction: column; gap: 20px; align-items: flex-start; position: relative; }
    .footer-center { position: static; transform: none; text-align: left; }
    
    .axis-label, .fixed-axis { display: none; }
    #flashlight { display: none; }
}

/* [ 10 ] PRINT PROTOCOL (Hard Copy) */
@media print {
    body { 
        background-color: #fff !important; 
        color: #000 !important; 
        padding: 0;
    }
    /* Hide digital-only elements */
    nav, .mobile-toggle, #mode-toggle, #flashlight, .back-link, .easter-egg { 
        display: none !important; 
    }
    /* Turn the page into a framed document */
    main {
        border: 2px solid #000;
        margin: 1cm;
        padding: 1cm;
        max-width: 100%;
    }
    /* Force images to be high-contrast B&W */
    img { filter: grayscale(100%) contrast(150%) !important; }
    
    /* Add a footer stamp */
    main::after {
        content: "ARCHIVE: ARNAUD LEROY STUDIO // PRINTED FROM WEB";
        display: block;
        margin-top: 2cm;
        font-family: 'Courier New', monospace;
        font-size: 10pt;
        border-top: 1px solid #000;
        padding-top: 10px;
    }
}


@keyframes softFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* [ 11 ] MECHANICAL SCROLLBAR */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track (Background) */
::-webkit-scrollbar-track {
    background: var(--bg-color);
    border-left: 1px solid var(--grid-line);
}

/* Handle (The moving part) */
::-webkit-scrollbar-thumb {
    background-color: var(--accent-grey);
    border: 2px solid var(--bg-color); /* Creates a 'floating' look */
    border-radius: 0; /* Hard corners */
}

/* Handle on Hover */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-blue);
    cursor: grab;
}

/* [ MICRO-INTERACTION ] THE MECHANICAL PLUS */
.plus {
    display: inline-block; /* Allows rotation */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When you hover the parent element (like a link), the plus spins */
a:hover .plus, 
div:hover > .plus,
span:hover > .plus {
    transform: rotate(90deg); 
    color: var(--accent-blue); /* Lights up blue */
}

/* [ 11 ] X-RAY BLUEPRINT MODE (Global) */
/* Activated via [ ALT ] key in components.js */

body.blueprint-mode * {
    background: transparent !important;
    color: #ff3333 !important; /* System Red */
    border-color: #ff3333 !important;
    outline: 1px solid rgba(255, 50, 50, 0.3) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.blueprint-mode img,
body.blueprint-mode video {
    filter: grayscale(100%) contrast(1000%) !important;
    opacity: 0.3 !important;
}

/* Add diagnoal hatch pattern to empty spaces 
body.blueprint-mode div, 
body.blueprint-mode section,
body.blueprint-mode main {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 50, 50, 0.05) 10px,
        rgba(255, 50, 50, 0.05) 20px
    ) !important;

   
}
*/