/* layer-2.quest -- dark-neon isometric protocol observatory */

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

:root{
    --void:#06080f;
    --navy:#0d1a2d;
    --slate:#14233a;
    --cyan:#00e5ff;
    --magenta:#d946ef;
    --gold:#f59e0b;
    --ghost:#e2e8f0;
    --zinc:#71717a;
    --green:#22c55e;
}

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

body{
    background:var(--void);
    color:var(--ghost);
    font-family:'Manrope',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    line-height:1.7;
    overflow-x:hidden;
}

/* Depth indicator */
.depth-indicator{
    position:fixed;
    right:2rem;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2rem;
    z-index:100;
}

.depth-line{
    position:absolute;
    width:1px;height:100%;
    background:var(--zinc);
    z-index:-1;
}

.depth-dot{
    font-family:'JetBrains Mono',monospace;
    font-size:0.65rem;
    letter-spacing:0.04em;
    color:var(--zinc);
    padding:0.3rem 0.5rem;
    border:1px solid var(--zinc);
    background:var(--void);
    transition:color 0.3s,border-color 0.3s,box-shadow 0.3s;
}

.depth-dot.active{
    color:var(--cyan);
    border-color:var(--cyan);
    box-shadow:0 0 8px rgba(0,229,255,0.3);
}

/* Layer sections */
.layer-section{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,4vw,4rem);
    position:relative;
}

.hero-section{
    flex-direction:column;
}

/* Proof SVG */
.proof-svg{
    position:absolute;
    width:clamp(300px,50vw,600px);
    opacity:0.3;
}

.proof-ring{
    stroke-dasharray:800;
    stroke-dashoffset:800;
    animation:drawRing 3s ease-out forwards;
}

.ring-2{animation-delay:0.5s}
.ring-3{animation-delay:1s}

@keyframes drawRing{
    to{stroke-dashoffset:0}
}

/* Hero */
.hero-content{
    position:relative;
    z-index:2;
    text-align:center;
}

.hero-title{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:clamp(2.5rem,6vw,5rem);
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ghost);
    line-height:1.1;
}

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

.hero-sub{
    font-family:'Manrope',sans-serif;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    color:var(--zinc);
    margin-top:0.75rem;
}

/* Cube dividers */
.cube-divider{
    display:flex;
    justify-content:center;
    gap:4px;
    padding:1rem 0;
}

.cube{
    width:24px;height:24px;
    background:var(--slate);
    border:1px solid rgba(0,229,255,0.2);
    display:inline-block;
    transform:rotateY(0deg);
    animation:cubeFlip 1.5s ease-in-out var(--delay,0ms) infinite;
}

@keyframes cubeFlip{
    0%,70%,100%{transform:rotateY(0deg);background:var(--slate)}
    35%{transform:rotateY(90deg);background:var(--navy)}
}

/* Grid layout */
.grid-layout{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:1px;
    max-width:1000px;
    width:100%;
}

.grid-module{
    grid-column:span 4;
    background:rgba(8,12,28,0.85);
    backdrop-filter:blur(8px);
    border:1px solid rgba(0,229,255,0.1);
    padding:clamp(1.2rem,2.5vw,2rem);
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.grid-module.revealed{opacity:1;transform:translateY(0)}

.mod-wide{grid-column:span 8}

.module-label{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:0.75rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--cyan);
    display:block;
    margin-bottom:0.5rem;
}

.section-heading{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:clamp(1.4rem,3vw,2.2rem);
    letter-spacing:0.04em;
    color:var(--ghost);
    margin-bottom:0.75rem;
}

.body-text{
    color:var(--ghost);
    line-height:1.7;
}

.data-readout{
    font-family:'JetBrains Mono',monospace;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--cyan);
    text-shadow:0 0 8px rgba(0,229,255,0.4);
}

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

.data-caption{
    font-family:'JetBrains Mono',monospace;
    font-size:0.75rem;
    color:var(--zinc);
    margin-top:0.25rem;
}

.final-domain{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:clamp(1rem,2vw,1.5rem);
    color:var(--cyan);
    margin-top:1.5rem;
    letter-spacing:0.06em;
}

/* Responsive */
@media(max-width:768px){
    .depth-indicator{display:none}
    .grid-layout{grid-template-columns:1fr}
    .grid-module,.mod-wide{grid-column:span 1}
    .cube-divider .cube:nth-child(n+6){display:none}
}

@media(prefers-reduced-motion:reduce){
    .proof-ring{stroke-dashoffset:0;animation:none}
    .cube{animation:none}
    .grid-module{opacity:1;transform:none;transition:none}
}