/* haskeller.net - Evolved Minimal Honeycomb */

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

:root{
    --umber-deep:#1C1410;
    --terracotta:#C17F59;
    --amber-glow:#D4A574;
    --rust-earth:#8B5A3C;
    --cream-parchment:#F2E8DC;
    --charcoal-warm:#3D2E24;
    --sienna-mist:#A07050;
    --honey-bright:#E8B86D;
    --deep-cocoa:#0F0B08;
    --clay-rose:#B8907A;
}

html{scroll-behavior:smooth}

body{
    background:var(--umber-deep);
    color:var(--cream-parchment);
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(0.85rem,1.2vw,1.05rem);
    line-height:1.65;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Hex grid background */
.hex-grid-bg{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:0;
}

/* Organic blobs */
.blob-layer{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    overflow:hidden;
}

.blob{
    position:absolute;
    width:40vmin;
    height:40vmin;
    border-radius:40% 60% 55% 45% / 55% 40% 60% 50%;
    background:radial-gradient(circle at center,rgba(193,127,89,0.06),transparent 70%);
    mix-blend-mode:screen;
    will-change:transform;
}

.blob-1{
    top:10%;left:5%;
    animation:blobMorph1 12s ease-in-out infinite,blobDrift1 25s linear infinite;
}

.blob-2{
    bottom:20%;right:10%;
    width:35vmin;height:35vmin;
    animation:blobMorph2 14s ease-in-out infinite,blobDrift2 30s linear infinite;
}

@keyframes blobMorph1{
    0%,100%{border-radius:40% 60% 55% 45% / 55% 40% 60% 50%}
    50%{border-radius:55% 45% 40% 60% / 45% 55% 50% 40%}
}

@keyframes blobMorph2{
    0%,100%{border-radius:50% 50% 45% 55% / 60% 40% 55% 45%}
    50%{border-radius:45% 55% 60% 40% / 50% 50% 40% 60%}
}

@keyframes blobDrift1{
    0%{transform:translate(0,0)}
    50%{transform:translate(15vw,10vh)}
    100%{transform:translate(0,0)}
}

@keyframes blobDrift2{
    0%{transform:translate(0,0)}
    50%{transform:translate(-12vw,-8vh)}
    100%{transform:translate(0,0)}
}

/* Main */
main{
    position:relative;
    z-index:2;
}

/* Strata */
.stratum{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(40px,6vh,80px) clamp(24px,4vw,60px);
    position:relative;
}

/* Dissolution zones */
.dissolution{
    height:40vh;
}

/* Hero hex frame */
.hero-hex{
    position:relative;
    width:min(85vw,500px);
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-hex-frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.hex-border-path{
    stroke-dasharray:2000;
    stroke-dashoffset:2000;
    animation:drawHex 2s ease-in-out forwards;
}

@keyframes drawHex{
    to{stroke-dashoffset:0}
}

.hero-inner{
    text-align:center;
    padding:clamp(60px,10vh,120px) clamp(20px,4vw,60px);
    position:relative;
    z-index:1;
}

.hero-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.06em;
    line-height:1.1;
    color:var(--cream-parchment);
}

.hero-group{
    display:inline-block;
    opacity:0;
    transform:translateY(12px);
    animation:groupEnter 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

.hero-group:nth-child(1){animation-delay:2.2s}
.hero-group:nth-child(2){animation-delay:2.4s}
.hero-group:nth-child(3){animation-delay:2.6s}
.hero-group:nth-child(4){animation-delay:2.8s}

@keyframes groupEnter{
    to{opacity:1;transform:translateY(0)}
}

.hex-dot{
    color:var(--terracotta);
}

.hero-subtitle{
    font-family:'Crimson Pro',serif;
    font-style:italic;
    font-size:clamp(1rem,1.8vw,1.4rem);
    color:var(--clay-rose);
    margin-top:20px;
    letter-spacing:0.015em;
    opacity:0;
    animation:fadeIn 1s ease forwards;
    animation-delay:3.4s;
}

@keyframes fadeIn{
    to{opacity:1}
}

/* Stratum headings */
.stratum-heading{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:clamp(1.8rem,4vw,3.5rem);
    letter-spacing:0.02em;
    color:var(--cream-parchment);
    margin-bottom:clamp(24px,4vh,48px);
    text-align:center;
}

/* Hex cell grid */
.hex-cell-grid{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
    max-width:900px;
}

.hex-cell{
    width:clamp(100px,14vw,140px);
    height:clamp(115px,16vw,161px);
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    background:linear-gradient(180deg,rgba(28,20,16,0.9),rgba(42,30,22,0.95));
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    transition:background 0.4s ease;
}

.hex-cell::before{
    content:'';
    position:absolute;
    inset:-2px;
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    background:var(--terracotta);
    z-index:-1;
    opacity:0;
    transition:opacity 0.6s ease;
}

.hex-cell.revealed::before{
    opacity:1;
}

.cell-label{
    font-family:'IBM Plex Mono',monospace;
    font-weight:600;
    font-size:clamp(0.7rem,1vw,0.9rem);
    color:var(--cream-parchment);
    padding:4px;
}

.type-sig-cell{color:var(--honey-bright)}

/* Large hex cells (Stratum III) */
.lambda-cluster{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    justify-content:center;
    max-width:1000px;
}

.hex-large{
    width:clamp(240px,30vw,320px);
    height:clamp(276px,34vw,368px);
}

.hex-large .cell-content{
    padding:clamp(24px,3vw,40px);
    display:flex;
    align-items:center;
}

.cell-prose{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.8rem,1.1vw,0.95rem);
    color:var(--cream-parchment);
    line-height:1.65;
}

.cell-prose code{
    color:var(--honey-bright);
    font-weight:600;
}

/* Decorative lambda */
.deco-lambda{
    position:absolute;
    width:80px;
    height:100px;
    bottom:clamp(20px,4vh,60px);
    right:clamp(20px,4vw,80px);
    opacity:0.3;
}

.draw-path{
    stroke-dasharray:200;
    stroke-dashoffset:200;
}

.draw-path.drawn{
    animation:drawLambda 1.2s ease-in-out forwards;
}

@keyframes drawLambda{
    to{stroke-dashoffset:0}
}

/* Code cell (Stratum IV) */
.hex-code-cell{
    width:min(90vw,700px);
    height:auto;
    clip-path:none;
    background:var(--deep-cocoa);
    border:1px solid rgba(193,127,89,0.2);
    padding:clamp(24px,4vw,48px);
    border-radius:4px;
}

.code-block{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.85rem,1.1vw,1rem);
    line-height:1.5;
    color:var(--cream-parchment);
    white-space:pre;
    overflow-x:auto;
}

.code-kw{color:var(--terracotta)}
.code-ty{color:var(--rust-earth)}
.code-op{color:var(--honey-bright)}
.code-fn{color:var(--cream-parchment)}
.code-cm{color:var(--sienna-mist)}

/* Stratum V: Recursion */
.recursion-frame{
    position:relative;
    width:min(60vw,340px);
    display:flex;
    align-items:center;
    justify-content:center;
}

.recursion-hex-frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.recursion-inner{
    text-align:center;
    padding:clamp(40px,8vh,80px) clamp(16px,3vw,40px);
    position:relative;
    z-index:1;
}

.recursion-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:clamp(1.8rem,4vw,3rem);
    letter-spacing:0.02em;
    color:var(--cream-parchment);
}

.recursion-sub{
    font-family:'Crimson Pro',serif;
    font-style:italic;
    font-size:clamp(0.9rem,1.3vw,1.1rem);
    color:var(--clay-rose);
    margin-top:16px;
}

/* Reveal system */
.reveal{
    opacity:0;
    transform:translateY(12px);
    transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
               transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

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

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
    .hex-border-path{animation:none;stroke-dashoffset:0}
    .hero-group{animation:none;opacity:1;transform:none}
    .hero-subtitle{animation:none;opacity:1}
    .blob{animation:none}
    .reveal{transition:none;opacity:1;transform:none}
    .draw-path{animation:none;stroke-dashoffset:0}
}

/* Responsive */
@media(max-width:768px){
    .hex-cell{
        width:clamp(80px,20vw,110px);
        height:clamp(92px,23vw,127px);
    }
    .hex-large{
        width:clamp(200px,70vw,280px);
        height:clamp(230px,80vw,322px);
    }
    .lambda-cluster{flex-direction:column;align-items:center}
    .hero-hex{width:95vw}
}