/* holos.works - Light-Academia with Glitch Corruption */

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

:root{
    --parchment:#F5F0E8;
    --linen:#EDE5D8;
    --espresso:#2C1810;
    --walnut:#3E2F23;
    --sienna:#A0522D;
    --umber-burnt:#8B4513;
    --umber-warm:#8B7355;
    --glitch-red:#E63946;
    --glitch-cyan:#2EC4B6;
    --glitch-dark:#1A1612;
    --gold:#C9A96E;
    --gap:3px;
}

html{scroll-behavior:smooth}

body{
    background:var(--parchment);
    color:var(--walnut);
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.75;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Halftone dot overlay */
body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:9999;
    pointer-events:none;
    background:radial-gradient(circle,#3E2F23 0.5px,transparent 0.5px);
    background-size:4px 4px;
    opacity:0.03;
}

/* Nav toggle */
.nav-toggle{
    position:fixed;
    top:20px;right:20px;
    width:32px;height:32px;
    border-radius:50%;
    border:1px solid #5C4A32;
    background:var(--parchment);
    cursor:pointer;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.8rem;
    color:var(--umber-burnt);
    transition:background 200ms ease,border-color 200ms ease;
}

.nav-toggle:hover{
    background:var(--linen);
    border-color:var(--sienna);
}

.nav-overlay{
    position:fixed;
    inset:0;
    background:rgba(245,240,232,0.95);
    z-index:90;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    opacity:0;
    pointer-events:none;
    transition:opacity 300ms ease;
}

.nav-overlay.open{
    opacity:1;
    pointer-events:auto;
}

.nav-overlay a{
    font-family:'Libre Baskerville',serif;
    font-size:clamp(1.2rem,2vw,1.6rem);
    color:var(--espresso);
    text-decoration:none;
    line-height:2.4;
    letter-spacing:0.02em;
    transition:color 200ms ease;
}

.nav-overlay a:hover{
    color:var(--sienna);
}

/* Room base */
.room{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(40px,6vh,80px) clamp(20px,4vw,60px);
    position:relative;
    overflow:hidden;
}

/* Bento base */
.bento{
    display:grid;
    gap:var(--gap);
    width:100%;
    max-width:1100px;
    background:var(--umber-warm);
}

/* Specimen Grid (Room I) */
.specimen-grid{
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:auto auto auto auto;
    grid-template-areas:
        "tall1 tall2 hero"
        "tall1 tall2 hero"
        "sq1   sq2   sq3"
        "sq1   sq2   sq3";
}

.cell{
    background:var(--parchment);
    padding:clamp(16px,2vw,32px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}

.cell-tall-1{grid-area:tall1;min-height:280px}
.cell-tall-2{grid-area:tall2;min-height:280px}
.cell-hero{grid-area:hero;min-height:280px}
.cell-sq-1{grid-area:sq1;min-height:140px}
.cell-sq-2{grid-area:sq2;min-height:140px}
.cell-sq-3{grid-area:sq3;min-height:140px}

/* Greek SVG letters */
.greek-letter{
    width:clamp(60px,10vw,100px);
    height:auto;
}

.draw-path{
    stroke-dasharray:300;
    stroke-dashoffset:300;
    transition:stroke-dashoffset 1.2s cubic-bezier(0.25,0.46,0.45,0.94);
}

.cell.revealed .draw-path{
    stroke-dashoffset:0;
}

.draw-path.filled{
    fill:var(--espresso);
    transition:fill 0.6s ease 1.2s;
}

.cell-label{
    font-family:'Inconsolata',monospace;
    font-size:clamp(0.75rem,0.9vw,0.9rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--umber-warm);
    margin-top:8px;
}

/* Hero title */
.hero-title{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.02em;
    line-height:1.1;
    color:var(--espresso);
    text-align:center;
}

.hero-etymology{
    font-family:'Inconsolata',monospace;
    font-size:clamp(0.7rem,0.8vw,0.85rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--umber-warm);
    text-align:center;
    margin-top:12px;
}

/* Reading Desk (Room II, IV) */
.reading-desk{
    grid-template-columns:2fr 1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:
        "main aside1"
        "main aside2"
        "main aside3";
}

.cell-main{
    grid-area:main;
    align-items:flex-start;
    justify-content:flex-start;
}

.cell-aside-1{grid-area:aside1}
.cell-aside-2{grid-area:aside2}
.cell-aside-3{grid-area:aside3}

/* Rhombus label */
.rhombus-label{
    width:clamp(100px,12vw,140px);
    height:clamp(100px,12vw,140px);
    border:2px solid var(--sienna);
    transform:rotate(45deg);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
    align-self:flex-start;
    margin-left:clamp(20px,4vw,50px);
}

.rhombus-label span{
    transform:rotate(-45deg);
    font-family:'Inconsolata',monospace;
    font-size:clamp(0.65rem,0.8vw,0.8rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--sienna);
    white-space:nowrap;
}

/* Body text */
.body-text{
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.75;
    color:var(--walnut);
    margin-bottom:1rem;
    max-width:60ch;
}

.sienna{
    color:var(--sienna);
    font-style:italic;
}

/* Big quote */
.big-quote{
    font-family:'Playfair Display',serif;
    font-size:8rem;
    color:var(--espresso);
    opacity:0.08;
    line-height:1;
}

/* Meta block */
.meta-block{
    font-family:'Inconsolata',monospace;
    font-size:clamp(0.7rem,0.8vw,0.85rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--umber-warm);
    line-height:2;
}

/* Fragment Wall (Room III) */
.fragment-wall{
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:auto auto;
}

.frag-cell{
    background:var(--parchment);
    padding:clamp(20px,2.5vw,40px);
    align-items:flex-start;
    transition:transform 100ms ease;
}

.frag-cell.alt{
    background:var(--linen);
}

.frag-wide{
    grid-column:span 2;
}

.principle-word{
    font-family:'Playfair Display',serif;
    font-weight:600;
    font-size:clamp(1.8rem,4vw,3.5rem);
    letter-spacing:0.02em;
    line-height:1.1;
    color:var(--espresso);
    margin-bottom:8px;
}

.principle-desc{
    font-family:'Libre Baskerville',serif;
    font-style:italic;
    font-size:clamp(0.9rem,1vw,1rem);
    color:var(--walnut);
    line-height:1.6;
}

/* Frag cell hover glitch */
.frag-cell:hover{
    transform:skewX(2deg);
}

.frag-cell:hover .principle-word{
    text-shadow:2px 0 var(--glitch-red),-2px 0 var(--glitch-cyan);
    transition:text-shadow 100ms ease;
}

/* Step badges (Room IV) */
.step-badge{
    font-family:'Inconsolata',monospace;
    font-size:clamp(1.4rem,2vw,2rem);
    font-weight:400;
    color:var(--sienna);
    border:2px solid var(--sienna);
    width:clamp(48px,6vw,64px);
    height:clamp(48px,6vw,64px);
    display:flex;
    align-items:center;
    justify-content:center;
    transform:rotate(45deg);
    margin-bottom:12px;
}

.step-badge + .step-text{
    font-family:'Inconsolata',monospace;
    font-size:clamp(0.75rem,0.9vw,0.9rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--umber-warm);
    text-align:center;
}

/* Room V - Invitation */
.room-final{
    flex-direction:column;
    background:var(--linen);
    text-align:center;
}

.final-heading{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(2.5rem,6vw,5rem);
    letter-spacing:0.02em;
    line-height:1.1;
    color:var(--espresso);
    margin-bottom:24px;
}

.final-text{
    font-family:'Libre Baskerville',serif;
    font-style:italic;
    font-size:clamp(1rem,1.4vw,1.25rem);
    color:var(--walnut);
    max-width:50ch;
    line-height:1.75;
}

/* Diagonal slash dividers */
.diagonal-slash{
    width:100%;
    height:clamp(60px,8vw,100px);
    position:relative;
    overflow:hidden;
    z-index:2;
}

.slash-right{
    background:linear-gradient(12deg,var(--parchment) 45%,var(--glitch-dark) 45%,var(--glitch-dark) 55%,var(--parchment) 55%);
}

.slash-left{
    background:linear-gradient(-12deg,var(--parchment) 45%,var(--glitch-dark) 45%,var(--glitch-dark) 55%,var(--parchment) 55%);
}

.diagonal-slash::after{
    content:'';
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(26,22,18,0.3) 1px,
        rgba(26,22,18,0.3) 2px
    );
    pointer-events:none;
}

/* Water bubbles */
.bubble-cluster{
    position:relative;
    width:100%;
    height:100%;
    min-height:80px;
}

.bubble{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle,rgba(201,169,110,0.08),rgba(201,169,110,0.02));
    border:1px solid rgba(139,115,85,0.12);
    will-change:transform;
}

.b1{width:40px;height:40px;top:20%;left:10%;animation:bubbleDrift1 12s ease-in-out infinite}
.b2{width:24px;height:24px;top:50%;left:60%;animation:bubbleDrift2 9s ease-in-out infinite}
.b3{width:56px;height:56px;top:30%;left:35%;animation:bubbleDrift3 15s ease-in-out infinite}
.b4{width:20px;height:20px;top:10%;left:20%;animation:bubbleDrift1 10s ease-in-out infinite}
.b5{width:48px;height:48px;top:40%;left:50%;animation:bubbleDrift2 14s ease-in-out infinite}
.b6{width:16px;height:16px;top:65%;left:15%;animation:bubbleDrift3 8s ease-in-out infinite}
.b7{width:36px;height:36px;top:20%;left:70%;animation:bubbleDrift1 18s ease-in-out infinite}
.b8{width:28px;height:28px;top:70%;left:40%;animation:bubbleDrift2 11s ease-in-out infinite}

.dense .bubble{
    background:radial-gradient(circle,rgba(201,169,110,0.12),rgba(201,169,110,0.04));
    border:1px solid rgba(139,115,85,0.18);
}

@keyframes bubbleDrift1{
    0%,100%{transform:translate(0,0) rotate(0deg)}
    25%{transform:translate(8px,-12px) rotate(2deg)}
    50%{transform:translate(-4px,-20px) rotate(-1deg)}
    75%{transform:translate(12px,-8px) rotate(3deg)}
}

@keyframes bubbleDrift2{
    0%,100%{transform:translate(0,0) rotate(0deg)}
    33%{transform:translate(-10px,-15px) rotate(-2deg)}
    66%{transform:translate(6px,-10px) rotate(1deg)}
}

@keyframes bubbleDrift3{
    0%,100%{transform:translate(0,0)}
    20%{transform:translate(5px,-18px)}
    40%{transform:translate(-8px,-12px)}
    60%{transform:translate(10px,-22px)}
    80%{transform:translate(-3px,-8px)}
}

/* Cell reveal animation */
.reveal{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 600ms cubic-bezier(0.25,0.46,0.45,0.94),transform 600ms cubic-bezier(0.25,0.46,0.45,0.94);
}

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

/* Glitch band */
.glitch-band{
    position:fixed;
    left:0;right:0;
    height:0;
    z-index:80;
    pointer-events:none;
    overflow:hidden;
    background:repeating-linear-gradient(
        0deg,
        var(--glitch-dark),
        var(--glitch-dark) 1px,
        transparent 1px,
        transparent 2px
    );
    opacity:0;
}

.glitch-band.active{
    animation:glitchFlash 400ms steps(4) forwards;
}

@keyframes glitchFlash{
    0%{opacity:0.8;height:80px;clip-path:inset(0 0 0 0)}
    25%{opacity:0.9;clip-path:inset(10% 0 0 0);box-shadow:4px 0 0 var(--glitch-red),-4px 0 0 var(--glitch-cyan)}
    50%{opacity:0.7;clip-path:inset(0 0 20% 0);box-shadow:-4px 0 0 var(--glitch-red),4px 0 0 var(--glitch-cyan)}
    75%{opacity:0.6;clip-path:inset(5% 0 5% 0)}
    100%{opacity:0;height:0}
}

/* Halftone increase for final section */
.room-final::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle,#3E2F23 0.5px,transparent 0.5px);
    background-size:4px 4px;
    opacity:0.06;
    pointer-events:none;
}

/* Triangular corner ornaments */
.frag-cell::before{
    content:'';
    position:absolute;
    top:0;left:0;
    width:0;height:0;
    border-top:20px solid var(--gold);
    border-right:20px solid transparent;
    opacity:0.3;
}

/* Responsive */
@media(max-width:768px){
    .specimen-grid{
        grid-template-columns:1fr 1fr;
        grid-template-areas:
            "hero hero"
            "tall1 tall2"
            "sq1 sq2"
            "sq3 sq3";
    }
    .reading-desk{
        grid-template-columns:1fr;
        grid-template-areas:
            "main"
            "aside1"
            "aside2"
            "aside3";
    }
    .fragment-wall{
        grid-template-columns:1fr 1fr;
    }
    .frag-wide{
        grid-column:span 2;
    }
    .rhombus-label{
        width:80px;height:80px;
        margin-left:10px;
    }
    .nav-toggle{
        top:12px;right:12px;
    }
}

@media(max-width:480px){
    .specimen-grid{
        grid-template-columns:1fr;
        grid-template-areas:
            "hero"
            "tall1"
            "tall2"
            "sq1"
            "sq2"
            "sq3";
    }
    .fragment-wall{
        grid-template-columns:1fr;
    }
    .frag-wide{
        grid-column:span 1;
    }
}