/* SSETTL.com — silent botanical observatory at midnight
   Palette: settled-loam #0A1410 / cabinet-shadow #13201B / teak-veneer #1C2D26
            limeflower #39FF7A / helianthus #F2FF5C / foxglove #FF4FA3
            paper-bone #E8E2D0 / herbarium-tape #A89D7E / moss-mute #5C7261
   Fonts: Roboto Slab (display), Zilla Slab (body), Bitter (specimen labels), Inter (live-data)
*/

:root {
    --settled-loam: #0A1410;
    --cabinet-shadow: #13201B;
    --teak-veneer: #1C2D26;
    --limeflower: #39FF7A;
    --helianthus: #F2FF5C;
    --foxglove: #FF4FA3;
    --paper-bone: #E8E2D0;
    --herbarium-tape: #A89D7E;
    --moss-mute: #5C7261;
    --vacuum-tube: #FFB17A;

    --ease-slab: cubic-bezier(0.86, 0, 0.07, 1);
    --reveal-duration: 1.6s;
    --hex-w: 320px;
    --hex-h: 368px;  /* w * 1.1547 for pointy-top */
    --gutter: 18px;

    --tiltX: 0deg;
    --tiltY: 0deg;
    --breath-phase: 0;
}

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

html, body {
    background: var(--settled-loam);
    color: var(--paper-bone);
    font-family: 'Zilla Slab', Georgia, serif;
    font-weight: 400;
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    position: relative;
    background:
        radial-gradient(ellipse at 50% 0%, var(--cabinet-shadow) 0%, var(--settled-loam) 60%, var(--settled-loam) 100%);
}

/* Vacuum-tube ambient glow — fixed bottom warmth, never animated */
.vacuum-glow {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    height: 80px;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 100%,
        rgba(255, 177, 122, 0.05) 0%,
        rgba(255, 177, 122, 0.025) 40%,
        transparent 80%);
}

/* The Comb Spine — one continuous honeycomb */
.comb {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 60px 0 0 0;
}

.comb-section {
    position: relative;
    padding: 40px 0;
}

/* Hex rows. Pointy-top hexes tessellate with 75% vertical step, alternating column offsets */
.hex-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--gutter);
    /* tile rows so they overlap by 25% to form the comb */
    margin-top: calc(var(--hex-h) * -0.25);
    position: relative;
}
.hex-row:first-child { margin-top: 0; }

/* Even rows shift right by half-hex-width; odd rows shift left */
.hex-row-a { transform: translateX(calc(var(--hex-w) * -0.5 + 0px)); }
.hex-row-b { transform: translateX(calc(var(--hex-w) * 0.5)); }

/* The hex cell itself — clip-path polygon for pointy-top hexagon */
.hex {
    flex: 0 0 var(--hex-w);
    width: var(--hex-w);
    height: var(--hex-h);
    position: relative;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--cabinet-shadow);
    color: var(--paper-bone);
    transition: transform 380ms var(--ease-slab),
                background-color 1.6s var(--ease-slab),
                filter 1.6s var(--ease-slab);
    transform: rotateX(var(--tiltX)) rotateY(var(--tiltY));
    transform-style: preserve-3d;
    will-change: transform;
}

.hex-inner {
    position: absolute;
    inset: 0;
    /* inner hex with 1px frosted-slide-mount edge */
    clip-path: polygon(50% 1.2%, 99% 25.5%, 99% 74.5%, 50% 98.8%, 1% 74.5%, 1% 25.5%);
    background: var(--cabinet-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 38px 30px;
    overflow: hidden;
}

/* Slide-mount frame: faint outer ring drawn via hex background colors */
.hex::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(180deg, rgba(168, 157, 126, 0.18), rgba(168, 157, 126, 0.05));
    z-index: 0;
}

/* The lit-from-between gutter ridge: subtle neon glow behind every hex */
.hex::after {
    content: "";
    position: absolute;
    inset: -3px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--limeflower);
    z-index: -1;
    opacity: 0;
    transition: opacity 1.6s var(--ease-slab);
}

/* ====== Cell states ====== */

.hex.dormant .hex-inner {
    background: var(--cabinet-shadow);
}

.hex.dormant .vein-pattern {
    display: block;
    width: 70%;
    height: 70%;
    background:
        radial-gradient(circle at 20% 30%, rgba(92, 114, 97, 0.08) 0%, transparent 30%),
        radial-gradient(circle at 70% 60%, rgba(92, 114, 97, 0.06) 0%, transparent 40%),
        linear-gradient(45deg, transparent 48%, rgba(92, 114, 97, 0.04) 49%, rgba(92, 114, 97, 0.04) 51%, transparent 52%),
        linear-gradient(-30deg, transparent 48%, rgba(92, 114, 97, 0.03) 49%, rgba(92, 114, 97, 0.03) 51%, transparent 52%);
    opacity: 0.6;
}

.hex.waking .hex-inner {
    background: var(--teak-veneer);
    background-image:
        repeating-linear-gradient(35deg,
            rgba(168, 157, 126, 0.04) 0px,
            rgba(168, 157, 126, 0.04) 1px,
            transparent 1px,
            transparent 6px);
}

.hex.settled .hex-inner {
    background: var(--teak-veneer);
    background-image:
        repeating-linear-gradient(35deg,
            rgba(168, 157, 126, 0.04) 0px,
            rgba(168, 157, 126, 0.04) 1px,
            transparent 1px,
            transparent 6px);
}

.hex.settled::after {
    opacity: 0.10;
    filter: blur(8px);
}

/* Settling-now: foxglove neon for the actively settling cell */
.hex.settling-now::after {
    background: var(--foxglove);
    opacity: 0.20;
    filter: blur(10px);
}

/* Holding: cursor near, 60bpm pulse on the ring */
.hex.holding::after {
    opacity: 0.32;
    animation: ring-pulse-60bpm 2s infinite;
    filter: blur(6px);
}

@keyframes ring-pulse-60bpm {
    0% { opacity: 0.10; }
    50% { opacity: 0.40; }
    100% { opacity: 0.10; }
}

/* ====== Reveal animation (clip-path 1.6s) ====== */

.hex .hex-inner > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--reveal-duration) var(--ease-slab),
                transform var(--reveal-duration) var(--ease-slab);
}

.hex.settled .hex-inner > * {
    opacity: 1;
    transform: translateY(0);
}

.hex.waking .hex-inner > * {
    opacity: 0.25;
}

/* Specimen SVG neon-accent visibility tied to state */
.hex .specimen-svg .neon-accent {
    opacity: 0;
    transition: opacity var(--reveal-duration) var(--ease-slab);
}
.hex.settled .specimen-svg .neon-accent {
    opacity: 1;
    filter: drop-shadow(0 0 3px currentColor);
}
.hex.settling-now .specimen-svg .neon-accent {
    opacity: 1;
}
.hex.settling-now .specimen-svg .neon-accent path,
.hex.settling-now .specimen-svg .neon-accent circle,
.hex.settling-now .specimen-svg .neon-accent ellipse {
    stroke: var(--foxglove);
    fill: var(--foxglove);
}

/* ====== Meta row ====== */

.meta-hex .hex-inner {
    background: var(--settled-loam);
    background-image: none;
}

.meta-hex.settled .hex-inner,
.meta-hex {
    background: var(--settled-loam);
}

.meta-hex .hex-inner > * { opacity: 1; transform: none; }

.meta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.meta-key {
    font-family: 'Bitter', Georgia, serif;
    font-style: italic;
    font-size: 11px;
    color: var(--herbarium-tape);
    letter-spacing: 0.06em;
    text-transform: lowercase;
}

.meta-val {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--paper-bone);
    letter-spacing: 0.02em;
}

.live-data {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.logo-glyph svg { display: block; }

.meta-label {
    font-family: 'Roboto Slab', serif;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 0.16em;
    color: var(--paper-bone);
}

.breath-wave {
    display: block;
    overflow: visible;
}

.you-here .here-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--limeflower);
    box-shadow: 0 0 8px var(--limeflower);
    margin-bottom: 4px;
    animation: here-pulse 2s infinite;
}

@keyframes here-pulse {
    0% { box-shadow: 0 0 4px var(--limeflower); transform: scale(1); }
    50% { box-shadow: 0 0 14px var(--limeflower); transform: scale(1.1); }
    100% { box-shadow: 0 0 4px var(--limeflower); transform: scale(1); }
}

/* ====== Slab Marquee ====== */

.slab-marquee .marquee-hex .hex-inner {
    background: var(--cabinet-shadow);
}

.marquee-word {
    font-family: 'Roboto Slab', serif;
    font-weight: 900;
    font-size: 84px;
    line-height: 0.92;
    color: var(--paper-bone);
    letter-spacing: -0.02em;
    text-transform: lowercase;
    display: block;
}

.underline-svg {
    display: block;
    width: 78%;
    height: 6px;
    margin-top: 14px;
}

.underline-path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 2.4s var(--ease-slab);
    filter: drop-shadow(0 0 3px var(--helianthus));
}

.hex.settled.marquee-hex .underline-path {
    transition-delay: 800ms;
    stroke-dashoffset: 0;
}

/* ====== Specimen cells ====== */

.specimen-svg {
    width: 70%;
    max-width: 200px;
    height: auto;
    aspect-ratio: 1 / 1;
    display: block;
    margin-bottom: 16px;
}

.specimen-label {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 500;
    font-style: italic;
    font-size: 13px;
    color: var(--herbarium-tape);
    letter-spacing: 0.04em;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.specimen-label em {
    color: var(--paper-bone);
}

.specimen-height {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: 11px;
    color: var(--herbarium-tape);
    letter-spacing: 0.04em;
}

/* Settling-now specimens: shift label to foxglove */
.hex.settling-now .specimen-label em {
    color: var(--foxglove);
    transition: color 1.6s var(--ease-slab);
}

/* ====== Index card (section divider) ====== */

.index-card {
    width: 460px;
    max-width: 92%;
    margin: 60px auto 30px;
    aspect-ratio: 5 / 3;
    background: var(--paper-bone);
    color: var(--settled-loam);
    padding: 28px 32px;
    position: relative;
    box-shadow:
        0 0 0 1px var(--herbarium-tape),
        2px 2px 0 var(--cabinet-shadow);
    transform: rotate(-1.2deg);
    z-index: 3;
    font-family: 'Zilla Slab', Georgia, serif;
}

.card-corner {
    position: absolute;
    top: 8px; right: 8px;
    width: 18px; height: 18px;
    border-top: 1px solid var(--cabinet-shadow);
    border-right: 1px solid var(--cabinet-shadow);
    opacity: 0.5;
}

.card-num {
    font-family: 'Roboto Slab', serif;
    font-weight: 900;
    font-size: 38px;
    color: var(--cabinet-shadow);
    display: block;
    line-height: 1;
}

.card-title {
    font-family: 'Bitter', Georgia, serif;
    font-style: italic;
    font-size: 16px;
    color: var(--moss-mute);
    margin-bottom: 14px;
    display: block;
    letter-spacing: 0.04em;
}

.card-list {
    list-style: none;
    padding: 0;
    border-top: 1px dashed var(--moss-mute);
    padding-top: 12px;
    margin-top: 8px;
}

.card-list li {
    font-family: 'Bitter', Georgia, serif;
    font-style: italic;
    font-size: 13px;
    color: var(--cabinet-shadow);
    letter-spacing: 0.03em;
    line-height: 1.6;
}

/* ====== Pinned note ====== */

.pinned-note .hex-inner {
    overflow: hidden;
}

.note-card {
    width: 90%;
    background: var(--paper-bone);
    color: var(--cabinet-shadow);
    padding: 16px 18px;
    transform: rotate(1.5deg);
    font-family: 'Zilla Slab', Georgia, serif;
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.3);
    border: 1px solid var(--herbarium-tape);
}

.note-card.alt-rotation { transform: rotate(-1.5deg); }

.note-body { margin-bottom: 6px; }
.note-strike { color: var(--moss-mute); font-style: italic; font-size: 12px; }
.note-strike s { color: var(--herbarium-tape); }

/* ====== Verb cells (CTAs reimagined as single lowercase verbs) ====== */

.verb-cell {
    cursor: pointer;
}
.verb-cell .hex-inner {
    background: var(--cabinet-shadow);
}

.verb-word {
    font-family: 'Roboto Slab', serif;
    font-weight: 900;
    font-size: 56px;
    color: var(--paper-bone);
    letter-spacing: -0.02em;
    text-transform: lowercase;
    transition: color 1.6s var(--ease-slab);
}

.verb-cell.settled:hover .verb-word,
.verb-cell.settled:focus .verb-word {
    color: var(--limeflower);
}

.verb-cell:focus { outline: none; }

/* ====== Slab numeral (huge type, masked by hex) ====== */

.slab-numeral .hex-inner {
    background: var(--cabinet-shadow);
    overflow: hidden;
}

.numeral-fragment {
    font-family: 'Roboto Slab', serif;
    font-weight: 900;
    font-size: 320px;
    line-height: 0.78;
    color: var(--teak-veneer);
    letter-spacing: -0.04em;
    transform: translate(-10%, 6%);
    display: block;
    user-select: none;
}

.hex.settled .numeral-fragment {
    color: var(--moss-mute);
}

/* ====== Sediment finale (heights step down 320 → 160 → 80 → 40 → flat) ====== */

.sediment-row {
    margin-top: 8px;
}

.sediment-1 .sediment-hex {
    height: calc(var(--hex-h) * 0.5);
}
.sediment-2 .sediment-hex {
    height: calc(var(--hex-h) * 0.28);
}
.sediment-3 .sediment-hex {
    height: calc(var(--hex-h) * 0.14);
}

.sediment-hex .hex-inner {
    background: var(--cabinet-shadow);
}

.sediment-1 .sediment-hex { opacity: 0.85; }
.sediment-2 .sediment-hex { opacity: 0.6; }
.sediment-3 .sediment-hex { opacity: 0.4; }

.flat-band {
    width: 100%;
    height: 24px;
    background: var(--settled-loam);
    border-top: 1px solid rgba(92, 114, 97, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding-bottom: 12px;
    box-sizing: content-box;
}

.breath-wave-mirror {
    transform: scaleY(-1);
    opacity: 0.55;
}

/* ====== Responsive: collapse comb on narrow viewports ====== */

@media (max-width: 1100px) {
    :root { --hex-w: 240px; --hex-h: 276px; --gutter: 14px; }
    .marquee-word { font-size: 60px; }
    .numeral-fragment { font-size: 220px; }
    .verb-word { font-size: 42px; }
}

@media (max-width: 820px) {
    :root { --hex-w: 200px; --hex-h: 230px; --gutter: 10px; }
    .hex-row-a { transform: translateX(calc(var(--hex-w) * -0.5)); }
    .hex-row-b { transform: translateX(calc(var(--hex-w) * 0.5)); }
    .marquee-word { font-size: 38px; }
    .numeral-fragment { font-size: 160px; }
    .verb-word { font-size: 32px; }
    .specimen-label { font-size: 11px; }
    .meta-key, .meta-val { font-size: 10px; }
    .meta-label { font-size: 13px; }
}

@media (max-width: 560px) {
    :root { --hex-w: 150px; --hex-h: 172px; --gutter: 6px; }
    .marquee-word { font-size: 26px; }
    .numeral-fragment { font-size: 110px; }
    .verb-word { font-size: 24px; }
    .note-card { font-size: 11px; padding: 10px 12px; }
    .specimen-label { font-size: 10px; }
    .specimen-height { font-size: 9px; }
    .index-card { padding: 18px 22px; }
    .card-num { font-size: 28px; }
}

/* ====== Live data fade in ====== */
.live-data { transition: color 1.6s var(--ease-slab); }

/* When the comb's first cells are settled, give the meta-row a soft activation */
body.has-settled .meta-hex .live-data { color: var(--paper-bone); }