/* layer-2.id -- cyberpunk bento-box chrome identity */

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

:root{
    --chrome-light:#D4D4D8;
    --chrome-mid:#9CA3AF;
    --chrome-dark:#4B5563;
    --void:#0C0C10;
    --alloy:#17171C;
    --amber:#F59E0B;
    --green:#22C55E;
    --red:#EF4444;
    --text:#E5E7EB;
    --dim:#6B7280;
    --edge:#27272A;
}

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

body{
    background:var(--void);
    color:var(--text);
    font-family:'Space Mono',monospace;
    font-weight:400;
    font-size:clamp(0.85rem,0.95vw,0.95rem);
    line-height:1.65;
    overflow-x:hidden;
}

/* CRT scanlines */
.scanlines{
    position:fixed;inset:0;
    pointer-events:none;
    z-index:9999;
    background:repeating-linear-gradient(
        transparent,transparent 2px,
        rgba(0,0,0,0.05) 2px,rgba(0,0,0,0.05) 4px
    );
}

/* Viewport sections */
.viewport-section{
    min-height:100vh;
    padding:clamp(1rem,2vw,2rem);
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Bento grids */
.bento-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    max-width:1100px;
    width:100%;
}

.bento-module{
    background:var(--alloy);
    border:1px solid var(--edge);
    padding:clamp(1rem,2vw,1.5rem);
    overflow:hidden;
    position:relative;
    opacity:0;
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.bento-module[data-reveal="bottom"]{transform:translateY(20px)}
.bento-module[data-reveal="left"]{transform:translateX(-20px)}
.bento-module[data-reveal="right"]{transform:translateX(20px)}

.bento-module.revealed{
    opacity:1;
    transform:translate(0,0);
}

.mod-hero{grid-column:span 2;grid-row:span 2}
.mod-lg{grid-column:span 3}
.mod-md{grid-column:span 2}
.mod-sm{grid-column:span 1}

/* Typography */
.hero-title{
    font-family:'Space Mono',monospace;
    font-weight:700;
    font-size:clamp(2rem,5vw,4rem);
    color:var(--chrome-light);
    letter-spacing:0.02em;
    line-height:1.2;
}

.accent-amber{color:var(--amber)}

.hero-desc{
    color:var(--chrome-mid);
    margin-top:1rem;
    font-size:clamp(0.85rem,1vw,0.95rem);
}

.section-heading{
    font-weight:700;
    font-size:clamp(1.2rem,2vw,1.8rem);
    color:var(--chrome-light);
    margin-bottom:0.75rem;
}

.mod-label{
    font-size:0.7rem;
    letter-spacing:0.06em;
    color:var(--amber);
    display:block;
    margin-bottom:0.5rem;
}

.mod-text{
    color:var(--text);
    line-height:1.65;
}

/* Mono data */
.mono-data{
    font-size:0.85rem;
    color:var(--chrome-mid);
    margin-bottom:0.25rem;
}

.sig-glow{
    color:var(--green);
    text-shadow:0 0 8px rgba(34,197,94,0.4);
}

/* Vintage elements */
.vintage-label{
    font-family:'Press Start 2P',monospace;
    font-size:0.6rem;
    color:var(--green);
    display:block;
    margin-bottom:0.5rem;
}

.vintage-readout{
    font-family:'Press Start 2P',monospace;
    font-size:0.55rem;
    color:var(--amber);
    margin-bottom:0.3rem;
}

.terminal-text{
    font-family:'Space Mono',monospace;
    color:var(--green);
    font-size:0.85rem;
}

.cursor-blink{
    animation:blink 1s step-end infinite;
}

@keyframes blink{
    0%,100%{opacity:1}
    50%{opacity:0}
}

.terminal-mod{background:var(--void)}

.terminal-block{
    font-family:'Space Mono',monospace;
    font-size:0.75rem;
    color:var(--green);
    line-height:1.6;
    white-space:pre-wrap;
}

/* Progress bar */
.progress-vintage{
    width:100%;height:8px;
    background:var(--void);
    border:1px solid var(--edge);
    margin-bottom:0.5rem;
}

.progress-fill{
    width:99.7%;height:100%;
    background:repeating-linear-gradient(90deg,var(--green) 0px,var(--green) 8px,transparent 8px,transparent 12px);
}

/* ID card */
.id-card{
    border:1px solid var(--amber);
    padding:1rem;
    background:var(--void);
}

.final-domain{
    font-weight:700;
    font-size:clamp(1rem,2vw,1.5rem);
    color:var(--amber);
    margin-top:1.5rem;
    letter-spacing:0.04em;
}

/* Responsive */
@media(max-width:768px){
    .bento-grid{grid-template-columns:1fr 1fr}
    .mod-hero,.mod-lg{grid-column:span 2}
    .mod-md{grid-column:span 2}
}

@media(max-width:480px){
    .bento-grid{grid-template-columns:1fr}
    .mod-hero,.mod-lg,.mod-md,.mod-sm{grid-column:span 1}
}

@media(prefers-reduced-motion:reduce){
    .bento-module{opacity:1;transform:none;transition:none}
    .cursor-blink{animation:none}
}