/* =========================================
   1. GLOBAL RESET & "SALT AND PEPPER" GRAIN
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%; width: 100%;
    /* BASE: The Grey Cardstock */
    background-color: #D4D4D4; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #1A1A1A; 
    overflow-x: hidden; position: relative;
    cursor: crosshair !important;
}

/* --- THE GRAIN LAYER --- */
body::before {
    content: ""; position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Overlay mode makes the white specks pop and black specks dig in */
    mix-blend-mode: overlay; 
    
    /* OPACITY: 15% is usually the sweet spot for High-Contrast grain */
    opacity: 0.15; 
    
    /* LAYER ORDER: Sits on top of shapes, but behind text */
    z-index: 1; 
    
    /* INTERACTION SAFEGUARD: Mouse clicks pass through this layer */
    pointer-events: none; 
    
    /* TEXTURE GENERATOR:
       baseFrequency='0.7' -> Creates distinct 'sand' grains (not blocks, not dust)
    */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    
    /* THE MAGIC: 
       Contrast(300%) forces grey pixels to become distinct Black/White specks.
       Grayscale(100%) ensures no color noise.
    */
    filter: contrast(300%) grayscale(100%);
}

/* --- SELECTION COLORS --- */
::selection { background: #FF4F00; color: #F0EEE9; }
::-moz-selection { background: #FF4F00; color: #F0EEE9; }
::-webkit-scrollbar { width: 0px; background: transparent; }

/* =========================================
   2. ANIMATIONS
   ========================================= */
@keyframes constructText {
    0% { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes constructEntry {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

/* =========================================
   3. TYPOGRAPHY
   ========================================= */
h1 {
    font-weight: 900; line-height: 0.95; letter-spacing: -0.02em; 
    text-transform: uppercase; position: relative; 
    z-index: 20; /* TEXT ON TOP (Crisp) */
    animation: constructText 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

a {
    text-decoration: none; color: #1A1A1A; font-weight: 800;
    text-transform: uppercase; transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block; position: relative; 
    z-index: 20; /* LINKS ON TOP (Clickable) */
    cursor: crosshair !important;
}

.nav-item {
    opacity: 0; 
    animation: constructText 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.2s; 
}

/* =========================================
   4. MOBILE LAYOUT
   ========================================= */
.bauhaus-grid {
    min-height: 100vh; padding: 2rem;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
}

h1 { font-size: 3.5rem; margin-top: 4rem; padding-left: 2rem; }
.nav-item { font-size: 2.5rem; line-height: 1.2; }
h1 a { font-size: inherit; } 

.guide-line {
    position: absolute; left: 1.5rem; top: 0; bottom: 0;
    width: 4px; background-color: #1A1A1A; z-index: 5;
}

.primary-nav { padding-left: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.contact-section { padding-left: 2rem; padding-bottom: 2rem; z-index: 10; }
.contact-section ul { display: flex; gap: 1rem; list-style: none; }
.contact-section a { color: #F0EEE9; font-size: 1rem; }

/* WRAPPER BLENDING (Mobile) */
.shape-entry-orange, .shape-entry-blue { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    pointer-events: none;
    mix-blend-mode: multiply; 
}

.orange-circle {
    position: absolute; top: 5%; right: -15%;
    width: 200px; height: 200px; background-color: #FF4F00;
    border-radius: 50%; 
    z-index: 0; /* SHAPES BELOW GRAIN */
}

.blue-block {
    position: absolute; bottom: 0; right: 0;
    width: 90%; height: 25vh; background-color: #0047AB;
    z-index: 0; /* SHAPES BELOW GRAIN */
}

/* =========================================
   5. DESKTOP LAYOUT
   ========================================= */
@media screen and (min-width: 768px) {
    .bauhaus-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 100vh;
        padding: 0; align-items: center;
    }

    .guide-line { left: 30%; width: 6px; }

    /* WRAPPERS (Animation + Blending) */
    .shape-entry-orange {
        position: absolute; top: 50%; left: 30%;
        width: 0; height: 0; 
        z-index: 0;
        animation: constructEntry 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        mix-blend-mode: multiply; 
    }
    
    .shape-entry-blue {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        z-index: 0;
        animation: constructEntry 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        animation-delay: 0.1s;
        mix-blend-mode: multiply; 
    }

    /* SHAPES (Position + Physics) */
    .orange-circle {
        position: absolute; top: 0; left: 0; 
        transform: translate(-50%, -50%); 
        width: 450px; height: 450px;
        background-color: #FF4F00; border-radius: 50%;
        transition: none; 
    }

    .blue-block {
        position: absolute; 
        top: 15vh; bottom: 15vh; left: 35%; 
        width: 40vw; height: auto;
        background-color: #0047AB; 
        transition: none; 
    }

    .identity {
        grid-column: 1 / 5; grid-row: 1;
        padding-right: 6rem; padding-left: 0; text-align: right;
    }
    h1 { font-size: 5.5rem; margin-top: 0; padding-left: 0; }
    h1 a { font-size: 6rem; line-height: 0.5; display: block; margin-right: -10px; }

    .primary-nav {
        grid-column: 5 / 13; grid-row: 1; padding-left: 4rem; z-index: 30;
        pointer-events: none; 
    }
    .nav-item {
        font-weight: 400; font-size: 5.5rem; letter-spacing: -0.06em; color: #F0EEE9;
        pointer-events: auto; 
    }
    .nav-item:hover { color: #FF4F00; transform: translateX(30px); }

    .contact-section {
        grid-column: 5 / 13; grid-row: 1; align-self: end; 
        padding-bottom: 4rem; padding-right: 25vw; text-align: right;
        z-index: 100; 
        pointer-events: auto; 
    }
    .contact-section a { 
        color: #1A1A1A; font-size: 1.2rem;
        pointer-events: auto;
        display: inline-block;
        transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .contact-section a:hover {
        color: #FF4F00;
        transform: translateX(10px);
    }
}