/* bable.pro - Kinetic Typographic Babel */

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

:root{
    --bone:#FAF8F5;
    --graphite:#1A1A1A;
    --lapis:#1B3A8C;
    --vermillion:#D64933;
    --saffron:#E8A838;
    --indigo:#0D1B3E;
    --stone:#B8B0A4;
    --parchment:#F0EBE3;
}

html{scroll-behavior:smooth}

body{
    background:var(--bone);
    color:var(--graphite);
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.2vw,1.1rem);
    line-height:1.65;
    overflow-x:hidden;
}

/* Progress indicator */
#progress-track{
    position:fixed;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    z-index:50;
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:center;
}

.prog-glyph{
    font-size:0.9rem;
    color:var(--stone);
    transition:color 300ms ease,transform 300ms ease;
    cursor:default;
}

.prog-glyph.active{
    color:var(--lapis);
    transform:scale(1.4);
}

/* Chamber base */
.chamber{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(40px,8vh,100px) clamp(20px,4vw,60px);
    position:relative;
    overflow:hidden;
}

/* Chamber 1: Invocation */
.chamber-invocation{
    flex-direction:column;
    gap:1rem;
}

.hero-letters{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    height:clamp(80px,20vw,200px);
    width:100%;
}

.hero-letter{
    font-family:'Playfair Display',serif;
    font-weight:900;
    font-size:clamp(4rem,14vw,12rem);
    line-height:1;
    color:var(--graphite);
    position:absolute;
    transform:translate(var(--start-x),var(--start-y)) rotate(var(--start-r));
    opacity:0;
    animation:letterConverge 2.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

.hero-letter:nth-child(1){animation-delay:0ms;--end-x:-2.5em}
.hero-letter:nth-child(2){animation-delay:150ms;--end-x:-1.25em}
.hero-letter:nth-child(3){animation-delay:300ms;--end-x:0em}
.hero-letter:nth-child(4){animation-delay:450ms;--end-x:1.25em}
.hero-letter:nth-child(5){animation-delay:600ms;--end-x:2.5em}

@keyframes letterConverge{
    0%{transform:translate(var(--start-x),var(--start-y)) rotate(var(--start-r));opacity:0}
    100%{transform:translate(var(--end-x),0) rotate(0deg);opacity:1}
}

.hero-subtitle{
    font-family:'DM Sans',sans-serif;
    font-weight:300;
    font-size:clamp(1rem,2vw,1.8rem);
    color:var(--stone);
    letter-spacing:0.1em;
    opacity:0;
    animation:fadeIn 0.8s ease 2.8s forwards;
}

@keyframes fadeIn{
    to{opacity:1}
}

/* Chamber 2: Cascade */
.chamber-cascade{
    background:var(--indigo);
    flex-direction:column;
    min-height:150vh;
}

.cascade-field{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.glyph-particle{
    position:absolute;
    color:var(--bone);
    will-change:transform;
    animation:glyphFall linear infinite;
}

@keyframes glyphFall{
    from{transform:translateY(-5vh) translateX(0)}
    to{transform:translateY(110vh) translateX(20px)}
}

.cascade-resolved{
    position:relative;
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    gap:clamp(16px,3vw,40px);
    justify-content:center;
    align-items:center;
    opacity:0;
    transition:opacity 1s ease;
}

.cascade-resolved.visible{
    opacity:1;
}

.resolved-word{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,3rem);
    color:var(--bone);
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
    transition-delay:var(--delay);
}

.cascade-resolved.visible .resolved-word{
    opacity:1;
    transform:translateY(0);
}

/* Chamber 3: Specimen */
.chamber-specimen{
    background:var(--parchment);
}

.specimen-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(24px,4vw,60px);
    width:100%;
    max-width:1100px;
    align-items:center;
}

.specimen-glyph-side{
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.specimen-glyph{
    font-size:clamp(10rem,30vw,28rem);
    color:var(--lapis);
    line-height:1;
    transform:rotate(15deg);
    opacity:0;
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.specimen-glyph.visible{
    opacity:1;
    transform:rotate(15deg) scale(1);
}

.specimen-info-side{
    padding:clamp(20px,3vw,40px);
}

.specimen-codepoint{
    font-family:'Fira Code',monospace;
    font-size:0.8rem;
    letter-spacing:0.05em;
    color:var(--stone);
    margin-bottom:8px;
}

.specimen-script{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1.8rem,3vw,2.5rem);
    color:var(--graphite);
    margin-bottom:8px;
}

.specimen-phonetic{
    font-family:'Fira Code',monospace;
    font-size:0.85rem;
    color:var(--lapis);
    margin-bottom:12px;
}

.specimen-etymology{
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.9rem,1.1vw,1.05rem);
    line-height:1.65;
    color:var(--graphite);
}

/* Chamber 4: Grid */
.chamber-grid{
    background:var(--bone);
    padding:clamp(20px,3vh,40px);
}

.tongue-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:0;
    width:100%;
    max-width:1000px;
}

.tongue-card{
    width:100%;
    aspect-ratio:1;
    perspective:800px;
    cursor:pointer;
}

.tongue-card:hover .card-front{
    transform:rotateY(180deg);
}

.tongue-card:hover .card-back{
    transform:rotateY(0deg);
}

.card-front,.card-back{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    backface-visibility:hidden;
    transition:transform 400ms ease-out;
    padding:8px;
}

.tongue-card{
    position:relative;
}

.card-front{
    background:var(--parchment);
    border:0.5px solid rgba(184,176,164,0.3);
}

.card-back{
    background:var(--vermillion);
    transform:rotateY(-180deg);
}

.card-word{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1rem,1.5vw,1.4rem);
    color:var(--graphite);
    text-align:center;
    line-height:1.2;
}

.card-translation,.card-family{
    font-family:'DM Sans',sans-serif;
    font-weight:300;
    font-size:0.7rem;
    letter-spacing:0.04em;
    margin-top:4px;
}

.card-translation{
    color:var(--stone);
}

.card-script{
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:0.85rem;
    color:var(--bone);
}

.card-family{
    color:rgba(250,248,245,0.7);
}

/* Chamber 5: Wave */
.chamber-wave{
    background:var(--bone);
    overflow:hidden;
}

.wave-scroll-container{
    width:100%;
    overflow:hidden;
}

.wave-text-track{
    display:flex;
    gap:clamp(40px,6vw,80px);
    white-space:nowrap;
    will-change:transform;
    transition:transform 100ms linear;
}

.wave-segment{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(2rem,5vw,5rem);
    letter-spacing:0.02em;
    flex-shrink:0;
}

/* Chamber 6: Silence */
.chamber-silence{
    background:var(--bone);
    flex-direction:column;
    gap:2rem;
}

.silence-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2rem;
}

.proto-glyph{
    width:clamp(80px,15vw,120px);
    height:auto;
}

.proto-path{
    stroke-dasharray:400;
    stroke-dashoffset:400;
    transition:stroke-dashoffset 3s ease-out,fill 1s ease 3s;
}

.proto-path.drawn{
    stroke-dashoffset:0;
    fill:var(--lapis);
}

.silence-caption{
    font-family:'DM Sans',sans-serif;
    font-weight:300;
    font-size:clamp(0.85rem,1vw,1rem);
    color:var(--stone);
    letter-spacing:0.02em;
    opacity:0;
    transition:opacity 1s ease 3.5s;
}

.silence-caption.visible{
    opacity:1;
}

/* Chamber 7: Coda */
.chamber-coda{
    background:var(--bone);
    flex-direction:column;
    gap:2rem;
}

.coda-content{
    text-align:center;
}

.coda-letters{
    display:flex;
    justify-content:center;
    gap:0;
    margin-bottom:2rem;
}

.coda-letter{
    font-family:'Playfair Display',serif;
    font-weight:900;
    font-size:clamp(4rem,10vw,8rem);
    line-height:1;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.4s ease,transform 0.4s ease;
    transition-delay:var(--delay);
}

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

.coda-quote{
    font-family:'DM Sans',sans-serif;
    font-weight:300;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    color:var(--stone);
    letter-spacing:0.01em;
    opacity:0;
    transition:opacity 0.8s ease 1.2s;
}

.coda-quote.visible{
    opacity:1;
}

/* Responsive */
@media(max-width:768px){
    .specimen-split{
        grid-template-columns:1fr;
    }
    .specimen-glyph{
        font-size:40vw;
    }
    #progress-track{
        right:8px;
        gap:8px;
    }
    .prog-glyph{
        font-size:0.7rem;
    }
    .tongue-grid{
        grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
    }
}