/* hangeul.day - Calligraphic Reverence & Kinetic Modernism */

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

:root{
    --hanji-white:#F5F0E8;
    --meok-black:#1A1814;
    --dancheong-vermilion:#C23616;
    --celadon-mist:#7BA7A0;
    --jegi-gold:#B8962E;
    --giwa-charcoal:#2B2926;
    --hanbok-indigo:#3D5A80;
    --cheongja-jade:#4A8C7F;
}

html{scroll-behavior:smooth}

body{
    background:var(--hanji-white);
    color:var(--meok-black);
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:1rem;
    line-height:1.6;
    letter-spacing:0.02em;
    overflow-x:hidden;
}

/* Hanji paper texture */
body::before{
    content:'';
    position:fixed;inset:0;
    pointer-events:none;
    opacity:0.03;
    background:repeating-conic-gradient(var(--meok-black) 0% 25%,transparent 0% 50%) 0 0/4px 4px;
    z-index:0;
}

.scroll-container{
    scroll-snap-type:y mandatory;
    overflow-y:auto;
    height:100vh;
}

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

/* Split layout */
.split-layout{
    display:flex;
    width:100%;
    max-width:1200px;
    gap:clamp(24px,4vw,64px);
}

.demo-column{
    width:60%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.annotation-column{
    width:40%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    font-size:clamp(0.875rem,1.1vw,1rem);
    color:var(--meok-black);
    line-height:1.65;
}

.annotation-column p{margin-bottom:16px}

.section-label{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:1rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--hanbok-indigo);
    margin-bottom:32px;
}

/* Section 0: Premise */
.slide-premise{
    background:var(--giwa-charcoal);
    flex-direction:column;
    gap:24px;
}

.premise-jamo{
    display:flex;
    gap:clamp(16px,3vw,40px);
    justify-content:center;
}

.jamo{
    font-family:'Noto Serif KR',serif;
    font-weight:900;
    font-size:clamp(4rem,12vw,10rem);
    color:var(--hanji-white);
    opacity:0;
    transition:opacity 0.5s ease,transform 0.8s cubic-bezier(0.34,1.56,0.64,1);
}

.jamo.visible{opacity:1}

.premise-assembled{
    font-family:'Noto Serif KR',serif;
    font-weight:900;
    font-size:clamp(5rem,14vw,12rem);
    color:var(--hanji-white);
    opacity:0;
    transition:opacity 0.8s ease;
    text-align:center;
}

.premise-assembled.visible{opacity:1}

.premise-subtitle{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:clamp(0.875rem,1.2vw,1.1rem);
    color:var(--celadon-mist);
    text-align:center;
    opacity:0;
    transition:opacity 1s ease;
    letter-spacing:0.02em;
}

.premise-subtitle.visible{opacity:1}

.vermilion-seal{display:inline-block}

.seal-corner{
    position:absolute;
    bottom:40px;right:40px;
}

/* Section 1: Philosophy */
.slide-philosophy{
    background:var(--hanji-white);
}

.philosophy-quote{
    border:none;
    padding:0;
}

.quote-line{
    font-family:'Gowun Batang',serif;
    font-weight:400;
    font-size:clamp(1.125rem,2vw,1.5rem);
    line-height:2;
    color:var(--meok-black);
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.quote-line.visible{opacity:1;transform:translateY(0)}

.anno-text{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:0.875rem;
    color:var(--hanbok-indigo);
    opacity:0;
    transition:opacity 0.5s ease;
    line-height:1.8;
}

.anno-text.visible{opacity:1}

.anno-source{
    font-family:'Gowun Batang',serif;
    font-style:italic;
    font-size:0.85rem;
    color:var(--celadon-mist);
    margin-top:16px;
}

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

.vowel-grid{
    grid-template-columns:repeat(5,1fr);
}

.jamo-cell{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:12px 8px;
    border:1px solid rgba(123,167,160,0.15);
    border-radius:2px;
    opacity:0;
    transform:scale(0.8);
    transition:opacity 0.4s ease,transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.jamo-cell.visible{opacity:1;transform:scale(1)}

.jamo-cell span{
    font-family:'Noto Serif KR',serif;
    font-weight:900;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--meok-black);
}

.jamo-cell small{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:0.65rem;
    color:var(--celadon-mist);
    letter-spacing:0.04em;
    margin-top:4px;
}

/* Section 3: Vowels */
.vowel-primitives{
    display:flex;
    gap:clamp(24px,4vw,60px);
    justify-content:center;
    margin-bottom:40px;
}

.primitive{
    text-align:center;
}

.primitive span{
    font-family:'Noto Serif KR',serif;
    font-weight:900;
    font-size:clamp(2rem,4vw,3.5rem);
    color:var(--dancheong-vermilion);
    display:block;
}

.primitive small{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:0.75rem;
    color:var(--celadon-mist);
}

/* Section 4: Block Assembly */
.assembly-demo{
    display:flex;
    align-items:center;
    gap:clamp(24px,4vw,60px);
    justify-content:center;
    margin-bottom:32px;
}

.block-frame{
    width:180px;height:180px;
    border:2px solid var(--celadon-mist);
    border-radius:4px;
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
}

.block-slot{
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Noto Serif KR',serif;
    font-weight:900;
    font-size:2rem;
    color:var(--meok-black);
    transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1),opacity 0.4s;
}

.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}

.assembly-result{
    font-family:'Noto Serif KR',serif;
    font-weight:900;
    font-size:clamp(4rem,8vw,8rem);
    color:var(--meok-black);
}

.assembly-examples{
    display:flex;
    gap:12px;
    justify-content:center;
}

.example-btn{
    font-family:'Noto Serif KR',serif;
    font-weight:400;
    font-size:1.2rem;
    background:none;
    border:1px solid var(--celadon-mist);
    color:var(--meok-black);
    padding:8px 16px;
    cursor:pointer;
    border-radius:2px;
    transition:background 0.3s,color 0.3s,border-color 0.3s;
}

.example-btn:hover{
    background:var(--cheongja-jade);
    color:var(--hanji-white);
    border-color:var(--cheongja-jade);
}

/* Section 5: Evolution */
.slide-evolution{
    background:var(--hanji-white);
}

.timeline-vert{
    display:flex;
    flex-direction:column;
    gap:24px;
    border-left:2px solid var(--celadon-mist);
    padding-left:24px;
}

.timeline-node{
    position:relative;
}

.timeline-node::before{
    content:'';
    position:absolute;
    left:-30px;top:8px;
    width:12px;height:12px;
    border-radius:50%;
    background:var(--dancheong-vermilion);
}

.tl-year{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:0.85rem;
    color:var(--jegi-gold);
    letter-spacing:0.06em;
    display:block;
}

.tl-event{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:0.8rem;
    color:var(--meok-black);
    line-height:1.5;
}

/* Section 6: Living Script */
.slide-living{
    background:var(--giwa-charcoal);
    flex-direction:column;
}

.word-cascade{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:clamp(16px,3vw,32px);
    max-width:800px;
    margin-bottom:60px;
}

.cascade-word{
    font-family:'Noto Serif KR',serif;
    font-weight:900;
    color:var(--hanji-white);
    transform:translateY(20px);
    transition:transform 1s ease,opacity 1s ease;
}

.cascade-word.risen{
    transform:translateY(0);
}

.living-footer{
    text-align:center;
}

.living-tagline{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    color:var(--celadon-mist);
    margin-bottom:24px;
    letter-spacing:0.04em;
}

/* Responsive */
@media(max-width:768px){
    .split-layout{flex-direction:column}
    .demo-column,.annotation-column{width:100%}
    .consonant-grid{grid-template-columns:repeat(4,1fr)}
    .vowel-grid{grid-template-columns:repeat(5,1fr)}
    .assembly-demo{flex-direction:column}
    .premise-jamo{gap:8px}
}