/* layer2.quest -- monochrome terminal + handwritten */

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

:root{
    --void:#000000;
    --phosphor:#FFFFFF;
    --near-white:#E6E6E6;
    --light-term:#B3B3B3;
    --mid:#808080;
    --dark-term:#4D4D4D;
    --shadow:#262626;
    --near-black:#141414;
}

html{font-size:16px}

body{
    background:var(--void);
    color:var(--near-white);
    font-family:'Caveat',cursive;
    font-weight:400;
    font-size:clamp(1.4rem,2.2vw,2.2rem);
    line-height:1.65;
    overflow-x:hidden;
    position:relative;
}

/* CRT scanlines */
.scanlines{
    position:fixed;
    inset:0;
    background:repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255,255,255,0.02) 2px,
        rgba(255,255,255,0.02) 3px
    );
    pointer-events:none;
    z-index:9999;
    transition:opacity 0.5s ease;
}

/* CRT screen curvature illusion */
body::after{
    content:'';
    position:fixed;
    inset:0;
    box-shadow:inset 0 0 100px rgba(0,0,0,0.3);
    pointer-events:none;
    z-index:9998;
}

/* Blinking cursor */
.cursor{
    position:fixed;
    top:24px;left:24px;
    width:12px;height:20px;
    background:var(--phosphor);
    z-index:100;
    animation:blink 1s step-start infinite;
    opacity:0;
    transition:opacity 0.3s ease;
}

.cursor.shown{opacity:1}

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

/* Sections */
.quest-section{
    min-height:100vh;
    position:relative;
    overflow:hidden;
    width:100%;
}

/* Boot Section */
.boot-section{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:24px;
}

.boot-lines{
    position:absolute;
    top:24px;left:24px;
    z-index:10;
}

.boot-line{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(0.75rem,0.9vw,0.9rem);
    letter-spacing:0.04em;
    line-height:1.5;
    color:rgba(255,255,255,0.6);
    opacity:0;
    transition:opacity 0.2s ease;
}

.boot-line.shown{opacity:1}

.hero-handwritten{
    font-family:'Caveat',cursive;
    font-weight:700;
    font-size:clamp(5rem,12vw,12rem);
    color:var(--near-white);
    line-height:1.05;
    text-align:center;
    z-index:5;
    opacity:0;
    transition:opacity 0.8s ease;
    letter-spacing:0.01em;
}

.hero-handwritten.shown{opacity:1}

/* Wireframe cube */
.wireframe-cube{
    position:absolute;
    width:200px;height:200px;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    transform-style:preserve-3d;
    animation:gentle-rotate 30s linear infinite;
    z-index:1;
    opacity:0;
    transition:opacity 1s ease;
}

.wireframe-cube.shown{opacity:0.15}

.cube-face{
    position:absolute;
    width:200px;height:200px;
    border:1px solid var(--mid);
    background:transparent;
}

.cube-front{transform:translateZ(100px)}
.cube-back{transform:translateZ(-100px)}
.cube-left{transform:rotateY(-90deg) translateZ(100px)}
.cube-right{transform:rotateY(90deg) translateZ(100px)}
.cube-top{transform:rotateX(90deg) translateZ(100px)}
.cube-bottom{transform:rotateX(-90deg) translateZ(100px)}

@keyframes gentle-rotate{
    from{transform:translate(-50%,-50%) rotateX(15deg) rotateY(0deg)}
    to{transform:translate(-50%,-50%) rotateX(15deg) rotateY(360deg)}
}

/* Flow curves */
.flow-curve{
    position:absolute;
    width:100%;height:auto;
    bottom:10%;left:0;
    z-index:2;
    opacity:0.4;
}

.flow-curve-2{bottom:20%}

.draw-path{
    stroke-dasharray:2000;
    stroke-dashoffset:2000;
    transition:stroke-dashoffset 2s ease;
}

.draw-path.drawn{stroke-dashoffset:0}

/* Descent Section */
.descent-section{
    min-height:200vh;
    padding:0 24px;
    position:relative;
}

.parallax-back{
    position:absolute;
    inset:0;
    z-index:1;
}

.parallax-mid{
    position:absolute;
    inset:0;
    z-index:2;
}

.parallax-front{
    position:relative;
    z-index:3;
    padding-top:15vh;
}

.descent-wave{
    width:100%;
    position:absolute;
    top:20%;
}

/* Chain links and crystal nodes */
.chain-link{
    position:absolute;
    width:120px;height:60px;
    border:1.5px solid var(--light-term);
    border-radius:30px;
    opacity:0.3;
}

.link-1{top:25%;left:65%;transform:rotate(30deg)}
.link-2{top:55%;left:20%;transform:rotate(-15deg)}

.crystal-node{
    position:absolute;
    width:80px;height:80px;
    border:1px solid var(--mid);
    transform:rotate(45deg);
    opacity:0.25;
}

.node-1{top:70%;left:75%}

/* Quest entries */
.quest-entry{
    max-width:700px;
    margin-bottom:60vh;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.4s ease,transform 0.4s ease;
}

.quest-entry.visible{
    opacity:1;
    transform:translateY(0);
}

.quest-entry.dense{
    margin-bottom:40vh;
}

.entry-text{
    font-family:'Caveat',cursive;
    font-weight:400;
    font-size:clamp(1.4rem,2.2vw,2.2rem);
    color:var(--near-white);
    line-height:1.65;
}

.entry-text.small{
    font-size:clamp(1.1rem,1.5vw,1.5rem);
}

.entry-annotation{
    margin-top:-55vh;
    margin-bottom:60vh;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.3s ease,transform 0.3s ease;
}

.entry-annotation.visible{
    opacity:1;
    transform:translateY(0);
}

.annotation-text{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(0.7rem,0.9vw,0.85rem);
    letter-spacing:0.04em;
    line-height:1.5;
    color:rgba(255,255,255,0.6);
}

/* Cave Section */
.cave-section{
    min-height:180vh;
    padding:0 24px;
    position:relative;
}

.cave-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,0.1) 100%);
    z-index:0;
    pointer-events:none;
}

.lissajous-svg{
    position:absolute;
    width:100%;height:100%;
    top:0;left:0;
}

.cave-front{
    padding-top:10vh;
}

/* Rollup structure */
.rollup-structure{
    position:absolute;
    width:60%;
    max-width:600px;
    height:400px;
    top:30%;
    left:50%;
    transform:translateX(-50%);
    opacity:0.15;
}

.rollup-segment{
    position:absolute;
    border:1px solid var(--light-term);
    background:transparent;
}

.seg-1{width:120px;height:120px;top:0;left:10%;border-radius:4px}
.seg-2{width:100px;height:100px;top:20%;right:15%;border-radius:4px}
.seg-3{width:140px;height:80px;bottom:10%;left:25%;border-radius:4px}
.seg-4{width:90px;height:110px;bottom:5%;right:25%;border-radius:4px}

.rollup-connector{
    position:absolute;
    background:var(--dark-term);
}

.conn-h{width:60%;height:1px;top:50%;left:20%}
.conn-v{width:1px;height:60%;top:20%;left:50%}

/* Surface Section */
.surface-section{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    position:relative;
}

.gentle-arcs{
    position:absolute;
    width:100%;
    bottom:30%;
}

.surface-content{
    text-align:center;
    z-index:5;
}

.final-statement{
    font-family:'Caveat',cursive;
    font-weight:700;
    font-size:clamp(3rem,6vw,6rem);
    color:var(--near-white);
    line-height:1.2;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.final-statement.visible{
    opacity:1;
    transform:translateY(0);
}

.final-cursor{
    display:inline-block;
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(2rem,4vw,4rem);
    color:var(--phosphor);
    animation:blink 1s step-start infinite;
    vertical-align:middle;
    margin-left:0.2em;
}

/* Responsive */
@media(max-width:768px){
    .wireframe-cube{width:120px;height:120px}
    .cube-face{width:120px;height:120px}
    .cube-front{transform:translateZ(60px)}
    .cube-back{transform:translateZ(-60px)}
    .cube-left{transform:rotateY(-90deg) translateZ(60px)}
    .cube-right{transform:rotateY(90deg) translateZ(60px)}
    .cube-top{transform:rotateX(90deg) translateZ(60px)}
    .cube-bottom{transform:rotateX(-90deg) translateZ(60px)}
    .quest-entry{margin-bottom:40vh}
    .quest-entry.dense{margin-bottom:30vh}
    .entry-annotation{margin-top:-35vh;margin-bottom:40vh}
}

@media(prefers-reduced-motion:reduce){
    .wireframe-cube{animation:none}
    .cursor{animation:none;opacity:1}
    .final-cursor{animation:none}
    .draw-path{stroke-dashoffset:0;transition:none}
    .quest-entry,.entry-annotation,.final-statement,.hero-handwritten{
        opacity:1;transform:none;transition:none;
    }
    .scanlines{opacity:0}
}