/* memorial.wiki - Dark-academia memorial cenotaph */

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

:root{
    --obsidian:#1A1118;
    --damson:#2A2230;
    --vellum:#C4B8A8;
    --brass:#B8965A;
    --candle:#E8D5B0;
    --rose:#6B3A4A;
    --marble:#DDD5C8;
    --void:#0E0B10;
}

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

body{
    background:var(--obsidian);
    color:var(--vellum);
    font-family:'EB Garamond',serif;
    font-weight:400;
    font-size:clamp(1rem,1.15vw,1.15rem);
    line-height:1.85;
    overflow-x:hidden;
}

/* Grain overlay */
.grain-overlay{
    position:fixed;inset:0;
    z-index:9998;pointer-events:none;
    opacity:0.06;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size:150px 150px;
    mix-blend-mode:overlay;
}

/* Veil */
.veil{
    position:fixed;inset:0;
    z-index:9000;
    background:var(--obsidian);
    transition:opacity 3s ease;
    pointer-events:none;
}

.veil.dissolved{opacity:0}

/* Section label */
.section-label{
    position:fixed;top:16px;right:16px;
    z-index:100;
    font-family:'IM Fell English SC',serif;
    font-size:0.75rem;
    letter-spacing:0.14em;
    color:var(--brass);
    opacity:0;
    transition:opacity 0.6s ease;
}

.section-label.visible{opacity:1}

/* Memorial column */
.memorial-column{
    max-width:680px;
    margin:0 auto;
    padding:0 24px;
}

/* Acts */
.act{
    min-height:100vh;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    padding:clamp(80px,12vh,160px) 0;
    text-align:center;
}

/* Threshold */
.inscription-title{
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    font-size:clamp(2.8rem,6vw,5rem);
    color:var(--candle);
    letter-spacing:0.06em;
    opacity:0;transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.inscription-title.revealed{opacity:1;transform:translateY(0)}

/* Flames */
.flame{
    position:relative;
    width:20px;height:30px;
    margin:2rem auto 0;
}

.flame-inner{
    width:8px;height:16px;
    margin:0 auto;
    border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
    background:radial-gradient(ellipse,var(--candle) 0%,var(--brass) 40%,transparent 70%);
    animation:flicker 2.5s ease-in-out infinite;
}

.flame-inner.lg{width:16px;height:28px}

.flame-glow{
    position:absolute;
    top:-10px;left:50%;
    transform:translateX(-50%);
    width:60px;height:60px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(184,150,90,0.25) 0%,transparent 70%);
    pointer-events:none;
}

.flame-glow.lg{width:100px;height:100px;top:-20px}

@keyframes flicker{
    0%,100%{opacity:0.8;transform:scaleY(1) translateY(0)}
    25%{opacity:1;transform:scaleY(1.03) translateY(-1px)}
    50%{opacity:0.6;transform:scaleY(0.97) translateY(1px)}
    75%{opacity:0.9;transform:scaleY(1.01) translateY(-2px)}
}

.flame-alcove{margin:0 auto 1rem}

.scroll-line{
    width:1px;height:60px;
    background:linear-gradient(to bottom,var(--brass),transparent);
    margin-top:1.5rem;
    animation:scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse{
    0%,100%{opacity:0.3;transform:translateY(0)}
    50%{opacity:0.8;transform:translateY(8px)}
}

/* Dividers */
.divider{
    display:flex;align-items:center;justify-content:center;
    padding:3rem 0;
}

.divider-diamond{position:relative}
.divider-diamond::before,.divider-diamond::after{
    content:'';width:80px;height:1px;
    background:rgba(184,150,90,0.3);
}
.diamond{
    width:8px;height:8px;
    background:var(--brass);
    transform:rotate(45deg);
    margin:0 1rem;
}

.divider-dots{gap:8px}
.dot{
    width:4px;height:4px;
    border-radius:50%;
    background:var(--brass);
}

.wreath-svg{width:60px;height:30px}
.wreath-path{
    stroke-dasharray:120;
    stroke-dashoffset:120;
    transition:stroke-dashoffset 1.5s ease-in-out;
}

.divider-wreath.visible .wreath-path{stroke-dashoffset:0}

/* Inscriptions */
.inscription{
    text-align:center;
    padding:2rem 0;
    opacity:0;transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

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

.inscription-date{
    font-family:'IM Fell English SC',serif;
    font-size:0.75rem;
    letter-spacing:0.14em;
    color:var(--brass);
    margin-bottom:0.75rem;
}

.inscription-name{
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    font-size:clamp(1.8rem,4vw,3.2rem);
    color:var(--candle);
    letter-spacing:0.06em;
    margin-bottom:1.5rem;
}

.inscription-body{
    max-width:560px;
    margin:0 auto;
    text-align:left;
}

/* Chamber */
.act-chamber{padding:0}

.memorial-panel{
    width:100vw;
    margin-left:calc(-50vw + 50%);
    min-height:70vh;
    display:flex;align-items:center;justify-content:center;
    position:relative;
    overflow:hidden;
}

.marble-bg{
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse at 20% 30%,var(--marble) 0%,transparent 50%),
        radial-gradient(ellipse at 70% 60%,var(--vellum) 0%,transparent 40%),
        radial-gradient(ellipse at 50% 80%,var(--damson) 0%,transparent 60%);
    opacity:0.15;
}

.chamber-text{
    max-width:560px;
    padding:3rem;
    position:relative;z-index:2;
    filter:blur(4px);opacity:0.3;
    transition:filter 1.2s ease,opacity 1.2s ease;
}

.chamber-text.revealed{filter:blur(0);opacity:1}

.epitaph{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(1.4rem,2.5vw,2rem);
    color:var(--candle);
    line-height:1.6;
    text-align:center;
}

/* Alcoves */
.act-archive{
    align-items:center;
    gap:3rem;
}

.alcove{
    max-width:480px;
    padding:2rem;
    box-shadow:inset 0 0 60px rgba(26,17,24,0.4);
    border:1px solid rgba(184,150,90,0.15);
    outline:1px solid rgba(184,150,90,0.08);
    outline-offset:6px;
    opacity:0;transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

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

.alcove-text{
    text-align:center;
    line-height:1.85;
}

/* Eternal */
.act-eternal{
    min-height:70vh;
}

.eternal-content{
    text-align:center;
    opacity:0;transform:translateY(20px);
    transition:opacity 1s ease,transform 1s ease;
}

.eternal-content.revealed{opacity:1;transform:translateY(0)}

.flame-eternal{
    margin:0 auto 2rem;
    width:30px;height:50px;
}

.eternal-word{
    font-family:'IM Fell English SC',serif;
    font-size:clamp(1rem,1.5vw,1.2rem);
    letter-spacing:0.2em;
    color:var(--brass);
}

.fade-line{
    width:1px;height:120px;
    margin:2rem auto 0;
    background:linear-gradient(to bottom,var(--brass),transparent);
}

/* Stars (scattered in bg) */
.star{
    position:fixed;
    width:3px;height:3px;
    border-radius:50%;
    background:var(--brass);
    pointer-events:none;
    opacity:0;
    transition:opacity 2s ease;
}

.star.twinkle{opacity:0.4}

/* Responsive */
@media(max-width:768px){
    .memorial-column{max-width:100%}
    .inscription-body,.alcove-text{text-align:left}
}

@media(prefers-reduced-motion:reduce){
    .veil{transition:none;opacity:0}
    .flame-inner{animation:none;opacity:0.8}
    .scroll-line{animation:none;opacity:0.5}
    .inscription,.inscription-title,.alcove,.eternal-content,.chamber-text{
        opacity:1;transform:none;filter:none;transition:none;
    }
    .wreath-path{stroke-dashoffset:0;transition:none}
}