/* historic.day - Grainy-Textured Chrome Archive */

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

:root{
    --polished-steel:#D8DEE9;
    --brushed-nickel:#A0AEC0;
    --gunmetal:#2D3748;
    --midnight-chrome:#1A202C;
    --patina-teal:#4FD1C5;
    --oxidized-copper:#C77D5A;
    --reflective-white:#EDF2F7;
    --tarnished-silver:#718096;
    --film-amber:#D4A843;
    --void:#0D1117;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--void);
    color:var(--polished-steel);
    font-family:'Quicksand',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.4vw,1.15rem);
    line-height:1.72;
    letter-spacing:0.01em;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

/* Grain overlay - sprite-sheet stepped animation */
.grain-overlay{
    position:fixed;
    top:-50%;left:-50%;
    width:200%;height:200%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
    background-size:200px 200px;
    opacity:0.08;
    pointer-events:none;
    z-index:1000;
    mix-blend-mode:multiply;
    animation:grainAnimate 0.5s steps(4) infinite;
}

@keyframes grainAnimate{
    0%{transform:translate(0,0)}
    25%{transform:translate(-200px,0)}
    50%{transform:translate(-200px,-200px)}
    75%{transform:translate(0,-200px)}
    100%{transform:translate(0,0)}
}

/* Layers container */
.layers-container{
    position:relative;
}

/* Base layer - full viewport sticky stacking */
.layer{
    position:sticky;
    top:0;
    width:100vw;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

/* Hero layer */
.hero-layer{
    background:var(--void);
    z-index:10;
}

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

.hero-title{
    font-family:'Nunito',sans-serif;
    font-weight:800;
    font-size:clamp(4rem,12vw,10rem);
    letter-spacing:-0.03em;
    line-height:0.95;
    background:linear-gradient(135deg,var(--polished-steel),var(--brushed-nickel),var(--reflective-white));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    filter:blur(20px);
    opacity:0;
    transition:filter 800ms ease-out,opacity 600ms ease-out;
}

.hero-title.resolved{
    filter:blur(0);
    opacity:1;
}

.hero-sub{
    font-family:'Quicksand',sans-serif;
    font-weight:400;
    font-size:clamp(1.1rem,2vw,1.5rem);
    color:var(--brushed-nickel);
    margin-top:1.5rem;
    opacity:0;
    transition:opacity 800ms ease-out 400ms;
}

.hero-sub.visible{
    opacity:1;
}

/* Layer backgrounds */
.layer-bg{
    position:absolute;
    inset:0;
    z-index:0;
}

.layer-bg-1{
    background:linear-gradient(175deg,var(--midnight-chrome) 0%,var(--gunmetal) 40%,var(--midnight-chrome) 100%);
}

.layer-bg-2{
    background:linear-gradient(175deg,#1E2A3A 0%,var(--gunmetal) 50%,#1A2332 100%);
}

.layer-bg-3{
    background:linear-gradient(175deg,#1A2530 0%,#253040 50%,var(--midnight-chrome) 100%);
}

.layer-bg-4{
    background:linear-gradient(175deg,#221A1A 0%,#2D2025 50%,var(--midnight-chrome) 100%);
}

.layer-bg-5{
    background:linear-gradient(175deg,var(--void) 0%,#0A0D12 50%,var(--void) 100%);
}

/* Layer strata sections */
.layer-surface{
    z-index:9;
}

.layer-strata{
    z-index:8;
}

#layer-2{z-index:8}
#layer-3{z-index:7}
#layer-4{z-index:6}

.layer-bedrock{
    z-index:5;
    position:relative;
}

/* Layer-specific grain intensity */
.layer-surface .grain-splice::after{opacity:0.10}
#layer-2 .grain-splice::after{opacity:0.12}
#layer-3 .grain-splice::after{opacity:0.15}
#layer-4 .grain-splice::after{opacity:0.18}

/* Grain splice dividers */
.grain-splice{
    position:absolute;
    top:0;left:0;right:0;
    height:8px;
    z-index:3;
    overflow:hidden;
}

.grain-splice::after{
    content:'';
    position:absolute;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23g)' opacity='0.8'/%3E%3C/svg%3E");
    background-size:100px 100px;
    opacity:0.25;
    mix-blend-mode:overlay;
    animation:grainAnimate 0.5s steps(4) infinite;
}

/* 12-column overlap grid */
.layer-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:0;
    width:100vw;
    min-height:100vh;
    padding:clamp(60px,10vh,120px) clamp(24px,4vw,48px);
    align-content:center;
}

/* Column spans */
.col-1-7{grid-column:1/8}
.col-1-5{grid-column:1/6}
.col-1-12{grid-column:1/13}
.col-2-8{grid-column:2/9}
.col-2-9{grid-column:2/10}
.col-4-12{grid-column:4/13}
.col-7-12{grid-column:7/13}
.col-8-12{grid-column:8/13}

/* Text blocks */
.text-block{
    padding:clamp(16px,3vw,32px);
    position:relative;
}

/* Era headings */
.era-heading{
    font-family:'Nunito',sans-serif;
    font-weight:700;
    font-size:clamp(2.5rem,6vw,5rem);
    letter-spacing:-0.02em;
    line-height:1.1;
    color:var(--reflective-white);
    margin-bottom:1rem;
}

/* Body text */
.era-body{
    font-family:'Quicksand',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.4vw,1.15rem);
    line-height:1.72;
    color:var(--polished-steel);
    max-width:600px;
}

/* Captions */
.era-caption{
    font-family:'Quicksand',sans-serif;
    font-weight:500;
    font-size:clamp(0.8rem,1vw,0.95rem);
    text-transform:uppercase;
    letter-spacing:0.08em;
    line-height:1.6;
    color:var(--brushed-nickel);
}

/* Date stamps - Inconsolata chrome gradient */
.date-stamp{
    font-family:'Inconsolata',monospace;
    font-weight:400;
    font-size:0.85em;
    letter-spacing:0.05em;
    background:linear-gradient(135deg,var(--polished-steel),var(--brushed-nickel),var(--reflective-white));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    display:inline-block;
    margin-bottom:0.75rem;
}

/* Chrome disc accents */
.chrome-disc{
    display:inline-block;
    width:clamp(24px,3vw,40px);
    height:clamp(24px,3vw,40px);
    border-radius:50%;
    background:radial-gradient(circle at 35% 35%,var(--reflective-white),var(--brushed-nickel) 40%,var(--tarnished-silver) 80%,var(--gunmetal));
    box-shadow:2px 4px 12px rgba(0,0,0,0.4);
    margin-bottom:1rem;
}

/* Zoom-focus animation pattern */
.zoom-focus{
    transform:scale(0.7);
    filter:blur(2px);
    opacity:0;
    transition:transform 700ms cubic-bezier(0.22,1,0.36,1),
               filter 700ms cubic-bezier(0.22,1,0.36,1),
               opacity 500ms ease-out;
}

.zoom-focus.focused{
    transform:scale(1);
    filter:blur(0);
    opacity:1;
}

/* Bedrock layer */
.bedrock-text{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.bedrock-heading{
    font-family:'Nunito',sans-serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:-0.02em;
    line-height:1.1;
    color:var(--reflective-white);
    opacity:0.85;
}

/* Chrome nav disc */
.chrome-nav{
    position:fixed;
    bottom:clamp(24px,4vh,40px);
    right:clamp(24px,4vw,40px);
    width:clamp(48px,5vw,72px);
    height:clamp(48px,5vw,72px);
    border-radius:50%;
    border:none;
    background:radial-gradient(circle at 35% 35%,var(--reflective-white),var(--brushed-nickel) 40%,var(--tarnished-silver) 70%,var(--gunmetal));
    box-shadow:2px 4px 16px rgba(0,0,0,0.5);
    cursor:pointer;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform 300ms ease,box-shadow 300ms ease;
}

.chrome-nav:hover{
    transform:scale(1.1);
    box-shadow:2px 4px 24px rgba(79,209,197,0.3);
}

.nav-icon{
    font-size:clamp(20px,2.5vw,32px);
    color:var(--gunmetal);
    line-height:1;
}

/* Radial menu */
.radial-menu{
    position:fixed;
    bottom:clamp(24px,4vh,40px);
    right:clamp(24px,4vw,40px);
    width:clamp(48px,5vw,72px);
    height:clamp(48px,5vw,72px);
    z-index:1999;
    pointer-events:none;
    opacity:0;
    transition:opacity 300ms ease;
}

.radial-menu.open{
    opacity:1;
    pointer-events:auto;
}

.radial-item{
    position:absolute;
    top:50%;left:50%;
    font-family:'Nunito',sans-serif;
    font-weight:600;
    font-size:clamp(0.7rem,1vw,0.85rem);
    color:var(--patina-teal);
    text-decoration:none;
    white-space:nowrap;
    padding:6px 12px;
    background:rgba(26,32,44,0.9);
    border:1px solid var(--tarnished-silver);
    border-radius:4px;
    transform:translate(-50%,-50%) translate(0,0);
    transition:transform 400ms cubic-bezier(0.22,1,0.36,1),
               opacity 300ms ease,
               background 200ms ease;
    opacity:0;
}

.radial-menu.open .radial-item{
    opacity:1;
    transform:translate(-50%,-50%)
              translate(
                calc(cos(var(--angle)) * clamp(80px,10vw,130px)),
                calc(sin(var(--angle)) * clamp(-80px,-10vw,-130px))
              );
}

.radial-item:hover{
    background:var(--gunmetal);
    color:var(--reflective-white);
}

/* Responsive */
@media(max-width:768px){
    .layer-grid{
        grid-template-columns:1fr;
        padding:clamp(40px,6vh,80px) 20px;
    }
    .col-1-7,.col-1-5,.col-1-12,
    .col-2-8,.col-2-9,
    .col-4-12,.col-7-12,.col-8-12{
        grid-column:1;
    }
    .text-block{
        padding:16px 0;
    }
    .era-body{
        max-width:100%;
    }
    .radial-menu.open .radial-item{
        transform:translate(-50%,-50%)
                  translate(
                    calc(cos(var(--angle)) * 70px),
                    calc(sin(var(--angle)) * -70px)
                  );
    }
}