/* lrx.wiki -- anti-design dashboard wiki */
/* Palette: #1A6B4A emerald, #1A3A6B sapphire, #8B1A3A ruby, #8B6B1A topaz, #111114 bg, #1C1C22 panel, #E8E4DE chalk, #8A8480 gray, #F0ECE6 crystal, #C8E820 acid, #D8D4CE warm white */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --emerald:#1A6B4A;
    --sapphire:#1A3A6B;
    --ruby:#8B1A3A;
    --topaz:#8B6B1A;
    --bg:#111114;
    --panel:#1C1C22;
    --chalk:#E8E4DE;
    --gray:#8A8480;
    --crystal:#F0ECE6;
    --acid:#C8E820;
    --tw-ink:#D8D4CE;
}

html{font-size:16px;scroll-behavior:smooth}

body{
    background:var(--bg);
    color:var(--chalk);
    font-family:'Quicksand',sans-serif;
    font-weight:400;
    font-size:clamp(0.9rem,1vw,1rem);
    line-height:1.65;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Anti-design nav bar */
.nav-bar{
    position:fixed;
    top:0;left:0;right:0;
    height:24px;
    background:var(--panel);
    border-bottom:1px solid rgba(232,228,222,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2rem;
    z-index:1000;
    overflow:visible;
}

.nav-label{
    font-family:'Nunito',sans-serif;
    font-weight:600;
    font-size:0.85rem;
    color:var(--gray);
    text-decoration:none;
    position:relative;
    padding:0 0.5rem;
    transition:color 0s;
    line-height:24px;
}

.nav-label.active{
    color:var(--chalk);
}

.nav-label.active::before{
    content:'';
    position:absolute;
    inset:-4px -6px;
    background:var(--emerald);
    z-index:-1;
    transform:rotate(2deg);
}

.nav-label:hover{
    animation:shake 0.15s ease 2;
}

@keyframes shake{
    0%,100%{transform:rotate(0)}
    25%{transform:rotate(2deg)}
    75%{transform:rotate(-2deg)}
}

/* Geometric scatter */
.geo-scatter{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
}

.geo-shape{
    position:absolute;
    border-radius:0;
}

.geo-circle{border-radius:50%}

.geo-triangle{
    width:0;height:0;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-bottom:20px solid var(--emerald);
}

.geo-rect{/* styled inline */}

.geo-shape.slow-rotate{
    animation:slowRotate 30s linear infinite;
}

@keyframes slowRotate{
    from{transform:rotate(0)}
    to{transform:rotate(360deg)}
}

/* Sections */
.section{
    min-height:100vh;
    position:relative;
    padding:60px 16px 40px;
    z-index:2;
}

/* Dashboard grids */
.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:8px;
    max-width:1200px;
    margin:0 auto;
}

/* Panels */
.panel{
    background:var(--panel);
    padding:24px;
    position:relative;
    overflow:visible;
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.5s ease,transform 0.5s ease;
}

.panel.revealed{
    opacity:1;
    transform:translateY(0);
}

/* Section 1: Terminal Grid */
.terminal-grid{
    grid-template-columns:1fr 4fr 1fr;
    grid-template-rows:auto auto;
    gap:8px;
    min-height:calc(100vh - 80px);
    align-content:center;
}

.panel-hero{
    grid-column:1/3;
    grid-row:1/3;
    transform:rotate(1.5deg);
    border:3px solid var(--emerald);
    border-top-width:1px;
    border-right-width:1px;
    padding:48px 32px 32px 48px;
    z-index:5;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:50vh;
}

.panel-bg-circle{
    position:absolute;
    width:200px;height:200px;
    border-radius:50%;
    background:var(--emerald);
    opacity:0.15;
    top:50%;left:60%;
    transform:translate(-50%,-50%);
    pointer-events:none;
}

.hero-title{
    font-family:'Nunito',sans-serif;
    font-weight:700;
    font-size:clamp(3rem,7vw,7rem);
    color:var(--chalk);
    letter-spacing:-0.01em;
    line-height:1.05;
    visibility:hidden;
}

.hero-title.typed{visibility:visible}

.hero-sub{
    font-family:'Special Elite',monospace;
    font-size:clamp(1rem,1.3vw,1.3rem);
    color:var(--tw-ink);
    letter-spacing:0.03em;
    line-height:1.4;
    margin-top:1rem;
    visibility:hidden;
}

.hero-sub.typed{visibility:visible}

.tw-cursor{
    display:inline-block;
    width:2px;
    height:1.2em;
    background:var(--tw-ink);
    margin-left:2px;
    animation:blink 0.7s step-start infinite;
    vertical-align:text-bottom;
}

@keyframes blink{
    50%{opacity:0}
}

.panel-collage{
    grid-column:3/4;
    grid-row:1/2;
    background:var(--sapphire);
    transform:rotate(-1deg);
    min-height:120px;
    overflow:hidden;
}

.collage-layer{
    position:absolute;
    inset:0;
}

.collage-layer svg{width:100%;height:100%}

.collage-photo{
    background:linear-gradient(135deg,rgba(26,58,107,0.5),rgba(139,26,58,0.3));
    filter:contrast(150%) grayscale(30%);
    opacity:0.3;
}

.panel-geo-pattern{
    grid-column:3/4;
    grid-row:2/3;
    background:var(--ruby);
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:120px;
}

.panel-geo-pattern svg{width:80%;height:80%}

.panel-readout{
    grid-column:1/2;
    grid-row:2/3;
    background:var(--topaz);
    padding:16px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    transform:rotate(0deg);
}

.readout-line{
    font-family:'Special Elite',monospace;
    font-size:0.75rem;
    color:var(--chalk);
    letter-spacing:0.03em;
}

.readout-val{color:var(--crystal)}
.readout-active{color:var(--acid)}

/* Section 2: Sprawl Grid */
.sprawl-grid{
    grid-template-columns:repeat(6,1fr);
    gap:8px 8px;
}

.sprawl-panel{
    padding:20px;
    position:relative;
    overflow:hidden;
}

.sprawl-panel .mixed-media-bg{
    position:absolute;
    inset:0;
    opacity:0.06;
    background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(240,236,230,0.1) 10px,rgba(240,236,230,0.1) 11px);
    pointer-events:none;
}

.sprawl-panel[data-thread="emerald"]{background:var(--emerald)}
.sprawl-panel[data-thread="sapphire"]{background:var(--sapphire)}
.sprawl-panel[data-thread="ruby"]{background:var(--ruby)}
.sprawl-panel[data-thread="topaz"]{background:var(--topaz)}

.sp-1{grid-column:span 2;transform:rotate(1.5deg)}
.sp-2{grid-column:span 2;border:2px solid var(--sapphire);border-left-width:4px;border-bottom-width:1px}
.sp-3{grid-column:span 2;transform:rotate(-2deg)}
.sp-4{grid-column:span 1}
.sp-5{grid-column:span 1}
.sp-6{grid-column:span 3;transform:rotate(1deg)}
.sp-7{grid-column:span 1;border:3px solid var(--ruby);border-right-width:1px}
.sp-8{grid-column:span 2}
.sp-9{grid-column:span 2;transform:rotate(-1deg)}
.sp-10{grid-column:span 2;padding:20px 48px 20px 16px}

.panel-title{
    font-family:'Nunito',sans-serif;
    font-weight:600;
    font-size:clamp(1.1rem,1.5vw,1.5rem);
    letter-spacing:0.01em;
    line-height:1.2;
    margin-bottom:0.5rem;
    color:var(--chalk);
    visibility:hidden;
}

.panel-title.typed{visibility:visible}

.panel-body{
    font-family:'Quicksand',sans-serif;
    font-weight:400;
    font-size:clamp(0.85rem,1vw,0.95rem);
    color:var(--chalk);
    opacity:0.9;
    line-height:1.65;
}

/* Section 3: Override */
.section-override{
    padding:60px 0 40px;
}

.override-main{
    position:relative;
    min-height:60vh;
    background:var(--panel);
    padding:clamp(40px,8vw,80px);
    overflow:hidden;
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.5s ease,transform 0.5s ease;
}

.override-main.revealed{
    opacity:1;
    transform:translateY(0);
}

.override-bg-layers{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.override-layer{position:absolute}

.override-geo-1{
    width:120px;height:120px;
    border-radius:50%;
    background:var(--emerald);
    opacity:0.1;
    top:10%;left:70%;
}

.override-geo-2{
    width:80px;height:80px;
    background:var(--ruby);
    opacity:0.08;
    top:60%;left:15%;
    transform:rotate(23deg);
}

.override-text-frag{
    font-family:'Special Elite',monospace;
    font-size:0.65rem;
    color:var(--tw-ink);
    opacity:0.15;
    letter-spacing:0.05em;
}

.tf-1{top:8%;left:5%;transform:rotate(12deg)}
.tf-2{top:75%;left:80%;transform:rotate(-8deg)}
.tf-3{top:40%;left:90%;transform:rotate(5deg)}
.tf-4{top:20%;left:45%;transform:rotate(-15deg)}

.override-content{
    position:relative;
    z-index:2;
    max-width:800px;
}

.override-text{
    font-family:'Special Elite',monospace;
    font-size:clamp(1rem,1.3vw,1.2rem);
    color:var(--tw-ink);
    letter-spacing:0.03em;
    line-height:1.6;
    visibility:hidden;
}

.override-text.typed{visibility:visible}

.override-float-panels{
    position:relative;
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:-40px;
    padding:0 16px;
    z-index:3;
}

.float-panel{
    padding:8px 12px;
    transform:rotate(2deg);
    border:2px solid;
}

.fp-1{border-color:var(--acid);background:var(--ruby)}
.fp-2{border-color:var(--topaz);background:var(--panel);transform:rotate(-3deg)}
.fp-3{border-color:var(--emerald);background:var(--panel);transform:rotate(1.5deg)}

.float-panel .readout-line{font-size:0.65rem;color:var(--chalk)}

/* Section 4: Cache */
.section-cache{
    background:linear-gradient(to bottom,var(--bg),#000000);
}

.cache-grid{
    grid-template-columns:1fr 4fr 1fr;
    align-content:center;
    min-height:calc(100vh - 120px);
    gap:12px;
}

.cache-main{
    grid-column:2/3;
    background:var(--panel);
    padding:40px;
    border:2px solid rgba(232,228,222,0.08);
}

.cache-heading{
    font-family:'Nunito',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,2.5vw,2.5rem);
    color:var(--chalk);
    letter-spacing:-0.01em;
    line-height:1.2;
    margin-bottom:1rem;
    visibility:hidden;
}

.cache-heading.typed{visibility:visible}

.cache-body{
    font-family:'Quicksand',sans-serif;
    color:var(--gray);
    line-height:1.65;
}

.cache-end{
    grid-column:2/3;
    background:transparent;
    padding:20px 40px;
    text-align:left;
}

.end-text{
    font-family:'Special Elite',monospace;
    font-size:0.8rem;
    color:var(--gray);
    letter-spacing:0.03em;
    visibility:hidden;
}

.end-text.typed{visibility:visible}

.tw-cursor.persistent{
    animation:blink 0.7s step-start infinite;
}

.cache-geo-row{
    display:flex;
    justify-content:center;
    gap:40px;
    padding:2rem 0;
}

.cache-geo-row .geo-circle{position:static}

/* Responsive */
@media(max-width:768px){
    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .terminal-grid{
        grid-template-columns:1fr;
        grid-template-rows:auto;
    }

    .panel-hero{
        grid-column:1;
        grid-row:auto;
        transform:rotate(0);
        padding:32px 20px;
    }

    .panel-collage,.panel-geo-pattern{
        grid-column:1;
        grid-row:auto;
        min-height:100px;
    }

    .panel-readout{
        grid-column:1;
        grid-row:auto;
    }

    .sprawl-grid{grid-template-columns:1fr}

    .sp-1,.sp-2,.sp-3,.sp-4,.sp-5,.sp-6,.sp-7,.sp-8,.sp-9,.sp-10{
        grid-column:1;
        transform:none;
    }

    .cache-grid{grid-template-columns:1fr}
    .cache-main,.cache-end{grid-column:1}

    .nav-bar{gap:0.8rem}
    .nav-label{font-size:0.7rem}

    .geo-scatter{display:none}

    .override-float-panels{
        flex-direction:column;
        align-items:flex-end;
        margin-top:-20px;
    }
}

@media(prefers-reduced-motion:reduce){
    .panel,.override-main{opacity:1;transform:none;transition:none}
    .hero-title,.hero-sub,.panel-title,.override-text,.cache-heading,.end-text{visibility:visible}
    .tw-cursor{animation:none;opacity:0}
    .nav-label:hover{animation:none}
    .geo-shape{animation:none}
}