/* gabs.wiki -- sepia cyberpunk / archaeological descent */
/* Palette: #1A1611 (Charred Parchment), #2E2A22 (Aged Vellum), #C4A265 (Tarnished Gold), #E8A825 (Molten Amber), #D4C9B5 (Faded Typescript), #8B7F6B (Archive Dust), #6B8A7A (Oxidized Copper), #FFB830 (Neon Sepia) */

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

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

body{
    background:#1A1611;
    color:#D4C9B5;
    font-family:'Zilla Slab',serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.75;
    letter-spacing:0.01em;
    overflow-x:hidden;
    position:relative;
}

/* Sepia noise overlay */
.noise-overlay{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:9999;
    opacity:0.04;
}

/* Scroll progress indicator */
.scroll-progress{
    position:fixed;
    top:0;
    right:8px;
    width:2px;
    height:100vh;
    z-index:500;
}

.progress-line{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:0%;
    background:#C4A265;
    transition:height 0.1s linear;
}

.progress-node{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:6px;
    height:6px;
    background:#2E2A22;
    border:1px solid #C4A265;
    transition:background 0.3s ease,box-shadow 0.3s ease;
}

.progress-node.active{
    background:#E8A825;
    box-shadow:0 0 8px rgba(232,168,37,0.4);
}

/* Strata */
.stratum{
    min-height:100svh;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(2rem,4vw,6rem) clamp(2rem,4vw,4rem);
    overflow:hidden;
}

.stratum-content{
    position:relative;
    z-index:2;
    max-width:1000px;
    margin:0 auto;
    width:100%;
}

/* Shifted columns */
.shifted-columns{
    display:grid;
    grid-template-columns:55% 40%;
    gap:5%;
}

.col-higher{
    align-self:start;
}

.col-lower{
    align-self:start;
    margin-top:25vh;
}

/* Stratum headings */
.stratum-heading{
    font-family:'Roboto Slab',serif;
    font-weight:700;
    font-size:clamp(1.8rem,3.5vw,3.5rem);
    letter-spacing:0.06em;
    line-height:1.1;
    text-transform:uppercase;
    color:#D4C9B5;
    margin-bottom:1.5rem;
}

/* Body text */
.body-text{
    margin-bottom:1.5rem;
    color:#D4C9B5;
}

/* Inscription (Stratum I) */
.inscription-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:60vh;
}

.inscription-title{
    font-family:'Roboto Slab',serif;
    font-weight:400;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.12em;
    line-height:1.1;
    color:#D4C9B5;
    opacity:0;
    transform:scale(0.95);
    transition:opacity 1s cubic-bezier(0.25,0.1,0.25,1),transform 1s cubic-bezier(0.25,0.1,0.25,1);
}

.inscription-title.revealed{
    opacity:1;
    transform:scale(1);
}

.title-dot{
    color:#E8A825;
}

.inscription-meta{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(0.7rem,0.9vw,0.85rem);
    letter-spacing:0.05em;
    color:#C4A265;
    margin-top:1.5rem;
    opacity:0;
    transition:opacity 0.8s ease 0.5s;
}

.inscription-meta.revealed{
    opacity:1;
}

/* Reveal animations */
[data-reveal]{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s cubic-bezier(0.25,0.1,0.25,1),transform 0.8s cubic-bezier(0.25,0.1,0.25,1);
}

[data-reveal].revealed{
    opacity:1;
    transform:translateY(0);
}

/* Fracture planes */
.fracture-plane{
    position:relative;
    height:12px;
    margin-top:auto;
    overflow:hidden;
}

.fracture-glow{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent 0%,#FFB830 20%,#E8A825 50%,#FFB830 80%,transparent 100%);
    opacity:0;
    transition:opacity 0.6s ease;
}

.stratum.in-view .fracture-glow{
    opacity:0.7;
}

/* Content containers (fading border) */
.col-left,.col-right{
    position:relative;
    padding:clamp(1rem,2vw,2rem);
    border:1px solid transparent;
    border-image:linear-gradient(to bottom,#8B7340 0%,transparent 100%) 1;
}

/* Redaction bars */
.redaction-bar{
    background:#1A1611;
    height:1.2rem;
    margin:1rem 0;
    position:relative;
    display:flex;
    align-items:center;
}

.redaction-bar.wide{
    height:2rem;
    margin:1.5rem 0;
}

.redaction-label{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:0.65rem;
    color:#8B7F6B;
    letter-spacing:0.05em;
    margin-left:0.5rem;
}

/* Data containers */
.data-container{
    display:flex;
    flex-direction:column;
    gap:0.25rem;
    margin-bottom:1.5rem;
    padding:1rem;
    border-left:2px solid #C4A265;
}

.data-label{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(0.7rem,0.9vw,0.85rem);
    letter-spacing:0.05em;
    color:#C4A265;
}

.data-value{
    font-family:'Roboto Slab',serif;
    font-weight:700;
    font-size:clamp(1.5rem,2.5vw,2.2rem);
    color:#D4C9B5;
}

/* Crystal formations */
.crystal-formation{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:1;
    pointer-events:none;
}

.crystal-svg{
    width:300px;
    height:300px;
}

.crystal-vertex{
    animation:vertexPulse 3s ease-in-out infinite;
}

.crystal-vertex:nth-child(2n){animation-delay:0.3s}
.crystal-vertex:nth-child(3n){animation-delay:0.6s}
.crystal-vertex:nth-child(4n){animation-delay:0.9s}
.crystal-vertex:nth-child(5n){animation-delay:1.2s}

@keyframes vertexPulse{
    0%,100%{opacity:0.4;r:2}
    50%{opacity:1;r:3}
}

/* Crystal background (Stratum I) */
.crystal-bg{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:0.15;
}

/* Terminus */
.terminus-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:60vh;
}

.terminus-domain{
    font-family:'Roboto Slab',serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:#D4C9B5;
    letter-spacing:0.06em;
}

.terminus-meta{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(0.7rem,0.9vw,0.85rem);
    letter-spacing:0.05em;
    color:#C4A265;
    margin-top:1rem;
}

/* Cursor-follow spotlight */
.cursor-spotlight{
    position:fixed;
    width:360px;
    height:360px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(232,168,37,0.08) 0%,transparent 70%);
    pointer-events:none;
    z-index:10;
    transform:translate(-50%,-50%);
    transition:opacity 0.3s ease;
}

/* Responsive */
@media(max-width:768px){
    .shifted-columns{
        grid-template-columns:1fr;
        gap:2rem;
    }
    .col-lower{
        margin-top:0;
    }
    .crystal-formation{
        display:none;
    }
    .scroll-progress{
        display:none;
    }
    .cursor-spotlight{
        display:none;
    }
}

@media(prefers-reduced-motion:reduce){
    [data-reveal]{
        opacity:1;
        transform:none;
        transition:none;
    }
    .inscription-title{
        opacity:1;
        transform:none;
        transition:none;
    }
    .inscription-meta{
        opacity:1;
        transition:none;
    }
    .fracture-glow{
        opacity:0.7;
        transition:none;
    }
    .crystal-vertex{
        animation:none;
    }
}