/* hangul.name - Kinetic Typography Codex */

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

:root{
    --midnight-ink:#0E0E1A;
    --hanji-charcoal:#1A1A2E;
    --moonlit-parchment:#E8E8F0;
    --dusk-lavender:#9898B8;
    --celadon-glow:#5ECFB2;
    --royal-persimmon:#E85D3A;
    --deep-indigo:#3A3A8C;
    --gutter-violet:#3A3A5C;
}

html{scroll-behavior:smooth}

body{
    background:var(--midnight-ink);
    color:var(--moonlit-parchment);
    font-family:'Noto Serif',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    line-height:1.75;
    overflow-x:hidden;
}

/* Particle field */
.particle-field{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
}

.particle-field span{
    position:absolute;
    font-family:'Noto Sans KR',sans-serif;
    font-weight:100;
    color:var(--dusk-lavender);
    opacity:0.04;
    animation:particleDrift linear infinite;
}

@keyframes particleDrift{
    0%{transform:translateY(0) rotate(0deg)}
    100%{transform:translateY(-110vh) rotate(360deg)}
}

/* Spreads */
.spread{
    min-height:100vh;
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(40px,6vh,80px) clamp(24px,4vw,80px);
}

.spread-inner{
    display:flex;
    width:100%;
    max-width:1200px;
    align-items:stretch;
    min-height:70vh;
}

.page{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(20px,3vw,40px);
}

.gutter{
    width:1px;
    background:var(--gutter-violet);
    opacity:0.4;
    flex-shrink:0;
}

.page-prose{
    padding-left:clamp(24px,4vw,60px);
}

/* Breathing zones */
.breathing-zone{
    height:15vh;
    position:relative;
    z-index:1;
    overflow:hidden;
}

.drift-jamo{
    position:absolute;
    bottom:-20%;
    font-family:'Noto Sans KR',sans-serif;
    font-weight:100;
    font-size:clamp(2rem,4vw,4rem);
    color:var(--dusk-lavender);
    opacity:0.04;
    animation:driftUp linear infinite;
}

@keyframes driftUp{
    0%{transform:translateY(0);opacity:0.04}
    50%{opacity:0.06}
    100%{transform:translateY(-20vh);opacity:0.03}
}

/* Spread 1: Proclamation */
.proclamation-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(2rem,5vw,5rem);
    letter-spacing:0.02em;
    line-height:1.2;
    color:var(--moonlit-parchment);
    margin-bottom:clamp(24px,4vh,48px);
}

.hangul-hero{
    display:flex;
    gap:clamp(8px,2vw,16px);
}

.hero-char{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:100;
    font-size:clamp(4rem,12vw,14rem);
    line-height:1;
    color:var(--moonlit-parchment);
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.hero-char.visible{
    opacity:1;
    transform:translateY(0);
}

.tagline{
    font-family:'Noto Serif',serif;
    font-size:0.9rem;
    color:var(--dusk-lavender);
    letter-spacing:0.15em;
    align-self:flex-end;
    margin-top:auto;
}

/* Spread 2: Consonants */
.consonant-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.cons-cell{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:clamp(12px,2vw,20px);
    border:1px solid rgba(58,58,92,0.3);
    border-radius:2px;
    position:relative;
    background:var(--hanji-charcoal);
}

.cons-char{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:100;
    font-size:clamp(1.8rem,4vw,3.5rem);
    color:var(--moonlit-parchment);
    line-height:1.2;
}

.cons-code{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.65rem;
    color:var(--dusk-lavender);
    opacity:0.6;
    margin-top:4px;
    letter-spacing:0.02em;
}

/* Section headings */
.section-heading{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.2rem,2vw,2rem);
    letter-spacing:0.02em;
    line-height:1.3;
    margin-bottom:20px;
    color:var(--moonlit-parchment);
}

.body-text{
    color:#C8C8D8;
    margin-bottom:16px;
}

.organ-reference{
    display:flex;
    align-items:center;
    gap:12px;
    margin:8px 0;
}

.organ-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.8rem;
    color:var(--celadon-glow);
    min-width:70px;
}

.organ-arrow{
    color:var(--gutter-violet);
    font-size:0.8rem;
}

.organ-char{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:1.1rem;
    letter-spacing:0.3em;
}

/* Spread 3: Vowels */
.vowel-vertical{
    writing-mode:vertical-rl;
    display:flex;
    gap:clamp(8px,1.5vw,16px);
    justify-content:center;
    height:100%;
    padding:20px 0;
}

.vowel-char{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:100;
    font-size:clamp(2rem,4vw,4rem);
    line-height:1.4;
}

.vowel-v{color:var(--royal-persimmon)}
.vowel-h{color:var(--deep-indigo)}

.cosmic-elements{
    display:flex;
    gap:clamp(20px,3vw,40px);
    margin:24px 0;
}

.cosmic-item{
    text-align:center;
}

.cosmic-symbol{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--celadon-glow);
    display:block;
}

.cosmic-name{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    color:var(--dusk-lavender);
    display:block;
    margin-top:4px;
}

/* Spread 4: Assembly */
.assembly-zone{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100%;
    position:relative;
}

.block-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    width:clamp(140px,20vw,200px);
    height:clamp(140px,20vw,200px);
    border:1px solid var(--gutter-violet);
    margin-bottom:24px;
}

.grid-slot{
    border:1px solid rgba(58,58,92,0.2);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--moonlit-parchment);
}

.slot-initial{grid-column:1;grid-row:1}
.slot-medial{grid-column:2;grid-row:1/3}
.slot-final{grid-column:1;grid-row:2}

.floating-jamo{
    display:flex;
    gap:20px;
    margin-bottom:24px;
}

.float-j{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:100;
    font-size:clamp(2rem,4vw,3.5rem);
    color:var(--celadon-glow);
    opacity:0.8;
    transition:transform 0.8s cubic-bezier(0.175,0.885,0.32,1.275),opacity 0.6s ease;
}

.float-j.placed{
    opacity:0;
    transform:scale(0.5);
}

.assembled-char{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:clamp(4rem,10vw,8rem);
    color:var(--celadon-glow);
    opacity:0;
    transform:scale(0.8);
    transition:opacity 0.8s ease,transform 0.8s cubic-bezier(0.175,0.885,0.32,1.275);
}

.assembled-char.visible{
    opacity:1;
    transform:scale(1);
}

.assembled-full{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,6rem);
    color:var(--moonlit-parchment);
    opacity:0;
    transition:opacity 1s ease 0.5s;
}

.assembled-full.visible{
    opacity:1;
}

.highlight-num{
    color:var(--celadon-glow);
    font-weight:600;
}

.formula{
    background:var(--hanji-charcoal);
    border:1px solid rgba(58,58,92,0.3);
    padding:16px 20px;
    border-radius:4px;
    margin:20px 0;
}

.formula-code{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.85rem;
    color:var(--celadon-glow);
}

/* Spread 5: Living Script */
.poetry-column{
    writing-mode:vertical-rl;
    height:clamp(300px,60vh,500px);
    display:flex;
    gap:clamp(12px,2vw,24px);
    justify-content:center;
    overflow:hidden;
}

.poem-line{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.3vw,1.2rem);
    line-height:2;
    color:var(--moonlit-parchment);
    white-space:nowrap;
}

.stats-compact{
    display:flex;
    flex-wrap:wrap;
    gap:clamp(16px,3vw,32px);
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid rgba(58,58,92,0.3);
}

.stat-compact{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.8rem;
    color:var(--dusk-lavender);
}

.stat-compact strong{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:1.2rem;
    color:var(--celadon-glow);
    margin-right:4px;
}

/* Spread 6: The Name */
.spread-final{
    flex-direction:column;
}

.final-inner{
    text-align:center;
}

.final-korean{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:100;
    font-size:clamp(4rem,14vw,12rem);
    line-height:1;
    color:var(--moonlit-parchment);
    animation:breathe 6s ease-in-out infinite;
}

.final-domain{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(2rem,6vw,5rem);
    letter-spacing:0.02em;
    color:var(--moonlit-parchment);
    margin-top:24px;
    animation:breathe 6s ease-in-out infinite 0.5s;
}

@keyframes breathe{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.005)}
}

/* Reveal system */
.reveal{
    opacity:0;
    transform:translateY(24px);
    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.visible{
    opacity:1;
    transform:translateY(0);
}

/* Responsive */
@media(max-width:768px){
    .spread-inner{flex-direction:column}
    .gutter{width:100%;height:1px;margin:20px 0}
    .page-prose{padding-left:clamp(20px,3vw,40px)}
    .consonant-grid{grid-template-columns:repeat(4,1fr);gap:8px}
    .vowel-vertical{writing-mode:horizontal-tb;flex-wrap:wrap;height:auto}
    .poetry-column{writing-mode:horizontal-tb;height:auto;flex-direction:column}
    .poem-line{white-space:normal}
    .cosmic-elements{flex-wrap:wrap}
    .floating-jamo{flex-wrap:wrap;gap:12px}
}