/* =====================================================
   tanso.wiki - Carbon Encyclopedia
   Hexagonal honeycomb / Neon-botanical / Scandinavian
   ===================================================== */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #0A0E14;
    --bg-secondary: #141B24;
    --neon-green: #00FFB2;
    --neon-magenta: #FF2D7B;
    --neon-amber: #FFB800;
    --text-primary: #D8E2EC;
    --text-muted: #7B8FA3;
    --hex-lattice: #1E2A38;
    --hex-unit: clamp(60px, 8vw, 120px);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Commissioner', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.72;
    overflow-x: hidden;
}

/* --- Background Hex Lattice Canvas --- */
#hex-lattice {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* --- Hexagonal Shape (clip-path) --- */
.hex {
    position: relative;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.6s ease;
}

.hex::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: -1;
}

/* Hex sizes */
.hex-massive {
    width: min(70vw, 600px);
    height: min(70vw, 600px);
}

.hex-large {
    width: min(50vw, 440px);
    height: min(50vw, 440px);
}

.hex-medium {
    width: min(35vw, 320px);
    height: min(35vw, 320px);
}

.hex-small {
    width: calc(var(--hex-unit) * 1);
    height: calc(var(--hex-unit) * 1);
}

/* --- Neon Glow Effects --- */
@keyframes neonPulse {
    0% { filter: drop-shadow(0 0 8px var(--glow-color)) brightness(1); }
    100% { filter: drop-shadow(0 0 20px var(--glow-color)) brightness(1.1); }
}

.green-accent {
    --glow-color: #00FFB2;
    box-shadow: 0 0 8px #00FFB240, 0 0 20px #00FFB226;
    animation: neonPulse 4s ease-in-out infinite alternate;
}

.amber-accent {
    --glow-color: #FFB800;
    box-shadow: 0 0 8px #FFB80040, 0 0 20px #FFB80026;
    animation: neonPulse 4s ease-in-out infinite alternate;
}

.magenta-accent {
    --glow-color: #FF2D7B;
    box-shadow: 0 0 8px #FF2D7B40, 0 0 20px #FF2D7B26;
    animation: neonPulse 4s ease-in-out infinite alternate;
}

.all-glow {
    box-shadow: 0 0 8px #00FFB230, 0 0 12px #FF2D7B25, 0 0 16px #FFB80020;
    animation: allNeonPulse 4s ease-in-out infinite alternate;
}

@keyframes allNeonPulse {
    0% { filter: drop-shadow(0 0 6px #00FFB2) brightness(1); }
    33% { filter: drop-shadow(0 0 10px #FF2D7B) brightness(1.05); }
    66% { filter: drop-shadow(0 0 10px #FFB800) brightness(1.05); }
    100% { filter: drop-shadow(0 0 14px #00FFB2) brightness(1.1); }
}

/* --- Typography --- */
h1, h2 {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.site-title {
    font-size: clamp(2rem, 6vw, 4.5rem);
    color: var(--text-primary);
    text-shadow: 0 0 30px #00FFB240, 0 0 60px #00FFB220;
    position: relative;
    z-index: 2;
}

.site-subtitle {
    font-family: 'Commissioner', sans-serif;
    font-weight: 300;
    font-size: clamp(0.85rem, 1.4vw, 1.1rem);
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-top: 0.5em;
    max-width: 38ch;
    position: relative;
    z-index: 2;
}

.layer-title {
    font-size: clamp(1.5rem, 4vw, 3rem);
    margin-bottom: 0.3em;
}

.layer-description {
    font-weight: 400;
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    color: var(--text-muted);
    max-width: 38ch;
    line-height: 1.6;
}

.data-label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    color: var(--neon-green);
    margin-bottom: 0.4em;
}

.mono-accent {
    font-family: 'IBM Plex Mono', monospace;
    color: var(--neon-green);
}

.hex-text {
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    color: var(--text-muted);
    max-width: 28ch;
    line-height: 1.55;
}

.annotation {
    font-family: 'Commissioner', sans-serif;
    font-weight: 300;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.illustration-caption {
    font-family: 'Commissioner', sans-serif;
    font-weight: 300;
    font-size: clamp(0.6rem, 0.75vw, 0.75rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.5em;
    opacity: 0.7;
}

/* --- Layers (Sections) --- */
.layer {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vh 4vw;
}

.layer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vh;
    max-width: 900px;
    width: 100%;
}

/* --- Layer 0: Stellar Origin --- */
.stellar-origin {
    min-height: 100vh;
}

.stellar-origin .hex-cluster {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-hex {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px #00FFB215, 0 0 60px #00FFB20D;
}

.hero-hex .hex-content {
    position: relative;
    z-index: 2;
    padding: 2em;
}

#starfield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Orbiting hexes */
.orbit-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.orbit-hex {
    position: absolute;
    width: calc(var(--hex-unit) * 0.9);
    height: calc(var(--hex-unit) * 0.9);
    pointer-events: auto;
    cursor: default;
    background: var(--bg-secondary);
    box-shadow: 0 0 10px #00FFB220;
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.8s ease;
}

.orbit-hex:hover {
    filter: brightness(1.5);
}

.orbit-hex[data-orbit="0"] { top: -10%; left: 50%; transform: translateX(-50%); }
.orbit-hex[data-orbit="1"] { top: 15%; right: -12%; }
.orbit-hex[data-orbit="2"] { bottom: 15%; right: -12%; }
.orbit-hex[data-orbit="3"] { bottom: -10%; left: 50%; transform: translateX(-50%); }
.orbit-hex[data-orbit="4"] { bottom: 15%; left: -12%; }
.orbit-hex[data-orbit="5"] { top: 15%; left: -12%; }

.orbit-symbol {
    font-size: clamp(1rem, 2vw, 1.6rem);
    color: var(--neon-green);
    display: block;
}

.orbit-label {
    font-size: clamp(0.5rem, 0.7vw, 0.65rem);
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 0.2em;
}

.orbit-icon {
    width: 36px;
    height: 36px;
}

.orbit-icon.leaf-icon {
    width: 32px;
    height: 32px;
}

/* Decorative hexes */
.deco-hex {
    position: absolute;
    width: 60px;
    height: 60px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    opacity: 0.3;
    transition: opacity 0.4s ease, filter 0.4s ease;
    z-index: 0;
}

.deco-hex:hover {
    opacity: 0.5;
    filter: brightness(1.5);
}

.deco-1 { top: 10%; left: 8%; }
.deco-2 { top: 20%; right: 10%; }
.deco-3 { bottom: 15%; left: 15%; }

/* --- Hex Rows (content grid) --- */
.hex-row {
    display: flex;
    gap: 2vw;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.hex-row.offset-row {
    margin-top: -3vh;
}

.hex-content {
    padding: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.info-hex {
    cursor: default;
}

.info-hex:hover {
    filter: brightness(1.15);
}

/* --- Illustration hexes --- */
.illustration-hex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1em;
}

.botanical-svg {
    width: 80%;
    height: auto;
    max-height: 70%;
}

/* --- Dense hex cluster (photosynthesis) --- */
.dense-hex-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    max-width: 500px;
    margin: 1vh 0;
}

.cluster-hex {
    opacity: 0.4;
    transition: opacity 0.6s ease;
}

.cluster-hex.visible {
    opacity: 1;
}

/* --- Benzene hex --- */
.benzene-hex {
    margin-top: 1vh;
}

.benzene-ring {
    width: 80px;
    height: 80px;
}

.benzene-hex .caption {
    margin-top: 0.5em;
}

/* --- Closing hex (Layer 4) --- */
.closing-hex {
    margin-top: 4vh;
    box-shadow: 0 0 30px #00FFB220, 0 0 40px #FF2D7B15, 0 0 50px #FFB80010;
}

.closing-text {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 3rem);
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-shadow: 0 0 20px #00FFB230, 0 0 40px #FF2D7B20;
}

.cycle-symbol {
    width: 60px;
    height: 60px;
    margin-top: 1em;
}

/* --- Rosettes --- */
.rosette {
    position: absolute;
    width: 40px;
    height: 40px;
    opacity: 0.5;
    pointer-events: none;
}

.rosette-1 { bottom: 40%; left: 15%; }
.rosette-2 { bottom: 30%; right: 20%; }

/* --- Flowing Curves (SVG) --- */
.flowing-curve {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    pointer-events: none;
    z-index: 0;
}

.flow-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.flow-path.animate {
    animation: drawCurve 3s ease-in-out forwards, curvePulse 4s 3s ease-in-out infinite alternate;
}

.flow-path.delay-1.animate {
    animation-delay: 0.5s;
}

.flow-path.delay-2.animate {
    animation-delay: 1s;
}

.flow-path.fast.animate {
    animation: drawCurveFast 2s ease-in-out forwards, curvePulse 3s 2s ease-in-out infinite alternate;
}

@keyframes drawCurve {
    0% { stroke-dashoffset: 2000; opacity: 0.4; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes drawCurveFast {
    0% { stroke-dashoffset: 2000; opacity: 0.4; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes curvePulse {
    0% { opacity: 0.4; }
    100% { opacity: 0.8; }
}

/* --- Floating Hexagonal Compass (Nav) --- */
#hex-compass {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    width: 120px;
    height: 120px;
}

.compass-hex {
    position: absolute;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.compass-hex:hover {
    filter: brightness(1.4);
}

.compass-center {
    width: 44px;
    height: 44px;
    background: var(--bg-secondary);
    box-shadow: 0 0 12px #FFB80040;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.compass-center:hover {
    transform: translate(-50%, -50%) rotate(30deg);
}

.compass-center .compass-label {
    font-size: 0.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neon-amber);
}

.compass-orbit {
    width: 28px;
    height: 28px;
    background: var(--bg-secondary);
    box-shadow: 0 0 6px #00FFB230;
    z-index: 1;
}

.compass-orbit .compass-label {
    font-size: 0.35rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.compass-orbit.active .compass-label {
    color: var(--neon-green);
}

.compass-orbit.active {
    box-shadow: 0 0 10px #00FFB260;
}

/* Position orbit hexes around center */
.compass-orbit[data-layer="0"] { top: 2px; left: 50%; transform: translateX(-50%); }
.compass-orbit[data-layer="1"] { top: 18px; right: 4px; }
.compass-orbit[data-layer="2"] { bottom: 18px; right: 4px; }
.compass-orbit[data-layer="3"] { bottom: 2px; left: 50%; transform: translateX(-50%); }
.compass-orbit[data-layer="4"] { bottom: 18px; left: 4px; }
.compass-orbit[data-layer="5"] { top: 18px; left: 4px; }

/* --- Fade-reveal animation for layers --- */
.layer .hex {
    opacity: 0;
    transform: translateY(30px);
}

.layer .hex.revealed {
    opacity: 1;
    transform: translateY(0);
}

.layer .layer-title-hex.revealed {
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.layer .info-hex.revealed {
    transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.15s;
}

.layer .illustration-hex.revealed {
    transition: opacity 0.8s ease 0.25s, transform 0.8s ease 0.25s;
}

.layer .benzene-hex.revealed {
    transition: opacity 0.8s ease 0.35s, transform 0.8s ease 0.35s;
}

.layer .closing-hex.revealed {
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

/* Hero hex always visible */
.stellar-origin .hero-hex {
    opacity: 1;
    transform: translateY(0);
}

/* Orbit hexes start visible then drift on scroll */
.orbit-hex {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.orbit-hex.drifted {
    opacity: 0;
}

.orbit-hex.drifted[data-orbit="0"] { transform: translateY(-60px) translateX(-50%); }
.orbit-hex.drifted[data-orbit="1"] { transform: translate(60px, -30px); }
.orbit-hex.drifted[data-orbit="2"] { transform: translate(60px, 30px); }
.orbit-hex.drifted[data-orbit="3"] { transform: translateY(60px) translateX(-50%); }
.orbit-hex.drifted[data-orbit="4"] { transform: translate(-60px, 30px); }
.orbit-hex.drifted[data-orbit="5"] { transform: translate(-60px, -30px); }

/* --- Layer-specific background color shifts --- */
.stellar-origin { background: linear-gradient(180deg, var(--bg-primary) 0%, #0C1018 100%); }
.atmospheric-carbon { background: linear-gradient(180deg, #0C1018 0%, #11171F 100%); }
.photosynthesis { background: linear-gradient(180deg, #11171F 0%, #0E1620 100%); }
.organic-matter { background: linear-gradient(180deg, #0E1620 0%, #121A22 100%); }
.return-layer { background: linear-gradient(180deg, #121A22 0%, #0F1319 50%, var(--bg-primary) 100%); }

/* --- Responsive --- */
@media (max-width: 640px) {
    .hex-massive {
        width: 85vw;
        height: 85vw;
    }

    .hex-large {
        width: 80vw;
        height: 80vw;
    }

    .hex-medium {
        width: 70vw;
        height: 70vw;
    }

    .hex-row {
        flex-direction: column;
        gap: 3vh;
    }

    .hex-row.offset-row {
        margin-top: 0;
    }

    .orbit-hex {
        width: calc(var(--hex-unit) * 0.7);
        height: calc(var(--hex-unit) * 0.7);
    }

    #hex-compass {
        bottom: 1rem;
        right: 1rem;
        width: 90px;
        height: 90px;
    }

    .compass-center {
        width: 34px;
        height: 34px;
    }

    .compass-orbit {
        width: 22px;
        height: 22px;
    }
}