/* haskell.monster - Abstract Glitch Formalism */

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

:root{
    --void-bg:#0A0816;
    --surface:#1B1438;
    --phosphor-violet:#7B2FBE;
    --glacial-cyan:#2FD4BF;
    --bone-white:#E8E2F0;
    --faded-lavender:#9B8FB8;
    --spectral-magenta:#D42F7B;
    --abyssal-green:#1AFF8E;
}

html{scroll-behavior:smooth;scroll-snap-type:y proximity}

body{
    background:linear-gradient(135deg,#0A0816 0%,#1B1438 40%,#2A1050 100%);
    background-attachment:fixed;
    color:var(--bone-white);
    font-family:'Instrument Serif',serif;
    font-weight:400;
    font-size:clamp(1rem,1.15vw,1.25rem);
    line-height:1.65;
    overflow-x:hidden;
}

/* Floating type fragments */
.type-fragments{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
}

.type-frag{
    position:absolute;
    font-family:'JetBrains Mono',monospace;
    font-weight:300;
    color:var(--faded-lavender);
    white-space:nowrap;
    will-change:transform;
}

@keyframes driftLeft{
    from{transform:translateX(110vw)}
    to{transform:translateX(-120vw)}
}

@keyframes driftRight{
    from{transform:translateX(-120vw)}
    to{transform:translateX(110vw)}
}

/* Symbol navigation */
.symbol-nav{
    position:fixed;
    left:0;
    top:0;
    width:24px;
    height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;
    z-index:50;
    background:rgba(10,8,22,0.5);
}

.sym-link{
    font-family:'JetBrains Mono',monospace;
    font-size:14px;
    color:var(--faded-lavender);
    text-decoration:none;
    opacity:0.4;
    transition:opacity 0.4s,color 0.4s,text-shadow 0.4s;
}

.sym-link:hover{
    opacity:0.8;
    text-shadow:0 0 8px var(--phosphor-violet);
}

.sym-link.active{
    color:var(--phosphor-violet);
    opacity:1;
    animation:symbolPulse 4s ease-in-out infinite;
}

@keyframes symbolPulse{
    0%,100%{opacity:0.4}
    50%{opacity:1}
}

/* Spreads */
.spread{
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(60px,8vh,120px) clamp(48px,4vw,80px);
    padding-left:48px;
    scroll-snap-align:start;
    overflow:hidden;
}

/* AST trees background */
.ast-tree{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    opacity:0.08;
    z-index:0;
}

.ast-medium{opacity:0.10}
.ast-large{opacity:0.12}
.ast-massive{opacity:0.12}
.ast-enormous{opacity:0.14}

.ast-pulse{
    animation:astGlow 6s ease-in-out infinite;
}

@keyframes astGlow{
    0%,100%{opacity:0.2}
    50%{opacity:0.35}
}

/* Spread layouts */
.spread-layout{
    display:flex;
    gap:clamp(24px,4vw,60px);
    width:100%;
    max-width:1100px;
    position:relative;
    z-index:2;
}

.panel-dominant{
    flex:0 0 61.8%;
    max-width:61.8%;
}

.panel-annotation{
    flex:0 0 38.2%;
    max-width:38.2%;
    display:flex;
    align-items:flex-start;
    padding-top:40px;
}

.spread-layout.reversed{
    flex-direction:row-reverse;
}

/* Three-column layout */
.spread-layout.three-col{
    gap:clamp(16px,2vw,32px);
}

.panel-timeline{
    flex:0 0 21%;
    max-width:21%;
}

.panel-center{
    flex:0 0 40%;
    max-width:40%;
}

.panel-right-col{
    flex:0 0 39%;
    max-width:39%;
    display:flex;
    align-items:flex-start;
    padding-top:40px;
}

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

.hero-title{
    font-family:'Anybody',sans-serif;
    font-size:clamp(4rem,11vw,12rem);
    line-height:1.05;
    letter-spacing:-0.03em;
}

.hero-haskell{
    font-weight:800;
    font-stretch:125%;
    color:var(--bone-white);
    opacity:0;
    transition:opacity 1.2s ease;
}

.hero-haskell.visible{opacity:1}

.hero-dot{
    color:var(--phosphor-violet);
    font-weight:800;
}

.hero-monster{
    font-weight:800;
    font-stretch:62.5%;
    color:var(--glacial-cyan);
    opacity:0;
    transition:opacity 1.2s ease;
}

.hero-monster.visible{opacity:1}

.hero-tagline{
    font-family:'JetBrains Mono',monospace;
    font-weight:300;
    font-size:clamp(0.9rem,1.5vw,1.3rem);
    color:var(--faded-lavender);
    margin-top:24px;
    opacity:0;
    transition:opacity 1s ease;
}

.hero-tagline.visible{opacity:1}

.tagline-sig{color:var(--phosphor-violet)}

/* Monster glyph */
.monster-glyph{
    position:absolute;
    width:200px;
    height:200px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:1;
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.monster-glyph.shifted{
    opacity:0.15;
    transform:translate(-120%,-50%);
}

.glyph-path{
    stroke-dasharray:600;
    stroke-dashoffset:600;
    animation:drawGlyph 3s ease-out forwards;
}

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

/* Section headings */
.section-heading{
    font-family:'Anybody',sans-serif;
    font-weight:300;
    font-size:clamp(1.8rem,3vw,3.2rem);
    letter-spacing:0.01em;
    color:var(--bone-white);
    margin-bottom:24px;
}

/* Body text */
.body-text{
    color:var(--bone-white);
    margin-top:16px;
}

.body-text code{
    font-family:'JetBrains Mono',monospace;
    font-size:0.9em;
    color:var(--glacial-cyan);
    background:rgba(27,20,56,0.6);
    padding:2px 6px;
    border-radius:2px;
}

/* Lazy text (blur effect) */
.lazy-text{
    filter:blur(8px);
    transition:filter 0.6s ease-out;
}

.lazy-text.sharp{
    filter:blur(0);
}

/* Code cards */
.code-card{
    background:var(--surface);
    border:1px solid var(--phosphor-violet);
    padding:24px;
    position:relative;
    font-family:'JetBrains Mono',monospace;
    font-feature-settings:"liga" 1;
    font-size:clamp(0.85rem,1vw,1.05rem);
    line-height:1.6;
    overflow-x:auto;
}

.code-card pre{margin:0}
.code-card code{color:var(--bone-white)}

.kw{color:var(--phosphor-violet)}
.ty{color:var(--glacial-cyan)}
.op{color:var(--spectral-magenta)}
.fn{color:var(--bone-white)}
.st{color:var(--abyssal-green)}
.cm{color:var(--faded-lavender)}

/* Bind corner decorations */
.bind-corner{
    position:absolute;
    font-family:'JetBrains Mono',monospace;
    font-size:8px;
    color:var(--phosphor-violet);
    opacity:0.5;
}

.bind-corner.tl{top:4px;left:4px}
.bind-corner.br{bottom:4px;right:4px}

/* Interstitials */
.interstitial{
    height:8vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:2;
    overflow:hidden;
}

.interstitial-type{
    font-family:'JetBrains Mono',monospace;
    font-weight:300;
    font-size:clamp(1.2rem,2vw,2rem);
    color:var(--glacial-cyan);
    opacity:0.3;
    white-space:nowrap;
}

/* Glitch band */
.glitch-band{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:var(--spectral-magenta);
    mix-blend-mode:screen;
    opacity:0;
    z-index:10;
}

.glitch-band.flicker{
    animation:glitchFlicker 0.45s step-end forwards;
}

@keyframes glitchFlicker{
    0%{opacity:0.8}
    10%{opacity:0}
    20%{opacity:0.6;background:var(--glacial-cyan)}
    30%{opacity:0}
    40%{opacity:0.7;background:var(--spectral-magenta)}
    50%{opacity:0}
    100%{opacity:0}
}

/* Timeline */
.timeline{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
}

.tl-node{
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
}

.tl-node::before{
    content:'';
    width:12px;
    height:12px;
    border-radius:50%;
    border:1.5px solid var(--phosphor-violet);
    background:transparent;
    display:block;
    margin-bottom:4px;
}

.tl-year{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    color:var(--glacial-cyan);
}

.tl-label{
    font-family:'Instrument Serif',serif;
    font-size:12px;
    color:var(--faded-lavender);
    text-align:center;
}

.tl-line{
    width:1.5px;
    height:24px;
    background:var(--phosphor-violet);
    opacity:0.3;
}

/* Final line */
.final-line{
    font-family:'Anybody',sans-serif;
    font-weight:300;
    font-stretch:100%;
    font-size:clamp(1.8rem,4vw,3.5rem);
    color:var(--bone-white);
    margin-top:48px;
    text-align:center;
    transition:color 1.5s ease,text-shadow 1.5s ease;
}

.final-line.compiled{
    color:var(--abyssal-green);
    text-shadow:0 0 40px var(--abyssal-green),0 0 80px rgba(26,255,142,0.3);
}

/* 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);
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
    .glyph-path{animation:none;stroke-dashoffset:0}
    .type-frag{animation:none !important}
    .ast-pulse{animation:none}
    .sym-link.active{animation:none;opacity:1}
    .lazy-text{filter:none}
    .reveal{transition:none;opacity:1;transform:none}
    .glitch-band.flicker{animation:none}
}

/* Responsive */
@media(max-width:768px){
    .spread-layout,.spread-layout.reversed,.spread-layout.three-col{
        flex-direction:column;
    }
    .panel-dominant,.panel-annotation,.panel-timeline,.panel-center,.panel-right-col{
        flex:1 1 auto;
        max-width:100%;
    }
    .symbol-nav{
        top:auto;bottom:0;left:0;right:0;
        width:100%;height:24px;
        flex-direction:row;
    }
    .spread{padding-left:24px}
    .monster-glyph{width:120px;height:120px}
}