/* haskell.day - Scholarly Mathematical Haskell */

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

:root{
    --deep-blackboard:#1B1F2A;
    --chalk-white:#E8DCC8;
    --slate-blue:#7B68EE;
    --proof-gold:#D4A853;
    --graphite:#4A4E5C;
    --pale-lavender:#DCD6F7;
    --theorem-red:#C75C5C;
}

html{scroll-behavior:smooth}

body{
    background:var(--deep-blackboard);
    color:var(--chalk-white);
    font-family:'Source Sans 3',sans-serif;
    font-weight:400;
    font-size:18px;
    line-height:1.7;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Lambda grid watermark */
.lambda-grid{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background-image:
        repeating-linear-gradient(
            60deg,
            transparent,
            transparent 119px,
            rgba(123,104,238,0.03) 119px,
            rgba(123,104,238,0.03) 120px
        );
    opacity:1;
}

.lambda-grid::before{
    content:'λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ λ';
    position:absolute;
    inset:0;
    font-family:'Playfair Display',serif;
    font-size:48px;
    line-height:120px;
    letter-spacing:72px;
    word-spacing:72px;
    color:var(--slate-blue);
    opacity:0.03;
    overflow:hidden;
    transform:rotate(-60deg) scale(1.5);
    transform-origin:center center;
}

/* Side navigation */
.side-nav{
    position:fixed;
    right:24px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    z-index:50;
}

.nav-diamond{
    width:10px;
    height:10px;
    border:1.5px solid var(--slate-blue);
    transform:rotate(45deg);
    display:block;
    transition:background 0.4s,box-shadow 0.4s;
}

.nav-diamond.active{
    background:var(--slate-blue);
    box-shadow:0 0 8px var(--slate-blue);
}

/* Reduction line */
.reduction-line{
    position:fixed;
    left:15vw;
    top:0;
    bottom:0;
    width:1.5px;
    background:var(--slate-blue);
    opacity:0.3;
    z-index:1;
}

/* Steps */
.step{
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    padding:clamp(60px,10vh,120px) clamp(80px,18vw,280px) clamp(60px,10vh,120px) clamp(80px,20vw,320px);
    z-index:2;
}

.iso-offset-1{margin-left:24px}
.iso-offset-2{margin-left:48px}
.iso-offset-3{margin-left:72px}
.iso-offset-4{margin-left:48px}

/* Step markers */
.step-marker{
    position:absolute;
    left:calc(15vw - 12px);
    top:50%;
    transform:translateY(-50%);
    width:24px;
    height:24px;
    background:var(--deep-blackboard);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:3;
}

.beta-label{
    font-family:'Fira Code',monospace;
    font-size:11px;
    color:var(--slate-blue);
    white-space:nowrap;
}

/* Hero */
.hero-content{
    max-width:700px;
}

.hero-title{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(3.5rem,10vw,9rem);
    letter-spacing:0.02em;
    line-height:1.05;
    color:var(--chalk-white);
}

.hero-tagline{
    font-family:'Source Sans 3',sans-serif;
    font-size:24px;
    color:var(--pale-lavender);
    margin-top:24px;
    opacity:0;
    transition:opacity 1s ease;
}

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

/* Isometric cubes */
.iso-cube{
    position:relative;
    width:160px;
    height:160px;
    transform-style:preserve-3d;
    transform:rotateX(55deg) rotateZ(45deg);
}

.cube-io{
    position:absolute;
    right:clamp(60px,12vw,200px);
    bottom:clamp(60px,12vh,160px);
    animation:cubeFloat 60s linear infinite;
}

@keyframes cubeFloat{
    from{transform:rotateX(55deg) rotateZ(45deg)}
    to{transform:rotateX(55deg) rotateZ(405deg)}
}

.cube-top,.cube-left,.cube-right{
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Fira Code',monospace;
    font-size:14px;
    color:var(--chalk-white);
    backface-visibility:hidden;
}

.cube-top{
    background:var(--slate-blue);
    transform:translateZ(40px);
    opacity:0.9;
}

.cube-left{
    background:var(--graphite);
    transform:rotateX(-90deg) translateZ(40px);
    opacity:0.7;
}

.cube-right{
    background:rgba(75,65,130,0.8);
    transform:rotateY(90deg) translateZ(40px);
    opacity:0.7;
}

.cube-top span,.cube-left span,.cube-right span{
    transform:rotateZ(-45deg) rotateX(-55deg);
    text-align:center;
    font-size:clamp(10px,1.2vw,14px);
}

/* Small cubes row */
.cube-row{
    display:flex;
    gap:48px;
    margin:32px 0;
    flex-wrap:wrap;
}

.cube-small{
    width:120px;
    height:120px;
}

.cube-small .cube-top{transform:translateZ(30px)}
.cube-small .cube-left{transform:rotateX(-90deg) translateZ(30px)}
.cube-small .cube-right{transform:rotateY(90deg) translateZ(30px)}

.cube-small .cube-top span,
.cube-small .cube-left span,
.cube-small .cube-right span{
    font-size:clamp(9px,1vw,12px);
}

/* Step content */
.step-content{
    max-width:640px;
}

/* Section headings */
.section-heading{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1.8rem,4vw,3.2rem);
    letter-spacing:0.02em;
    color:var(--chalk-white);
    margin-bottom:24px;
}

/* Body text */
.body-text{
    color:#C8CCD0;
    margin-top:16px;
    line-height:1.7;
}

/* Type signature */
.type-sig{
    font-family:'Fira Code',monospace;
    font-size:clamp(1.5rem,4vw,3rem);
    margin-bottom:32px;
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:0;
}

.sig-part{
    color:var(--chalk-white);
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.5s ease,transform 0.5s ease;
}

.sig-op{
    color:var(--proof-gold);
    opacity:0;
    transition:opacity 0.5s ease;
}

.type-sig.staggered .sig-part,
.type-sig.staggered .sig-op{
    opacity:1;
    transform:translateY(0);
}

/* Commutative diagrams */
.diagrams-row{
    display:flex;
    gap:32px;
    margin:32px 0;
    flex-wrap:wrap;
}

.commutative-diagram{
    width:clamp(180px,25vw,260px);
    height:auto;
}

/* Code block */
.code-block{
    background:var(--graphite);
    border-left:3px solid var(--proof-gold);
    padding:24px 28px;
    margin:24px 0;
    border-radius:2px;
    overflow-x:auto;
}

.code-block pre{
    font-family:'Fira Code',monospace;
    font-size:16px;
    line-height:1.6;
    color:var(--chalk-white);
}

.code-comment{color:#8890a0}
.code-fn{color:var(--slate-blue)}
.code-op{color:var(--proof-gold)}

/* Hierarchy tower */
.hierarchy-tower{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
    margin:40px 0;
}

.hierarchy-cube{
    width:clamp(180px,30vw,240px);
    padding:18px 24px;
    background:var(--graphite);
    border:1.5px solid var(--slate-blue);
    text-align:center;
    font-family:'Fira Code',monospace;
    font-size:clamp(1rem,2vw,1.3rem);
    color:var(--chalk-white);
    position:relative;
    transition:box-shadow 0.6s ease;
}

.hierarchy-cube.glow{
    box-shadow:0 0 20px rgba(220,214,247,0.3),0 0 40px rgba(123,104,238,0.15);
}

.hierarchy-line{
    width:1.5px;
    height:24px;
    background:var(--slate-blue);
    opacity:0.5;
}

/* Conclusion */
.conclusion-content{
    text-align:center;
    max-width:600px;
    margin:0 auto;
}

.conclusion-text{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--chalk-white);
    line-height:2.0;
    letter-spacing:0.02em;
}

.qed{
    display:block;
    text-align:right;
    font-size:16px;
    color:var(--theorem-red);
    margin-top:40px;
    opacity:0;
    transition:opacity 1s ease;
}

.qed.visible{
    opacity:1;
}

/* Reveal system */
.reveal{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.7s cubic-bezier(0.22,0.61,0.36,1),
               transform 0.7s cubic-bezier(0.34,1.56,0.64,1);
}

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

/* Responsive */
@media(max-width:768px){
    .step{
        padding:clamp(40px,6vh,80px) clamp(24px,4vw,40px) clamp(40px,6vh,80px) clamp(60px,12vw,100px);
    }
    .iso-offset-1,.iso-offset-2,.iso-offset-3,.iso-offset-4{
        margin-left:0;
    }
    .reduction-line{left:24px}
    .step-marker{left:12px}
    .side-nav{
        right:12px;
        gap:14px;
    }
    .cube-io{
        right:20px;
        bottom:40px;
        width:100px;
        height:100px;
    }
    .cube-row{gap:24px}
    .cube-small{width:90px;height:90px}
}