/* hangul.dev - Developer Portal for Korean Writing System */

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

:root{
    --ink-night:#0E1117;
    --warm-slate:#1C1F26;
    --deep-graphite:#252830;
    --warm-white:#F0EDE6;
    --soft-bone:#B8B2A6;
    --celadon-jade:#5BA88C;
    --amber-signal:#E8A44A;
    --hanji-cream:#D4C9B0;
    --cinnabar-red:#C94432;
}

html{scroll-behavior:smooth}

body{
    background:var(--ink-night);
    color:var(--warm-white);
    font-family:'Source Sans 3',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.1vw,1.15rem);
    line-height:1.7;
    letter-spacing:0.005em;
    overflow-x:hidden;
}

/* Jamo Particles */
.jamo-particles{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
}

.particle{
    position:absolute;
    bottom:-10%;
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    color:var(--warm-white);
    opacity:0.05;
    animation:drift linear infinite;
}

@keyframes drift{
    0%{transform:translateY(0);opacity:0.04}
    10%{opacity:0.06}
    90%{opacity:0.06}
    100%{transform:translateY(-120vh);opacity:0.04}
}

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

/* HEAVEN */
.section-heaven{
    background:var(--ink-night);
}

.heaven-dot{
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--celadon-jade);
    box-shadow:0 0 20px rgba(91,168,140,0.3),0 0 60px rgba(91,168,140,0.1);
    animation:pulse 4s ease-in-out infinite;
    margin-bottom:40px;
}

@keyframes pulse{
    0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(91,168,140,0.3),0 0 60px rgba(91,168,140,0.1)}
    50%{transform:scale(1.15);box-shadow:0 0 30px rgba(91,168,140,0.5),0 0 80px rgba(91,168,140,0.15)}
}

.hero-title{
    font-family:'Jost',sans-serif;
    font-weight:600;
    font-size:clamp(3.5rem,10vw,8rem);
    letter-spacing:0.02em;
    line-height:1.15;
    text-align:center;
    color:var(--warm-white);
}

.letter{
    display:inline-block;
    opacity:0;
    transform:translateY(-8px);
    transition:opacity 0.4s ease,transform 0.4s ease;
}

.letter.visible{
    opacity:1;
    transform:translateY(0);
}

.dot-letter.visible{
    color:var(--celadon-jade);
}

.hero-sub{
    font-family:'Source Sans 3',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.5vw,1.25rem);
    color:var(--soft-bone);
    margin-top:20px;
    text-align:center;
    letter-spacing:0.01em;
}

/* Transition zones */
.transition-zone{
    height:200px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
    background:var(--ink-night);
}

.morph-element{
    background:var(--hanji-cream);
    opacity:0.3;
}

.morph-dot-to-line{
    width:14px;
    height:14px;
    border-radius:50%;
    transition:width 1.5s cubic-bezier(0.25,0.46,0.45,0.94),
               height 1.5s cubic-bezier(0.25,0.46,0.45,0.94),
               border-radius 1.5s cubic-bezier(0.25,0.46,0.45,0.94);
}

.morph-dot-to-line.morphed{
    width:80%;
    height:1px;
    border-radius:0;
}

.morph-line-to-vert{
    width:80%;
    height:1px;
    border-radius:0;
    transition:width 1.5s cubic-bezier(0.25,0.46,0.45,0.94),
               height 1.5s cubic-bezier(0.25,0.46,0.45,0.94);
}

.morph-line-to-vert.morphed{
    width:2px;
    height:100px;
}

/* EARTH */
.section-earth{
    background:var(--warm-slate);
    min-height:auto;
    padding-top:clamp(60px,10vh,120px);
    padding-bottom:clamp(60px,10vh,120px);
}

.earth-rule{
    width:100%;
    height:1px;
    background:var(--hanji-cream);
    opacity:0.3;
}

.content-container{
    max-width:920px;
    width:100%;
    padding:clamp(40px,6vh,80px) 0;
}

.two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(24px,4vw,64px);
    align-items:start;
}

.section-header{
    font-family:'Jost',sans-serif;
    font-weight:600;
    font-size:clamp(1.8rem,4vw,3rem);
    line-height:1.3;
    letter-spacing:0.02em;
    margin-bottom:20px;
    color:var(--warm-white);
}

.body-text{
    color:var(--warm-white);
    margin-bottom:16px;
    line-height:1.7;
}

.divider-line{
    width:100%;
    height:1px;
    background:var(--hanji-cream);
    opacity:0.15;
    margin:clamp(40px,6vh,80px) 0;
}

/* Code block */
.code-block{
    background:var(--deep-graphite);
    border-radius:6px;
    overflow:hidden;
    border:1px solid rgba(212,201,176,0.1);
}

.code-header{
    padding:10px 16px;
    border-bottom:1px solid rgba(212,201,176,0.08);
}

.code-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    color:var(--soft-bone);
    letter-spacing:0.04em;
    text-transform:uppercase;
}

.code-body{
    padding:16px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.85rem;
    line-height:1.65;
    color:var(--warm-white);
    overflow-x:auto;
}

.code-comment{color:var(--soft-bone);opacity:0.6}
.code-keyword{color:var(--celadon-jade)}
.code-num{color:var(--amber-signal)}
.code-hex{color:var(--amber-signal);font-weight:400}

.inline-code{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.9em;
    background:rgba(232,164,74,0.1);
    padding:0.1em 0.35em;
    border-radius:3px;
    color:var(--amber-signal);
}

/* Consonant grid */
.consonant-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}

.consonant-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:16px 8px;
    border:1px solid rgba(212,201,176,0.1);
    border-radius:4px;
    background:var(--deep-graphite);
}

.consonant-char{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:clamp(1.8rem,3vw,2.5rem);
    color:var(--warm-white);
}

.consonant-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.65rem;
    color:var(--celadon-jade);
    margin-top:6px;
    letter-spacing:0.02em;
}

/* Vowel elements */
.vowel-elements{
    display:flex;
    gap:clamp(24px,4vw,60px);
    justify-content:center;
    padding:24px 0;
}

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

.element-symbol{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:clamp(2rem,4vw,3.5rem);
    color:var(--celadon-jade);
    display:block;
}

.element-name{
    font-family:'Source Sans 3',sans-serif;
    font-weight:400;
    font-size:0.8rem;
    color:var(--soft-bone);
    margin-top:6px;
    display:block;
}

/* HUMANITY */
.section-humanity{
    background:var(--ink-night);
    min-height:auto;
    padding-top:clamp(60px,10vh,120px);
    padding-bottom:clamp(80px,12vh,160px);
    position:relative;
}

.vert-accent{
    position:absolute;
    left:clamp(20px,4vw,60px);
    top:10%;
    width:2px;
    height:80%;
    background:var(--celadon-jade);
    opacity:0.12;
}

.humanity-container{
    max-width:640px;
    width:100%;
}

.cultural-quote{
    padding:24px 0 24px 24px;
    border-left:2px solid var(--celadon-jade);
    margin:32px 0 16px;
}

.cultural-quote p{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:clamp(1.1rem,2vw,1.4rem);
    line-height:1.8;
    letter-spacing:0.02em;
    color:var(--warm-white);
}

.quote-translation{
    font-family:'Source Sans 3',sans-serif;
    font-style:italic;
    font-size:0.95rem;
    color:var(--soft-bone);
    margin-bottom:4px;
}

.quote-source{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.8rem;
    color:var(--celadon-jade);
    margin-bottom:32px;
}

/* Stats */
.stats-row{
    display:flex;
    gap:clamp(24px,4vw,60px);
    margin:40px 0;
    padding:32px 0;
    border-top:1px solid rgba(212,201,176,0.12);
    border-bottom:1px solid rgba(212,201,176,0.12);
}

.stat{
    display:flex;
    flex-direction:column;
}

.stat-number{
    font-family:'Jost',sans-serif;
    font-weight:600;
    font-size:clamp(2rem,4vw,3rem);
    color:var(--amber-signal);
    line-height:1.2;
}

.stat-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    color:var(--soft-bone);
    letter-spacing:0.02em;
    margin-top:4px;
}

.closing-text{
    color:var(--soft-bone);
    font-style:italic;
}

/* Syllable grid overlay (background texture) */
.section-earth::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        repeating-linear-gradient(90deg,rgba(212,201,176,0.03) 0,rgba(212,201,176,0.03) 1px,transparent 1px,transparent 33.33%),
        repeating-linear-gradient(0deg,rgba(212,201,176,0.03) 0,rgba(212,201,176,0.03) 1px,transparent 1px,transparent 33.33%);
    background-size:300px 300px;
    pointer-events:none;
    animation:gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse{
    0%,100%{opacity:0.5}
    50%{opacity:1}
}

/* Reveal animations */
.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){
    .two-col{grid-template-columns:1fr}
    .consonant-grid{grid-template-columns:repeat(5,1fr);gap:8px}
    .stats-row{flex-direction:column;gap:20px}
    .vert-accent{display:none}
    .particle:nth-child(n+5){display:none}
}