/* iggi.boo -- surrealist typewriter seance */
/* Palette: #F5ECD7 (parchment), #FAF6EE (bond), #2C2416 (lamp black), #5B4A3A (old correspondence), #E8A840 (candle glow), #D4782F (wick heart), #8B3A2A (wax seal), #7A4B2A (pen nib), #C4A67D (desk shadow), #1A1510 (attic dark) */

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

html{
    font-size:16px;
    scroll-behavior:smooth;
}

body{
    background:linear-gradient(180deg,#F5ECD7 0%,#E8D5B5 100%);
    background-attachment:fixed;
    color:#2C2416;
    font-family:'Space Mono',monospace;
    font-weight:400;
    font-size:clamp(0.95rem,1.8vw,1.15rem);
    line-height:1.85;
    letter-spacing:0.04em;
    overflow-x:hidden;
}

/* Parchment grain overlay */
body::before{
    content:'';
    position:fixed;
    inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    background-size:150px;
    opacity:0.04;
    pointer-events:none;
    z-index:9999;
}

.caveat{
    font-family:'Caveat',cursive;
    font-weight:400;
    color:#7A4B2A;
}

/* Chambers */
.chamber{
    min-height:100svh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,4vw,4rem);
}

.chamber-marginalia{
    min-height:150svh;
    flex-direction:column;
    gap:3rem;
}

/* Candle */
.candle-svg{
    position:absolute;
    top:8vh;
    right:10vw;
    width:clamp(40px,5vw,60px);
    z-index:10;
}

.flame-outer{
    animation:flicker1 1.5s ease-in-out infinite;
    transform-origin:center bottom;
}
.flame-mid{
    animation:flicker2 1.2s ease-in-out infinite;
    transform-origin:center bottom;
}
.flame-core{
    animation:flicker3 0.9s ease-in-out infinite;
    transform-origin:center bottom;
}

@keyframes flicker1{
    0%,100%{transform:scaleY(1) translateX(0)}
    25%{transform:scaleY(1.1) translateX(1px)}
    50%{transform:scaleY(0.9) translateX(-0.5px)}
    75%{transform:scaleY(1.05) translateX(0.5px)}
}
@keyframes flicker2{
    0%,100%{transform:scaleY(1) translateX(0)}
    30%{transform:scaleY(0.92) translateX(-1px)}
    60%{transform:scaleY(1.08) translateX(0.5px)}
}
@keyframes flicker3{
    0%,100%{transform:scaleY(1)}
    40%{transform:scaleY(1.1)}
    70%{transform:scaleY(0.88)}
}

.candle-light{
    position:absolute;
    top:5vh;
    right:8vw;
    width:50vw;
    height:50vh;
    background:radial-gradient(ellipse at center,rgba(232,168,64,0.12) 0%,transparent 70%);
    pointer-events:none;
    z-index:1;
}

/* Desk panels */
.desk-panel{
    background:#FAF6EE;
    padding:clamp(2rem,4vw,3.5rem);
    box-shadow:2px 4px 16px rgba(196,166,125,0.3);
    position:relative;
    z-index:5;
}

.hero-panel{
    max-width:600px;
    position:absolute;
    top:25%;
    left:8%;
}

.typed-hero{
    font-family:'Space Mono',monospace;
    font-weight:700;
    font-size:clamp(2rem,5vw,4rem);
    color:#2C2416;
    letter-spacing:0.04em;
    line-height:1.1;
}

.hero-sub{
    font-size:clamp(0.85rem,1.2vw,1rem);
    color:#5B4A3A;
    margin-top:1rem;
    font-style:italic;
}

.note-panel{
    position:absolute;
    max-width:280px;
    padding:1.5rem;
    z-index:4;
}

.note-text{
    font-size:clamp(1rem,2vw,1.3rem);
    line-height:1.5;
}

/* Scroll arrow */
.scroll-arrow{
    position:absolute;
    bottom:3rem;
    left:50%;
    transform:translateX(-50%);
    animation:arrowTremble 2.5s ease-in-out infinite;
    z-index:10;
}

@keyframes arrowTremble{
    0%,100%{transform:translateX(-50%) translateY(0) rotate(0)}
    25%{transform:translateX(-50%) translateY(3px) rotate(-1deg)}
    50%{transform:translateX(-50%) translateY(0) rotate(0.5deg)}
    75%{transform:translateX(-50%) translateY(2px) rotate(-0.5deg)}
}

/* Letter panel */
.letter-panel{
    background:#FAF6EE;
    padding:clamp(2.5rem,5vw,4rem);
    max-width:640px;
    box-shadow:2px 4px 20px rgba(196,166,125,0.25);
    transform:rotate(-0.3deg);
    opacity:0;
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.letter-panel[data-reveal].revealed{
    opacity:1;
}

.letter-text{
    color:#2C2416;
    min-height:6rem;
}

/* Marginalia */
.marginalia-left{
    position:absolute;
    left:2vw;
    top:15%;
    font-size:clamp(0.9rem,1.5vw,1.1rem);
    transform:rotate(-3deg);
    opacity:0;
    transition:opacity 0.8s ease 0.3s;
}

.marginalia-right{
    position:absolute;
    right:3vw;
    top:35%;
    font-size:clamp(0.8rem,1.3vw,1rem);
    transform:rotate(2deg);
    opacity:0;
    transition:opacity 0.8s ease 0.5s;
}

.chamber-marginalia.in-view .marginalia-left,
.chamber-marginalia.in-view .marginalia-right{
    opacity:1;
}

/* Note cards */
.note-card{
    background:#FAF6EE;
    padding:clamp(1.5rem,3vw,2.5rem);
    max-width:420px;
    box-shadow:1px 3px 12px rgba(196,166,125,0.2);
    font-size:clamp(0.88rem,1.4vw,1rem);
    color:#2C2416;
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.note-card.revealed{
    opacity:1;
    transform:translateY(0) rotate(var(--r,0deg));
}

.card-1{align-self:flex-start;margin-left:10%}
.card-2{align-self:flex-end;margin-right:8%}
.card-3{align-self:flex-start;margin-left:18%}

.doodle-envelope{
    position:absolute;
    bottom:10%;
    right:15%;
    opacity:0.3;
}

/* Reply panel */
.reply-panel{
    background:#FAF6EE;
    padding:clamp(2.5rem,5vw,4rem);
    max-width:600px;
    box-shadow:2px 4px 18px rgba(196,166,125,0.22);
    transform:rotate(0.4deg);
    opacity:0;
    transition:opacity 0.8s ease;
}

.reply-panel.revealed{
    opacity:1;
}

.reply-text{
    font-family:'Courier Prime',monospace;
    font-weight:400;
    font-size:0.9rem;
    color:#5B4A3A;
    line-height:1.85;
    min-height:4rem;
}

/* Seal */
.chamber-seal{
    flex-direction:column;
    gap:2rem;
    background:linear-gradient(180deg,#F5ECD7 0%,#1A1510 100%);
}

.wax-seal{
    width:clamp(100px,15vw,140px);
    filter:drop-shadow(0 0 20px rgba(232,168,64,0.3));
    animation:sealPulse 3s ease-in-out infinite;
}

@keyframes sealPulse{
    0%,100%{filter:drop-shadow(0 0 16px rgba(232,168,64,0.2))}
    50%{filter:drop-shadow(0 0 28px rgba(232,168,64,0.5))}
}

.seal-circle{
    filter:url(#none);
}

.seal-domain{
    font-family:'Space Mono',monospace;
    font-weight:400;
    font-size:clamp(1rem,2vw,1.5rem);
    color:#FAF6EE;
    letter-spacing:0.08em;
    min-height:1.5em;
}

/* Responsive */
@media(max-width:768px){
    .hero-panel{
        position:relative;
        top:auto;
        left:auto;
    }
    .note-panel{
        position:relative;
        top:auto;
        left:auto;
        margin-top:2rem;
    }
    .chamber-desk{
        flex-direction:column;
        gap:2rem;
    }
    .marginalia-left,.marginalia-right{
        position:relative;
        left:auto;right:auto;top:auto;
        transform:none;
    }
    .card-1,.card-2,.card-3{
        align-self:center;
        margin-left:0;margin-right:0;
    }
    .candle-light{display:none}
}

@media(prefers-reduced-motion:reduce){
    .flame-outer,.flame-mid,.flame-core{animation:none}
    .scroll-arrow{animation:none}
    .wax-seal{animation:none}
    .desk-panel,.letter-panel,.note-card,.reply-panel{
        opacity:1;transform:none;transition:none;
    }
    .marginalia-left,.marginalia-right{opacity:1;transition:none}
}