/* ==========================================================================
   1. ATMOSPHERE, DESK SURFACE & TACTILE CONFIGURATIONS
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-dark: #010102;
    --text-light: #e2e2e9;
    --accent-blood: #7A3326;
    --accent-blood-bright: #b33e2b;
    
    /* High-Performance Velvet Easing Curves */
    --ease-cinematic: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-glide: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.1);
    
    /* Graphic Textures Layout Mapping */
    --texture-provided-paper: url('https://i.pinimg.com/736x/9c/8f/ba/9c8fba8c939a7b60720688270cded516.jpg');
    --texture-dust-scratches: url('https://www.transparenttextures.com/patterns/dust.png');
    --texture-paper-card: url('https://www.transparenttextures.com/patterns/cardboard-flat.png');
    
    /* Balanced Ambient Shadows for Hardware Acceleration */
    --shadow-paper-flat: 
        0 2px 5px rgba(0,0,0,0.5),
        0 15px 35px rgba(0,0,0,0.75),
        inset 0 0 15px rgba(0, 0, 0, 0.05);
    
    --shadow-paper-lift: 
        0 20px 38px rgba(0,0,0,0.5),
        0 35px 75px rgba(0,0,0,0.8),
        0 40px 100px rgba(122, 51, 38, 0.15);
}

body {
    background: var(--bg-dark);
    min-height: 100vh;
    font-family: 'Courier Prime', monospace;
    color: var(--text-light);
    overflow-x: hidden;
    padding: 2rem;
}

/* HARDWARE-ACCELERATED BACKGROUND MAT DESK */
.bg-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.002) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.002) 1px, transparent 1px),
        var(--texture-paper-card);
    background-size: 60px 60px, 60px 60px, auto;
    opacity: 0.25;
}

/* CRT Scrim + Heavy Cinematic Pitch Darkness Vignette */
.bg-grid::after {
    content: " ";
    display: block;
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(circle at center, transparent 15%, rgba(0, 0, 0, 0.75) 75%, #000000 100%),
        linear-gradient(rgba(18, 16, 16, 0) 60%, rgba(0, 0, 0, 0.5) 40%), 
        var(--texture-dust-scratches);
    z-index: 10;
    background-size: auto, 100% 4px, auto;
    opacity: 0.45;
}

/* ==========================================================================
   METALLIC INDUSTRIAL HARDWARE NODE
   ========================================================================== */
.tape-banner {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 500;
    display: flex;
    align-items: center;
}

.meta-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    
    background: linear-gradient(135deg, #3a3b3e 0%, #1e1f22 50%, #111214 100%);
    border: 1px solid #4a4b4e;
    border-top-color: #6a6b6e;
    border-bottom-color: #0c0d0f;
    border-radius: 3px;
    
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 3px rgba(0, 0, 0, 0.6);
    
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform, background, border-color, box-shadow;
    transition: all 0.4s var(--ease-cinematic);
}

.meta-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.08) 50%, transparent 55%);
    transform: rotate(30deg) translate(-20%, -20%);
    transition: transform 0.6s var(--ease-cinematic);
    pointer-events: none;
}

.meta-btn:hover {
    background: linear-gradient(135deg, #5a5b5e 0%, #2e2f32 50%, #18191b 100%);
    border-color: #7a7b7e;
    border-top-color: #9a9b9e;
    box-shadow: 
        0 0 15px rgba(179, 62, 43, 0.25),
        0 6px 22px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.meta-btn:hover::after {
    transform: rotate(30deg) translate(30%, 30%);
}

.meta-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: rgba(226, 226, 233, 0.8);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
    transition: stroke 0.3s var(--ease-cinematic), filter 0.3s var(--ease-cinematic);
    z-index: 2;
}

.meta-btn:hover svg {
    stroke: var(--accent-blood-bright);
    filter: drop-shadow(0 0 4px rgba(179, 62, 43, 0.7));
}

/* ==========================================================================
   3. EVIDENCE MATRIX CANVAS Layout Grid Coordinates
   ========================================================================== */
.canvas {
    max-width: 1240px;
    margin: 50px auto;
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

/* --- RAW UNMASKED TEXTURE SHEETS --- */
.evidence-paper {
    position: relative;
    background-image: var(--texture-provided-paper);
    background-size: cover;
    background-position: center;
    color: #12120e;
    border-radius: 3px 6px 3.5px 5px / 5px 3.5px 6px 3px;
    padding: 2.6rem;
    box-shadow: var(--shadow-paper-flat);
    border: 1px solid rgba(0, 0, 0, 0.22);
    transform-origin: center center;
    
    /* Force GPU Layer Allocation to Prevent Frame Drops */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform, opacity, box-shadow, filter;
    opacity: 0;
    outline: none;
    
    /* Synchronized duration lengths for liquid transitions */
    transition: 
        transform 0.5s var(--ease-cinematic), 
        box-shadow 0.5s var(--ease-cinematic), 
        filter 0.6s var(--ease-cinematic),
        opacity 0.5s var(--ease-cinematic);
}

/* HIGH-SHINE CHROME METALLIC FRAME ARTIFACT OVERLAY */
.card-bevel-frame {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 4px;
    
    background: linear-gradient(
        135deg, 
        #111115 0%, 
        #7a7a85 18%,
        #ffffff 25%, 
        #2a2a35 45%, 
        #e8e8f0 70%,
        #ffffff 75%,
        #1a1a22 100%
    );
    
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 5;
    opacity: 0.9;
    filter: contrast(1.25) brightness(1.4);
    transition: opacity 0.5s var(--ease-cinematic), filter 0.5s var(--ease-cinematic);
}

.absolute-node:hover .card-bevel-frame,
.absolute-node:focus-within .card-bevel-frame {
    opacity: 1;
    filter: contrast(1.4) brightness(1.6);
}

.evidence-paper::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
}
.evidence-paper:hover::before {
    inset: -25px;
}

.polaroid-inner {
    background-image: var(--texture-provided-paper);
    background-size: cover;
    background-position: center;
    border-radius: 2px 4px 3px 5px / 4px 3px 5px 2px;
    padding: 16px 16px 44px 16px;
}

/* ==========================================================================
   4. VISUAL ATTENTION ADDITIONS
   ========================================================================== */
.push-pin {
    position: absolute;
    width: 34px;
    height: 34px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><radialGradient id='head' cx='45%' cy='45%' r='50%'><stop offset='0%' stop-color='%23ff5252'/><stop offset='55%' stop-color='%23b31313'/><stop offset='100%' stop-color='%235e0505'/></radialGradient><linearGradient id='shaft' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='%23b8b8b8'/><stop offset='45%' stop-color='%23ffffff'/><stop offset='100%' stop-color='%23707070'/></linearGradient></defs><rect x='47' y='40' width='6' height='48' fill='url(%23shaft)'/><polygon points='44,88 56,88 50,100' fill='%234d4d4d'/><ellipse cx='50' cy='42' rx='16' ry='6' fill='%235e0505'/><circle cx='50' cy='28' r='20' fill='url(%23head)'/><circle cx='44' cy='20' r='5' fill='%23ffffff' opacity='0.5' filter='blur(0.5px)'/></svg>") no-repeat center center;
    background-size: contain;
    top: -15px; 
    left: 50%;
    transform: translateX(-50%) rotate(8deg) translate3d(0,0,0);
    backface-visibility: hidden;
    z-index: 200;
    filter: drop-shadow(-4px 6px 4px rgba(0, 0, 0, 0.75));
    will-change: transform, filter;
    transition: transform 0.5s var(--ease-elastic), filter 0.5s var(--ease-cinematic);
}

.dossier-arrow {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    width: 85px;
    height: 55px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'><path d='M8,30 C30,28 50,22 82,28 M58,10 C68,18 76,24 86,29 C74,35 64,45 54,52' fill='none' stroke='%23b33e2b' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' opacity='0.95'/></svg>") no-repeat center center;
    background-size: contain;
    opacity: 0;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    will-change: transform, opacity;
    transition: transform 0.6s var(--ease-cinematic), opacity 0.6s var(--ease-cinematic);
    filter: drop-shadow(-2px 4px 5px rgba(0, 0, 0, 0.6));
}

.string-matrix {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    display: none;
}

.rubber-stamp {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 3px;
    color: rgba(122, 51, 38, 0.88);
    border: 2px dashed rgba(122, 51, 38, 0.88);
    padding: 4px 10px;
    text-transform: uppercase;
    position: absolute;
    mix-blend-mode: multiply;
    pointer-events: none;
    user-select: none;
    border-radius: 3px;
}
.stamp-classified { top: 25px; right: 25px; transform: rotate(14deg); }
.stamp-log { bottom: 25px; right: 25px; transform: rotate(-8deg); font-size: 9px; border-style: double; border-width: 3px; }

.scrap-note {
    max-width: 190px;
    padding: 1.3rem;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    color: #211c16;
    background-image: var(--texture-provided-paper);
    background-size: cover;
    background-position: center;
    border-radius: 4px 2px 5px 3px / 3px 5px 2px 4px;
    box-shadow: var(--shadow-paper-flat);
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.scrap-note .push-pin { top: -16px; }

/* ==========================================================================
   5. INTERACTIVE KINETIC PHYSICS HOVERS & FOCUS-BLUR MATRIX (UPDATED)
   ========================================================================== */
.absolute-node:hover,
.absolute-node:focus-within {
    z-index: 110 !important;
}

.main-article:hover,
.main-article:focus-within {
    transform: scale(1.02) rotate(-1deg) translate(-2px, -5px) translateZ(0) !important;
    box-shadow: var(--shadow-paper-lift), 0 0 30px rgba(255, 255, 255, 0.08);
}
.main-article:hover .push-pin,
.main-article:focus-within .push-pin {
    transform: translateX(-50%) translate(2px, -3px) rotate(12deg) scale(1.02);
    filter: drop-shadow(-8px 14px 10px rgba(0, 0, 0, 0.6));
}

.experience-log:hover,
.experience-log:focus-within {
    transform: scale(1.02) rotate(1.5deg) translate(2px, -5px) translateZ(0) !important;
    box-shadow: var(--shadow-paper-lift), 0 0 30px rgba(255, 255, 255, 0.08);
}
.experience-log:hover .push-pin,
.experience-log:focus-within .push-pin {
    transform: translateX(-50%) translate(2px, -2px) rotate(4deg) scale(1.02);
    filter: drop-shadow(-7px 12px 9px rgba(0, 0, 0, 0.6));
}

.polaroid-holder:hover,
.polaroid-holder:focus-within {
    transform: scale(1.03) rotate(-1.5deg) translate(-2px, -6px) translateZ(0) !important;
    box-shadow: var(--shadow-paper-lift), 0 0 30px rgba(255, 255, 255, 0.08);
}
.polaroid-holder:hover .push-pin,
.polaroid-holder:focus-within .push-pin {
    transform: translateX(-50%) translate(1px, -4px) rotate(14deg) scale(1.03);
    filter: drop-shadow(-9px 16px 12px rgba(0, 0, 0, 0.6));
}

.scrap-note:hover,
.scrap-note:focus-within {
    transform: scale(1.04) rotate(6deg) translate(1px, -4px) translateZ(0) !important;
    box-shadow: var(--shadow-paper-lift), 0 0 20px rgba(255, 255, 255, 0.08);
}

.canvas:has(.absolute-node:hover) .absolute-node:not(:hover),
.canvas:has(.absolute-node:focus-within) .absolute-node:not(:focus-within) {
    filter: blur(4px) brightness(0.45) contrast(0.9);
    opacity: 0.5;
}

.absolute-node:hover,
.absolute-node:focus-within {
    filter: blur(0px) contrast(1) brightness(1) !important;
    opacity: 1 !important;
}

/* ==========================================================================
   6. CONTENT METRIC STYLINGS
   ========================================================================== */
.main-article { max-width: 530px; }
.main-article h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 2.3rem;
    text-transform: uppercase;
    line-height: 1.05;
    color: #0b0b0d;
    margin-bottom: 1.3rem;
    letter-spacing: -1px;
    border-bottom: 2px solid rgba(0,0,0,0.85);
    padding-bottom: 6px;
}
.main-article .intro { font-weight: 700; font-size: 1.05rem; color: var(--accent-blood); margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.5px; }
.main-article .description { font-size: 14px; line-height: 1.6; font-weight: 500; color: #161612; }
.main-article .description p { margin-bottom: 1rem; }

.experience-log { max-width: 390px; }
.experience-log h2 { font-family: 'Inter', sans-serif; font-size: 1.35rem; text-transform: uppercase; margin-bottom: 1.6rem; color: #0b0b0d; border-bottom: 2px dashed rgba(0,0,0,0.35); padding-bottom: 0.5rem; }
.timeline-row { display: grid; grid-template-columns: 60px 1fr; gap: 0.5rem; margin-bottom: 1.3rem; font-size: 13px; border-left: 3px solid var(--accent-blood); padding-left: 12px; }
.timeline-row .year { font-weight: 700; color: #000; }
.timeline-row .detail { color: #1e1e19; font-weight: 500; line-height: 1.4; }

.polaroid-holder { max-width: 310px; }
.photo-screen { width: 100%; aspect-ratio: 1 / 1.1; background: #050507; overflow: hidden; position: relative; border: 1px solid rgba(0,0,0,0.3); box-shadow: inset 0 0 25px rgba(0,0,0,0.95); }
.photo-screen img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.35) brightness(0.72) sepia(0.1); transition: filter 0.5s var(--ease-cinematic); will-change: filter; }
.photo-screen::after { content: ''; position: absolute; inset: 0; background-image: var(--texture-dust-scratches); opacity: 0.35; mix-blend-mode: screen; pointer-events: none; }
.polaroid-holder:hover img, .polaroid-holder:focus-within img { filter: grayscale(0) contrast(1.1) brightness(0.85); }
.caption-stamp { font-size: 11px; text-align: center; margin-top: 1.3rem; color: #1c1c22; font-weight: 700; letter-spacing: 2px; opacity: 0.85; }

.iron-label {
    background-image: var(--texture-provided-paper);
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0,0,0,0.22);
    padding: 8px 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: var(--shadow-paper-flat);
    display: inline-block;
    border-radius: 2px 4px 1px 3px / 3px 1px 4px 2px;
    color: #0b0b0d;
    position: relative;
    opacity: 0;
    outline: none;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    will-change: transform, opacity, filter;
    transition: 
        transform 0.4s var(--ease-cinematic), 
        box-shadow 0.4s var(--ease-cinematic), 
        opacity 0.4s var(--ease-cinematic), 
        filter 0.4s var(--ease-cinematic);
}
.iron-label:hover, .iron-label:focus-within { transform: rotate(-5deg) scale(1.03) translateY(-2px) translateZ(0) !important; box-shadow: var(--shadow-paper-lift), 0 0 20px rgba(255, 255, 255, 0.08); }

/* ==========================================================================
   2. LOADING MECHANISM (MONOCHROMATIC FILE SHUFFLE)
   ========================================================================== */
#loader { position: fixed; inset: 0; background: rgba(2, 2, 3, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s var(--ease-cinematic); }
.file-deck-loader { position: relative; width: 44px; height: 54px; }
.loader-file { position: absolute; width: 32px; height: 42px; border: 1px solid rgba(226, 226, 233, 0.4); background: rgba(10, 10, 12, 0.8); backdrop-filter: blur(4px); border-radius: 2px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); animation: deckShuffle 1.8s infinite cubic-bezier(0.36, 0.07, 0.19, 0.97); }
.loader-file:nth-child(1) { animation-delay: 0s; }
.loader-file:nth-child(2) { animation-delay: -0.6s; }
.loader-file:nth-child(3) { animation-delay: -1.2s; }

@keyframes deckShuffle {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); z-index: 3; opacity: 1; }
    28% { transform: translate(30px, -14px) scale(0.95) rotate(6deg); z-index: 3; opacity: 0.2; }
    29% { z-index: 1; }
    66% { transform: translate(4px, 4px) scale(0.9) rotate(-3deg); z-index: 1; opacity: 0.8; }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); z-index: 3; opacity: 1; }
}
#loader.hidden { opacity: 0; pointer-events: none; }

/* ==========================================================================
   7. PERFORMANCE REVEAL GLIDE MECHANICS
   ========================================================================== */
@keyframes documentFadeIn {
    0% { opacity: 0; transform: translateY(25px) rotate(var(--rest-rot)) translateZ(0); }
    100% { opacity: 1; transform: translateY(0) rotate(var(--rest-rot)) translateZ(0); }
}
@keyframes arrowFadeIn {
    0% { opacity: 0; transform: scale(0.85) rotate(var(--arrow-rot)) translate(var(--base-tx), var(--base-ty)) translateZ(0); }
    100% { opacity: 0.55; transform: scale(1) rotate(var(--arrow-rot)) translate(0, 0) translateZ(0); }
}

.canvas.reveal-ready .absolute-node { animation: documentFadeIn 0.85s var(--ease-cinematic) forwards; }
.canvas.reveal-ready .dossier-arrow { animation: arrowFadeIn 0.7s var(--ease-cinematic) forwards; }

.canvas.reveal-ready .main-article    { animation-delay: 0.1s;  --rest-rot: -1deg; }
.canvas.reveal-ready .polaroid-holder { animation-delay: 0.22s; --rest-rot: 3.5deg; }
.canvas.reveal-ready .experience-log  { animation-delay: 0.35s; --rest-rot: 1deg; }
.canvas.reveal-ready .iron-label      { animation-delay: 0.42s; --rest-rot: -4deg; }
.canvas.reveal-ready .note-src-a      { animation-delay: 0.28s; --rest-rot: -11deg; }
.canvas.reveal-ready .note-src-b      { animation-delay: 0.48s; --rest-rot: 8deg; }

.canvas.reveal-ready .arrow-profile-target  { animation-delay: 0.55s; --arrow-rot: -15deg; --base-tx: -15px; --base-ty: 0px; }
.canvas.reveal-ready .arrow-timeline-target { animation-delay: 0.68s; --arrow-rot: 40deg; --base-tx: 0px; --base-ty: -15px; }

/* ==========================================================================
   8. MOBILE RESPONSIVE ENGINE
   ========================================================================== */
@media (max-width: 991px) {
    body { padding: 1rem; }
    .canvas { margin-top: 75px; gap: 2.5rem; align-items: center; width: 100%; }
    .absolute-node { width: 100%; max-width: 480px; transform: rotate(var(--rest-rot)) !important; }
    .evidence-paper { padding: 1.8rem; }
    .main-article h1 { font-size: 1.85rem; }
    .dossier-arrow { display: none !important; }
    .iron-label { text-align: center; display: block; width: fit-content; padding: 8px 18px; }
}

/* ==========================================================================
   9. DESKTOP SPACE ABSOLUTE PLACEMENT COORDINATES
   ========================================================================== */
@media (min-width: 992px) {
    .canvas { height: 980px; position: relative; }
    .string-matrix { display: block; }
    .absolute-node { position: absolute !important; margin-bottom: 0; }
    .main-article { top: 80px; left: 30px; }
    .experience-log { top: 480px; left: 480px; }
    .polaroid-holder { top: 100px; right: 40px; }
    .iron-label { top: 30px; right: 440px; }
    .note-src-a { top: 570px; left: 110px; }
    .note-src-b { top: 460px; right: 70px; }
    .arrow-profile-target { top: 240px; left: 590px; }
    .arrow-timeline-target { top: 390px; left: 640px; }
}