/* hangul.day - Neubrutalist Hangul Celebration */

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

:root{
    --meok:#0A0A0A;
    --hanji:#F2EDE4;
    --danchu:#E63946;
    --nouel:#FF6B35;
    --hwanggeum:#F7C948;
    --bada:#1D3557;
    --haneul:#A8DADC;
}

html{scroll-behavior:smooth}

body{
    background:var(--meok);
    color:var(--meok);
    font-family:'Cormorant Garamond',serif;
    overflow-x:hidden;
}

/* Panels */
.panel{
    min-height:100vh;
    position:sticky;
    top:0;
    border:6px solid var(--meok);
    box-shadow:12px 12px 0 var(--meok);
}

.panel-cream{background:var(--hanji);color:var(--meok)}
.panel-navy{background:var(--bada);color:var(--hanji)}

.panel-inner{
    min-height:100vh;
    padding:clamp(40px,6vh,80px) clamp(32px,4vw,80px);
    position:relative;
    overflow:hidden;
}

.panel-grid{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:32px;
    align-items:start;
}

/* Annotation column */
.annotation-col{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding-top:8px;
}

.anno{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    font-weight:400;
    letter-spacing:0.08em;
    opacity:0.5;
}

.content-col{
    max-width:700px;
}

/* Typography */
.panel-title{
    font-family:'Cormorant Garamond',serif;
    font-weight:700;
    font-size:clamp(2.5rem,6vw,5rem);
    line-height:1.1;
    margin-bottom:24px;
}

.panel-navy .panel-title .first-letter{color:var(--danchu)}

.panel-body{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:1.125rem;
    line-height:1.8;
    margin-bottom:20px;
}

/* Gradient text */
.gradient-text{
    background:linear-gradient(135deg,var(--danchu),var(--nouel),var(--hwanggeum));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* Watermark */
.watermark-char{
    position:absolute;
    font-family:'Noto Serif KR',serif;
    font-weight:900;
    font-size:60vw;
    line-height:1;
    opacity:0.04;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index:0;
}

.watermark-hanja{
    font-family:serif;
    opacity:0.06;
}

/* Hero */
.hero-char{
    font-family:'Noto Serif KR',serif;
    font-weight:900;
    font-size:clamp(10rem,30vw,25rem);
    line-height:1;
    text-align:center;
    position:relative;
    z-index:1;
}

.hero-headline{
    font-family:'Cormorant Garamond',serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    text-align:center;
    margin-top:24px;
    position:relative;z-index:1;
}

.scroll-hint{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.08em;
    text-align:center;
    position:absolute;
    bottom:32px;left:50%;
    transform:translateX(-50%);
    opacity:0;
    transition:opacity 1s;
}

.scroll-hint.visible{opacity:0.2}

/* Lens flares */
.lens-flare{
    position:absolute;
    pointer-events:none;
    border-radius:50%;
    z-index:0;
}

.flare-1{
    width:200px;height:200px;
    top:15%;right:10%;
    background:
        radial-gradient(circle,rgba(247,201,72,0.9) 0%,transparent 25%),
        radial-gradient(circle,rgba(255,107,53,0.3) 0%,transparent 50%),
        radial-gradient(circle,rgba(230,57,70,0.08) 0%,transparent 70%);
    animation:pulseLensFlare 8s ease-in-out infinite;
}

.flare-cool{
    width:180px;height:180px;
    bottom:10%;left:15%;
    background:
        radial-gradient(circle,rgba(168,218,220,0.7) 0%,transparent 25%),
        radial-gradient(circle,rgba(29,53,87,0.2) 0%,transparent 50%);
    animation:pulseLensFlare 8s ease-in-out infinite 2s;
}

.flare-large{
    width:300px;height:300px;
}

.flare-final{
    width:400px;height:400px;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    animation:pulseFinal 12s ease-in-out forwards;
}

@keyframes pulseLensFlare{
    0%,100%{transform:scale(1);opacity:0.6}
    50%{transform:scale(1.2);opacity:1}
}

@keyframes pulseFinal{
    0%{transform:translate(-50%,-50%) scale(0.5);opacity:0}
    50%{transform:translate(-50%,-50%) scale(1.5);opacity:0.8}
    100%{transform:translate(-50%,-50%) scale(2);opacity:0}
}

/* Jamo showcase */
.jamo-showcase{
    display:flex;gap:clamp(16px,3vw,40px);
    margin-top:32px;
    flex-wrap:wrap;
}

.jamo-pair{
    text-align:center;
    border:3px solid var(--meok);
    padding:16px 20px;
    box-shadow:6px 6px 0 var(--meok);
    transition:box-shadow 0.15s,transform 0.15s;
}

.jamo-pair:hover{
    box-shadow:16px 16px 0 var(--meok);
    transform:translate(-5px,-5px);
}

.jamo-large{
    font-family:'Noto Serif KR',serif;
    font-weight:900;
    font-size:clamp(2rem,5vw,4rem);
    display:block;
}

.jamo-desc{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    letter-spacing:0.04em;
    opacity:0.6;
    display:block;
    margin-top:8px;
}

/* Derivation */
.derivation-chain{
    display:flex;
    align-items:center;
    gap:20px;
    margin:20px 0;
}

.derive-step{
    font-family:'Noto Serif KR',serif;
    font-weight:900;
    font-size:clamp(2.5rem,5vw,4rem);
    border:3px solid var(--hanji);
    padding:12px 20px;
    box-shadow:6px 6px 0 rgba(242,237,228,0.3);
}

.derive-arrow{
    font-size:2rem;
    opacity:0.5;
}

/* Vowels */
.vowel-showcase{
    display:flex;gap:clamp(12px,2vw,24px);
    margin-top:24px;
    flex-wrap:wrap;
}

.vowel-item{
    font-family:'Noto Serif KR',serif;
    font-weight:900;
    font-size:clamp(2rem,4vw,3.5rem);
    border:3px solid var(--meok);
    padding:12px 16px;
    box-shadow:6px 6px 0 var(--meok);
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.5s ease,transform 0.5s ease;
}

.vowel-item.visible{opacity:1;transform:translateY(0)}

/* Assembly */
.assembly-display{
    display:flex;
    align-items:center;
    gap:24px;
    margin-top:32px;
    flex-wrap:wrap;
}

.assembly-parts{
    display:flex;gap:12px;
}

.apart{
    font-family:'Noto Serif KR',serif;
    font-weight:900;
    font-size:clamp(2rem,4vw,3rem);
    border:3px solid var(--hanji);
    padding:8px 14px;
    box-shadow:4px 4px 0 rgba(242,237,228,0.3);
}

.assembly-arrow{
    font-size:2rem;
    opacity:0.5;
}

.assembled-result{
    font-family:'Noto Serif KR',serif;
    font-weight:900;
    font-size:clamp(4rem,10vw,8rem);
}

/* Stats */
.stat-list{
    display:flex;flex-direction:column;gap:24px;
    margin:24px 0;
}

.stat-item{
    display:flex;align-items:baseline;gap:12px;
}

.stat-num{
    font-family:'Cormorant Garamond',serif;
    font-weight:700;
    font-size:clamp(2.5rem,5vw,4rem);
    line-height:1;
}

.stat-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.8rem;
    letter-spacing:0.04em;
    opacity:0.6;
}

/* Coda */
.coda-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.coda-title{
    font-family:'Cormorant Garamond',serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,7rem);
    line-height:1;
    margin-bottom:24px;
}

.coda-sub{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.85rem;
    letter-spacing:0.08em;
    opacity:0.6;
}

/* Reveal animations */
.panel-title,.panel-body,.jamo-pair,.derive-step,.stat-item,.apart{
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.6s cubic-bezier(0.25,0.1,0.25,1),transform 0.6s cubic-bezier(0.25,0.1,0.25,1);
}

.revealed .panel-title,.revealed .panel-body,.revealed .jamo-pair,.revealed .derive-step,.revealed .stat-item,.revealed .apart{
    opacity:1;
    transform:translateY(0);
}

/* Responsive */
@media(max-width:768px){
    .panel{box-shadow:6px 6px 0 var(--meok)}
    .panel-grid{grid-template-columns:1fr}
    .annotation-col{flex-direction:row;flex-wrap:wrap;gap:12px}
    .jamo-pair{box-shadow:4px 4px 0 var(--meok)}
    .derivation-chain{flex-wrap:wrap;gap:12px}
}