/* === CUSTOM PROPERTIES === */
:root {
    --verdigris: #2e8b82;
    --burnt-sienna: #d4763c;
    --amethyst: #5b3d7a;
    --carbon-black: #1a2a3a;
    --bone-white: #f0ece4;
    --bleached-bone: #e8f0ee;
    --faded-verdigris: #a8c4be;
    --sandstone: #e8c9a0;
    --text-dark: #3a3a3a;
    --hud-accent: #2e8b82;
    --hud-bg: rgba(26, 42, 58, 0.85);
    --hud-size: 60px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Source Serif 4', serif;
    font-weight: 400;
    color: var(--text-dark);
    background: var(--bone-white);
    overflow-x: hidden;
}

/* === HUD FRAME === */
#hud-frame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    pointer-events: none;
}

#hud-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--hud-size);
    background: var(--hud-bg);
    border-bottom: 1px solid var(--hud-accent);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.ticker-track {
    display: flex;
    white-space: nowrap;
    animation: ticker-scroll 40s linear infinite;
}

.ticker-content {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--hud-accent);
    opacity: 0.8;
    text-transform: uppercase;
    padding: 0 20px;
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

#hud-right {
    position: absolute;
    top: var(--hud-size);
    right: 0;
    bottom: var(--hud-size);
    width: var(--hud-size);
    background: var(--hud-bg);
    border-left: 1px solid var(--hud-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-track {
    position: relative;
    width: 8px;
    height: 80%;
    background: rgba(46, 139, 130, 0.15);
    border-radius: 4px;
}

.progress-track .tick {
    position: absolute;
    left: -4px;
    width: 16px;
    height: 1px;
    background: var(--hud-accent);
    opacity: 0.4;
}

#progress-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--hud-accent);
    border-radius: 4px;
    transition: height 0.3s ease, background-color 2s ease;
}

#hud-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--hud-size);
    background: var(--hud-bg);
    border-top: 1px solid var(--hud-accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 80px;
}

#section-label {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.15em;
    color: var(--hud-accent);
    text-transform: uppercase;
    transition: color 2s ease;
}

.hud-coord {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--faded-verdigris);
    opacity: 0.6;
}

#hud-left {
    position: absolute;
    top: var(--hud-size);
    left: 0;
    bottom: var(--hud-size);
    width: var(--hud-size);
    background: var(--hud-bg);
    border-right: 1px solid var(--hud-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.hex-nav {
    width: 24px;
    height: 24px;
    cursor: pointer;
    pointer-events: all;
    transition: transform 0.3s ease;
}

.hex-nav polygon {
    fill: none;
    stroke: var(--faded-verdigris);
    stroke-width: 1.5;
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.hex-nav.active polygon {
    fill: var(--hud-accent);
    stroke: var(--hud-accent);
}

.hex-nav:hover {
    transform: scale(1.2);
    animation: hex-pulse 1s ease infinite;
}

@keyframes hex-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* === SECTIONS === */
.full-section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.watercolor-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.section-content {
    position: relative;
    z-index: 1;
    padding: var(--hud-size);
}

/* === SECTION 1: ATMOSPHERE === */
#section-atmosphere {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.atmosphere-wash {
    background: var(--bone-white);
}

.atmosphere-wash::before {
    content: '';
    position: absolute;
    inset: -100px;
    background:
        radial-gradient(ellipse 80% 60% at 30% 40%, rgba(168, 196, 190, 0.6) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 70% 60%, rgba(91, 61, 122, 0.25) 0%, transparent 65%),
        radial-gradient(ellipse 90% 50% at 50% 30%, rgba(46, 139, 130, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse 40% 70% at 20% 70%, rgba(168, 196, 190, 0.4) 0%, transparent 55%),
        radial-gradient(ellipse 70% 40% at 80% 20%, rgba(91, 61, 122, 0.15) 0%, transparent 50%);
    filter: blur(60px);
    z-index: 0;
}

.atmosphere-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
}

.hero-title {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: clamp(5rem, 12vw, 10rem);
    color: var(--carbon-black);
    letter-spacing: 0.08em;
    text-shadow:
        2px 2px 8px rgba(46, 139, 130, 0.3),
        -1px -1px 6px rgba(180, 95, 60, 0.2),
        0 0 40px rgba(168, 196, 190, 0.3);
    line-height: 1;
    margin-bottom: 0.3em;
}

.hero-subtitle {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(1rem, 2vw, 1.5rem);
    letter-spacing: 0.2em;
    color: var(--verdigris);
    text-transform: uppercase;
    animation: shake 0.3s ease 1s 1 forwards;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* === SECTION 2: THE CYCLE (TRIPTYCH) === */
#section-cycle {
    height: 200vh;
}

.triptych {
    display: flex;
    height: 100%;
    position: relative;
}

.triptych-panel {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.triptych-divider {
    width: 2px;
    background: var(--verdigris);
    flex-shrink: 0;
    z-index: 2;
}

/* Emission panel - warm reds/oranges bleeding upward */
.emission-wash {
    background: var(--bone-white);
}
.emission-wash::before {
    content: '';
    position: absolute;
    inset: -80px;
    background:
        radial-gradient(ellipse 100% 80% at 50% 80%, rgba(212, 118, 60, 0.5) 0%, transparent 60%),
        radial-gradient(ellipse 60% 100% at 30% 60%, rgba(232, 201, 160, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 70% 40%, rgba(212, 118, 60, 0.3) 0%, transparent 55%),
        radial-gradient(ellipse 50% 80% at 50% 20%, rgba(240, 236, 228, 0.8) 0%, transparent 60%);
    filter: blur(50px);
}

/* Absorption panel - cool greens/teals */
.absorption-wash {
    background: var(--bone-white);
}
.absorption-wash::before {
    content: '';
    position: absolute;
    inset: -80px;
    background:
        radial-gradient(ellipse 80% 80% at 40% 50%, rgba(46, 139, 130, 0.4) 0%, transparent 55%),
        radial-gradient(ellipse 60% 70% at 70% 40%, rgba(168, 196, 190, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse 100% 60% at 50% 70%, rgba(46, 139, 130, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 30% 30%, rgba(240, 236, 228, 0.6) 0%, transparent 50%);
    filter: blur(50px);
}

/* Sequestration panel - deep indigos/blacks */
.sequestration-wash {
    background: var(--carbon-black);
}
.sequestration-wash::before {
    content: '';
    position: absolute;
    inset: -80px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 70%, rgba(91, 61, 122, 0.6) 0%, transparent 55%),
        radial-gradient(ellipse 60% 80% at 30% 50%, rgba(26, 42, 58, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse 70% 50% at 70% 30%, rgba(46, 139, 130, 0.3) 0%, transparent 55%),
        radial-gradient(ellipse 90% 40% at 50% 80%, rgba(91, 61, 122, 0.4) 0%, transparent 60%);
    filter: blur(50px);
}

.panel-label {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.formula {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--carbon-black);
    letter-spacing: 0.05em;
    opacity: 0;
    transition: opacity 0.8s ease;
    background: linear-gradient(90deg, var(--verdigris), var(--verdigris)) no-repeat;
    background-size: 0% 2px;
    background-position: bottom center;
    padding-bottom: 8px;
    transition: opacity 0.8s ease, background-size 1.5s ease;
}

.formula.visible {
    opacity: 1;
    background-size: 100% 2px;
}

#panel-sequestration .formula {
    color: var(--bone-white);
}

.panel-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--faded-verdigris);
}

#panel-sequestration .panel-title {
    color: var(--faded-verdigris);
}

/* === SECTION 3: THE ELEMENT === */
#section-element {
    height: 200vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.element-wash {
    background: var(--bone-white);
}
.element-wash::before {
    content: '';
    position: absolute;
    inset: -100px;
    background:
        radial-gradient(ellipse 70% 70% at 50% 50%, rgba(168, 196, 190, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 30% 40%, rgba(46, 139, 130, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 70% 60%, rgba(232, 201, 160, 0.2) 0%, transparent 55%);
    filter: blur(60px);
}

.element-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: sticky;
    top: 0;
}

.hex-lattice-container {
    position: relative;
    width: min(80vw, 500px);
    height: min(80vw, 500px);
}

#hex-lattice {
    width: 100%;
    height: 100%;
}

.hex-cell {
    stroke: var(--verdigris);
    stroke-width: 1.5;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 0.8s ease;
}

/* Watercolor fills for hex cells */
.hex-cell[data-index="0"] { fill: rgba(46, 139, 130, 0.3); }
.hex-cell[data-index="1"] { fill: rgba(168, 196, 190, 0.4); }
.hex-cell[data-index="2"] { fill: rgba(212, 118, 60, 0.25); }
.hex-cell[data-index="3"] { fill: rgba(91, 61, 122, 0.2); }
.hex-cell[data-index="4"] { fill: rgba(232, 201, 160, 0.35); }
.hex-cell[data-index="5"] { fill: rgba(46, 139, 130, 0.2); }
.hex-cell[data-index="6"] { fill: rgba(168, 196, 190, 0.3); }
.hex-cell[data-index="7"] { fill: rgba(91, 61, 122, 0.15); }
.hex-cell[data-index="8"] { fill: rgba(212, 118, 60, 0.2); }
.hex-cell[data-index="9"] { fill: rgba(46, 139, 130, 0.25); }
.hex-cell[data-index="10"] { fill: rgba(232, 201, 160, 0.3); }
.hex-cell[data-index="11"] { fill: rgba(168, 196, 190, 0.2); }
.hex-cell[data-index="12"] { fill: rgba(91, 61, 122, 0.25); }
.hex-cell[data-index="13"] { fill: rgba(212, 118, 60, 0.15); }
.hex-cell[data-index="14"] { fill: rgba(46, 139, 130, 0.3); }
.hex-cell[data-index="15"] { fill: rgba(232, 201, 160, 0.2); }
.hex-cell[data-index="16"] { fill: rgba(168, 196, 190, 0.25); }
.hex-cell[data-index="17"] { fill: rgba(91, 61, 122, 0.3); }
.hex-cell[data-index="18"] { fill: rgba(212, 118, 60, 0.2); }

/* Atomic readouts */
.atom-readout {
    position: absolute;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    color: var(--verdigris);
    opacity: 0;
    transition: opacity 1s ease;
}

.atom-readout.visible {
    opacity: 1;
}

.readout-symbol {
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 6rem);
    color: var(--carbon-black);
    letter-spacing: 0.08em;
}

.readout-number {
    top: 5%;
    right: 5%;
    font-size: 2rem;
    letter-spacing: 0.1em;
}

.readout-mass {
    bottom: 5%;
    left: 5%;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
}

.readout-config {
    bottom: 5%;
    right: 5%;
    font-size: 1rem;
    letter-spacing: 0.1em;
}

/* === SECTION 4: THE FUTURE === */
#section-future {
    min-height: 200vh;
}

.future-wash {
    background: linear-gradient(
        to bottom,
        var(--bone-white) 0%,
        rgba(232, 201, 160, 0.3) 20%,
        rgba(168, 196, 190, 0.2) 40%,
        var(--bone-white) 70%,
        #faf8f4 100%
    );
}

.future-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: calc(var(--hud-size) + 10vh);
}

.future-phrase {
    height: 66vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.future-phrase.visible {
    opacity: 1;
}

.future-phrase h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 8rem);
    color: var(--carbon-black);
    letter-spacing: 0.08em;
    text-align: center;
    /* alt light text: #e8f0ee for dark sections */
    text-shadow:
        2px 2px 8px rgba(46, 139, 130, 0.3),
        -1px -1px 6px rgba(180, 95, 60, 0.2);
}

.future-phrase.shake h2 {
    animation: shake 0.3s ease 1 forwards;
}

/* === KEELING CURVES OVERLAY === */
#keeling-curves {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 500;
}

.keeling-path {
    fill: none;
    stroke: var(--verdigris);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.15;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 3s ease;
}

.keeling-path.drawn {
    stroke-dashoffset: 0;
}

/* === PARTICLES === */
#particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

.particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: particle-drift linear infinite;
}

.particle.hex-particle {
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.particle.tri-particle {
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

@keyframes particle-drift {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: var(--p-opacity, 0.2); }
    90% { opacity: var(--p-opacity, 0.2); }
    100% { transform: translate(var(--drift-x, 100px), var(--drift-y, -200px)) rotate(360deg); opacity: 0; }
}

/* === WARNING STATE (section 4) === */
body.warning-mode #hud-top {
    border-bottom-color: var(--burnt-sienna);
}
body.warning-mode #hud-right {
    border-left-color: var(--burnt-sienna);
}
body.warning-mode #hud-bottom {
    border-top-color: var(--burnt-sienna);
}
body.warning-mode #hud-left {
    border-right-color: var(--burnt-sienna);
}
body.warning-mode #section-label {
    color: var(--burnt-sienna);
}
body.warning-mode .ticker-content {
    color: var(--burnt-sienna);
}
body.warning-mode #progress-fill {
    background: var(--burnt-sienna);
}
body.warning-mode .hex-nav.active polygon {
    fill: var(--burnt-sienna);
    stroke: var(--burnt-sienna);
}

/* HUD transition */
#hud-top, #hud-right, #hud-bottom, #hud-left {
    transition: border-color 2s ease;
}

/* === TICKER SHAKE === */
@keyframes ticker-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.ticker-shake .ticker-content {
    animation: ticker-shake 0.2s ease 1;
}