/* haskell.quest - Terminal Monastery */

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

:root{
    --deep-soil:#1C1A17;
    --copper-patina:#4A7C6F;
    --terracotta:#B85C38;
    --aged-parchment:#E8DFD0;
    --lambda-gold:#C4973B;
    --lichen-gray:#6B7F72;
    --charcoal-moss:#2D3029;
    --root-black:#0F0E0C;
}

html{scroll-behavior:smooth}

/* Custom scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--root-black)}
::-webkit-scrollbar-thumb{
    background:var(--copper-patina);
    border-radius:2px;
    border:1px solid transparent;
}
::-webkit-scrollbar-thumb:hover{background:var(--terracotta)}

body{
    background:var(--root-black);
    color:var(--aged-parchment);
    font-family:'Lora',serif;
    font-weight:400;
    font-size:clamp(1rem,1.3vw,1.15rem);
    line-height:1.75;
    letter-spacing:0.005em;
    overflow-x:hidden;
}

/* Lambda watermark */
.lambda-watermark{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:60vw;
    color:var(--deep-soil);
    pointer-events:none;
    z-index:0;
    opacity:0;
    transition:opacity 1s ease;
    line-height:1;
}

.lambda-watermark.visible{opacity:1}

/* Ripple layer */
.ripple-layer{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:100;
    overflow:hidden;
}

.ripple-rect{
    position:absolute;
    border:1.5px solid var(--copper-patina);
    border-radius:4px;
    opacity:0.15;
    transform:translate(-50%,-50%) scale(0);
    animation:rippleExpand 800ms cubic-bezier(0.0,0.0,0.2,1.0) forwards;
}

@keyframes rippleExpand{
    to{
        transform:translate(-50%,-50%) scale(1);
        opacity:0;
    }
}

/* Dashboard layout */
.dashboard{
    display:flex;
    min-height:100vh;
    position:relative;
    z-index:1;
}

/* Primary panel */
.primary-panel{
    flex:0 0 62%;
    max-width:62%;
    padding:0 clamp(32px,4vw,64px);
}

/* Type inspector */
.type-inspector{
    flex:0 0 38%;
    max-width:38%;
    position:sticky;
    top:0;
    height:100vh;
    background:var(--charcoal-moss);
    border-left:1px solid rgba(74,124,111,0.12);
    padding:clamp(24px,3vh,48px) clamp(16px,2vw,32px);
    display:flex;
    flex-direction:column;
    overflow-y:auto;
}

.inspector-header{
    margin-bottom:24px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(74,124,111,0.2);
}

.inspector-label{
    font-family:'Source Code Pro',monospace;
    font-weight:600;
    font-size:0.8rem;
    color:var(--copper-patina);
    text-transform:uppercase;
    letter-spacing:0.1em;
}

.inspector-entry{
    display:none;
    flex-direction:column;
    gap:8px;
}

.inspector-entry.active{
    display:flex;
}

.insp-sig{
    font-family:'Source Code Pro',monospace;
    font-weight:400;
    font-size:clamp(0.85rem,1.1vw,1rem);
    color:var(--aged-parchment);
    line-height:1.65;
}

.type-thunk{
    color:var(--terracotta);
    animation:thunkPulse 2s ease-in-out infinite;
}

@keyframes thunkPulse{
    0%,100%{opacity:0.6}
    50%{opacity:1}
}

.type-eval{color:var(--copper-patina)}
.type-normal{color:var(--lambda-gold)}

.insp-note{
    font-family:'Source Code Pro',monospace;
    font-size:0.75rem;
    color:var(--lichen-gray);
    font-style:italic;
}

/* Breathing channel is the gap between flex items */

/* Steps */
.step{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(40px,6vh,80px) 0;
}

/* Hero */
.hero-block{
    position:relative;
}

.hero-title{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(3.5rem,10vw,8rem);
    letter-spacing:-0.02em;
    line-height:1.05;
    color:var(--aged-parchment);
    text-shadow:0 0 40px rgba(74,124,111,0.08);
    display:inline;
}

.cursor{
    font-family:'Source Code Pro',monospace;
    color:var(--lambda-gold);
    font-size:clamp(2.5rem,7vw,5rem);
    animation:cursorBlink 1s steps(1) infinite;
    vertical-align:baseline;
}

@keyframes cursorBlink{
    0%,50%{opacity:1}
    51%,100%{opacity:0}
}

.hero-sub{
    font-family:'Lora',serif;
    font-size:clamp(1rem,1.5vw,1.2rem);
    color:var(--lichen-gray);
    margin-top:16px;
    opacity:0;
    transition:opacity 1s ease;
}

.hero-sub.visible{opacity:1}

/* Circuit traces */
.circuit-trace{
    width:200px;
    height:40px;
    margin-top:24px;
}

.trace-path{
    stroke-dasharray:300;
    stroke-dashoffset:300;
    opacity:0.25;
}

.trace-path.drawn{
    animation:drawTrace 1.5s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}

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

/* Type signature dividers */
.type-divider{
    padding:clamp(16px,2vh,32px) 0;
    text-align:center;
}

.type-divider span{
    font-family:'Source Code Pro',monospace;
    font-size:0.8rem;
    color:var(--lichen-gray);
    letter-spacing:0.02em;
}

/* Section titles */
.section-title{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1.6rem,3vw,2.8rem);
    letter-spacing:-0.02em;
    color:var(--aged-parchment);
    margin-bottom:32px;
}

/* Content blocks (Step 1) */
.content-blocks{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.content-block{
    border-left:2px solid var(--copper-patina);
    padding:16px 24px;
    background:rgba(45,48,41,0.3);
}

.block-title{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1.1rem,1.5vw,1.3rem);
    color:var(--lambda-gold);
    margin-bottom:8px;
}

.block-body{
    color:var(--aged-parchment);
}

/* App cards (Step 2) */
.card-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.app-card{
    background:var(--charcoal-moss);
    border:1px solid rgba(74,124,111,0.12);
    border-radius:6px;
    padding:24px;
    transition:box-shadow 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
               border-color 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
    cursor:default;
}

.app-card:hover{
    box-shadow:0 0 8px rgba(74,124,111,0.3),0 0 20px rgba(74,124,111,0.1);
    border-color:rgba(74,124,111,0.4);
}

.card-label{
    font-family:'Source Code Pro',monospace;
    font-weight:600;
    font-size:0.85rem;
    color:var(--copper-patina);
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.card-desc{
    font-family:'Lora',serif;
    font-size:0.95rem;
    color:var(--aged-parchment);
    line-height:1.65;
}

/* Normal form (Step 3) */
.step-final{
    background:var(--deep-soil);
    text-align:center;
    align-items:center;
    padding:clamp(60px,10vh,120px) clamp(24px,4vw,60px);
}

.normal-form{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1.3rem,2.5vw,2rem);
    color:var(--aged-parchment);
    line-height:1.8;
    max-width:560px;
}

.cursor-final{
    display:block;
    font-family:'Source Code Pro',monospace;
    color:var(--lambda-gold);
    font-size:1.5rem;
    margin-top:32px;
    animation:cursorBlink 1s steps(1) infinite;
}

/* Reveal system */
.reveal{
    opacity:0;
    transform:translateX(-20px);
    transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
               transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}

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

/* Mobile drawer tab */
.drawer-tab{
    display:none;
    position:fixed;
    bottom:0;
    right:24px;
    background:var(--charcoal-moss);
    color:var(--copper-patina);
    border:1px solid rgba(74,124,111,0.3);
    border-bottom:none;
    border-radius:6px 6px 0 0;
    padding:6px 16px;
    font-family:'Source Code Pro',monospace;
    font-size:0.75rem;
    cursor:pointer;
    z-index:60;
}

/* Responsive */
@media(max-width:900px){
    .dashboard{flex-direction:column}
    .primary-panel{flex:1 1 auto;max-width:100%}
    .type-inspector{
        position:fixed;
        bottom:0;left:0;right:0;
        top:auto;
        max-width:100%;
        height:auto;
        max-height:40vh;
        transform:translateY(100%);
        transition:transform 0.4s ease;
        z-index:55;
        border-left:none;
        border-top:1px solid rgba(74,124,111,0.2);
    }
    .type-inspector.open{
        transform:translateY(0);
    }
    .drawer-tab{display:block}
    .card-grid{grid-template-columns:1fr}
}