/* telomere.digital - Generative-art biodigital canvas */
/* Palette: #0A0A14 #12121E #1A1A2E #2A7F9F #4A9EBF #6A6A7A #7FDBDA #9B7FDB #C77DBA #C97B4B #D4A574 #E0E0E0 #E8F4F8 */

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

html {
    overflow-x: hidden;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0A0A14;
    color: #E0E0E0;
    overflow-x: hidden;
}

/* === Canvas === */
#telomere-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* === Domain Label === */
#domain-label {
    position: fixed;
    top: 2rem;
    left: 2rem;
    font-family: 'Syne', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #E0E0E0;
    opacity: 0;
    z-index: 10;
    animation: label-fade 2s ease 0.5s forwards;
}

@keyframes label-fade {
    to { opacity: 0.4; }
}

/* === Scroll Container === */
#scroll-container {
    position: relative;
    z-index: 5;
    pointer-events: none;
}

/* === Scroll Zones === */
.scroll-zone {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 2rem;
}

/* === Floating Text === */
.floating-text {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
    pointer-events: auto;
}

.floating-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.text-fragment {
    font-family: 'Syne', sans-serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    display: block;
    margin-bottom: 0.5rem;
    letter-spacing: 0.08em;
}

.text-sub {
    font-family: 'Syne', sans-serif;
    font-weight: 300;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    display: block;
    opacity: 0.6;
    letter-spacing: 0.05em;
}

/* Color variations per zone */
.text-genesis .text-fragment { color: #7FDBDA; }
.text-genesis .text-sub { color: #E8F4F8; }

.text-erosion .text-fragment { color: #C97B4B; }
.text-erosion .text-sub { color: #D4A574; }

.text-silence .text-fragment { color: #6A6A7A; }
.text-silence .text-sub { color: #6A6A7A; }

.text-bloom .text-fragment { color: #C77DBA; }
.text-bloom .text-sub { color: #9B7FDB; }

.text-coda .text-fragment { color: #E0E0E0; }
.text-coda .text-sub {
    color: #6A6A7A;
    font-family: 'Space Grotesk', monospace;
    letter-spacing: 0.2em;
}

/* === Coda Footer === */
.coda-footer {
    position: absolute;
    bottom: 3rem;
    text-align: center;
    pointer-events: auto;
}

.coda-domain {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #E0E0E0;
    display: block;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}

.coda-note {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.8rem;
    color: #4A9EBF;
    display: block;
    letter-spacing: 0.05em;
}

.text-erosion .text-sub {
    text-shadow: 0 0 12px #2A7F9F;
}

/* === Background phase colors (applied via JS to body) === */
body.phase-genesis { background-color: #0A0A14; }
body.phase-erosion { background-color: #12121E; }
body.phase-silence { background-color: #0A0A14; }
body.phase-bloom { background-color: #1A1A2E; }
body.phase-coda { background-color: #0A0A14; }

/* === Responsive === */
@media (max-width: 600px) {
    #domain-label {
        top: 1rem;
        left: 1rem;
    }

    .scroll-zone {
        padding: 1.5rem;
    }
}