/* heisei.day - Brutalist Luxury Monument */

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

:root{
    --burnt-sienna:#BF5B21;
    --amber-warmth:#D4A574;
    --concrete-dark:#2C1810;
    --parchment-light:#F5E6D0;
    --sunlit-gold:#E8A83E;
    --iron-oxide:#8B3A1F;
    --concrete-gray:#9C8B7A;
    --deep-foundation:#1A0E08;
}

html{scroll-behavior:smooth}

body{
    background:var(--deep-foundation);
    background-image:
        repeating-conic-gradient(rgba(156,139,122,0.02) 0deg,transparent 1deg,transparent 3deg),
        repeating-linear-gradient(87deg,transparent,transparent 12px,rgba(139,115,85,0.03) 12px,rgba(139,115,85,0.03) 13px);
    color:var(--parchment-light);
    font-family:'Source Serif 4',serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.25rem);
    line-height:1.65;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Wave layer */
.wave-layer{
    position:fixed;
    inset:0;
    width:100%;
    height:400%;
    pointer-events:none;
    z-index:0;
}

.wave-path{
    stroke-dasharray:2400;
    stroke-dashoffset:0;
    will-change:stroke-dashoffset;
}

/* Year counter */
.year-counter{
    position:fixed;
    bottom:24px;
    left:24px;
    width:48px;
    height:48px;
    border:1px solid var(--iron-oxide);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:50;
    background:var(--deep-foundation);
}

.counter-prefix{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:0.45rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--concrete-gray);
}

.counter-num{
    font-family:'Archivo Black',sans-serif;
    font-size:1.1rem;
    color:var(--sunlit-gold);
    transition:transform 0.15s ease;
}

.counter-num.pulse{
    transform:scale(1.15);
}

/* Movements */
.movement{
    position:relative;
    z-index:2;
    padding:0 clamp(16px,4vw,48px);
    margin-bottom:clamp(48px,8vh,96px);
}

/* Block grid */
.block-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:24px;
    max-width:1200px;
    margin:24px auto 0;
}

.grid-centered{justify-items:center}
.grid-asymmetric .block:nth-child(odd){margin-top:32px}

/* Block spans */
.span-2{grid-column:span 2}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-6{grid-column:span 6}
.span-8{grid-column:span 8}

/* Base block */
.block{
    position:relative;
    transition:transform 0.28s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.28s;
}

/* Monument blocks */
.monument-block{
    grid-column:1 / -1;
    background:var(--burnt-sienna);
    min-height:384px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(40px,6vh,80px) clamp(24px,4vw,60px);
    overflow:hidden;
    position:relative;
    max-width:1200px;
    margin:0 auto;
}

.era-glyph{
    position:absolute;
    font-family:'Archivo Black',sans-serif;
    font-size:30vw;
    color:var(--burnt-sienna);
    opacity:0.15;
    line-height:1;
    pointer-events:none;
    filter:brightness(0.85);
}

.monument-heading{
    font-family:'Archivo Black',sans-serif;
    font-size:clamp(1.5rem,3vw,3.5rem);
    letter-spacing:0.02em;
    line-height:1.05;
    color:var(--parchment-light);
    position:relative;
    z-index:1;
}

/* Hero monument */
.hero-monument{
    min-height:100vh;
    flex-direction:column;
    gap:24px;
}

.hero-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    position:relative;
    z-index:1;
}

.hero-year{
    font-family:'Archivo Black',sans-serif;
    font-size:clamp(3rem,12vw,10rem);
    color:var(--sunlit-gold);
    letter-spacing:0.02em;
    line-height:1;
    opacity:0;
    transition:opacity 1s ease;
}

.hero-year.visible{opacity:1}

.hero-title{
    font-family:'Source Serif 4',serif;
    font-weight:600;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--parchment-light);
    opacity:0;
    transition:opacity 1s ease 1.5s;
}

.hero-title.visible{opacity:1}

.wave-deco{
    width:min(80vw,600px);
    height:60px;
}

/* Light blocks */
.light-block{
    background:var(--parchment-light);
    color:var(--concrete-dark);
    padding:clamp(24px,3vw,40px);
    min-height:192px;
}

.light-block:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 32px rgba(191,91,33,0.2);
}

.block-heading{
    font-family:'Archivo Black',sans-serif;
    font-size:clamp(1.2rem,2vw,1.8rem);
    letter-spacing:0.02em;
    line-height:1.1;
    color:var(--concrete-dark);
    margin-bottom:12px;
}

.block-body{
    font-family:'Source Serif 4',serif;
    font-size:clamp(0.9rem,1.1vw,1.05rem);
    line-height:1.65;
    color:var(--concrete-dark);
}

/* Window blocks */
.window-block{
    background:transparent;
    border:1px solid rgba(212,165,116,0.15);
    padding:clamp(16px,2vw,24px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:128px;
}

.window-block:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 32px rgba(191,91,33,0.2);
}

.window-date{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:clamp(0.7rem,0.9vw,0.85rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--sunlit-gold);
}

.window-fact{
    font-family:'Source Serif 4',serif;
    font-size:clamp(0.9rem,1.1vw,1.05rem);
    color:var(--amber-warmth);
    margin-top:4px;
}

/* Shadow blocks */
.shadow-block{
    background:var(--concrete-dark);
    padding:clamp(20px,3vw,32px);
    transform:translate(8px,8px);
    min-height:128px;
}

.shadow-block:hover{
    transform:translate(8px,2px);
    box-shadow:0 12px 32px rgba(191,91,33,0.2);
}

.shadow-text{
    font-family:'Source Serif 4',serif;
    font-size:clamp(0.95rem,1.2vw,1.1rem);
    color:var(--amber-warmth);
    line-height:1.65;
}

/* Void blocks */
.void-block{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:128px;
}

.void-wave{
    width:100%;
    height:100px;
}

/* Reveal system */
.reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.5s ease-out,transform 0.5s ease-out;
}

.reveal.revealed{
    opacity:1;
    transform:translateY(0);
}

.shadow-block.reveal{
    transform:translate(8px,32px);
}

.shadow-block.reveal.revealed{
    transform:translate(8px,8px);
}

/* Responsive */
@media(max-width:768px){
    .block-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }
    .span-2,.span-3,.span-4,.span-6,.span-8{
        grid-column:span 2;
    }
    .monument-block{min-height:256px}
    .year-counter{bottom:12px;left:12px;width:40px;height:40px}
    .counter-num{font-size:0.9rem}
}