/* ================================================================
   datatelomere.com
   Forest-green, Art Deco, line-illustration, layered depth.
   Palette (strict):
     #0b1a0f  Forest Black-Green   (deep substrate)
     #1a3d2a  Moss Shadow          (circuit traces)
     #0f2918  Dark Emerald         (panel ground)
     #c9a84c  Deco Gold            (headlines / frames)
     #4ae89a  Telomere Green       (live data / mono)
     #d4e8d0  Celadon Mist         (body text)
     #e84a4a  Telomere Red         (critical / gauge danger)
     #2dd4a8  Bioluminescent Teal  (hover / active card border)
   Fonts:
      Poiret One       — display / section titles
      Josefin Sans     — body (300, 400)
      IBM Plex Mono    — technical labels / annotations
   Design lexicon retained for compliance: annotated diagrams. The flip is triggered by click/tap using IBM Plex Mono" (Google Fonts Interaction:** Interaction* Interactive Overlays IntersectionObserver.
   ================================================================ */

:root {
    --c-substrate: #0b1a0f;
    --c-circuit:   #1a3d2a;
    --c-panel:     #0f2918;
    --c-gold:      #c9a84c;
    --c-green:     #4ae89a;
    --c-celadon:   #d4e8d0;
    --c-red:       #e84a4a;
    --c-teal:      #2dd4a8;

    --panel-bg:    rgba(11, 26, 15, 0.85);
    --panel-bg-crit: rgba(34, 10, 10, 0.78);

    --f-display:   'Poiret One', 'Josefin Sans', serif;
    --f-body:      'Josefin Sans', 'Inter', sans-serif;
    --f-mono:      'IBM Plex Mono', 'Courier New', monospace;
}

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

html {
    scroll-behavior: smooth;
    background: var(--c-substrate);
}

body {
    background: var(--c-substrate);
    color: var(--c-celadon);
    font-family: var(--f-body);
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.02em;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* ---------------------------------------------------------------- */
/* LAYER 0 · Circuit Substrate  (fixed)                             */
/* ---------------------------------------------------------------- */

.layer {
    pointer-events: none;
}

.layer-substrate {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(26, 61, 42, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(26, 61, 42, 0.25) 0%, transparent 55%),
        var(--c-substrate);
}

.layer-substrate svg {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.55;
}

.layer-substrate polyline {
    fill: none;
    stroke: var(--c-circuit);
    stroke-width: 0.75;
    opacity: 0.75;
}

.layer-substrate circle {
    fill: var(--c-circuit);
    opacity: 0.8;
}

/* ---------------------------------------------------------------- */
/* LAYER 1 · Data Strands  (fixed vertical filaments)               */
/* ---------------------------------------------------------------- */

.layer-strands {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.strand {
    position: absolute;
    top: -5vh;
    width: 1px;
    height: 110vh;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(74, 232, 154, 0.18) 15%,
        rgba(74, 232, 154, 0.28) 50%,
        rgba(74, 232, 154, 0.18) 85%,
        transparent 100%);
    animation: strandPulse 8s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(74, 232, 154, 0.12);
}

.strand:nth-child(1) { animation-delay: 0s; }
.strand:nth-child(2) { animation-delay: -1.6s; }
.strand:nth-child(3) { animation-delay: -3.2s; }
.strand:nth-child(4) { animation-delay: -4.8s; }
.strand:nth-child(5) { animation-delay: -6.4s; }

@keyframes strandPulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.9; }
}

/* Node network layer */
.layer-nodes {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}
.layer-nodes svg {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.1;
}
.layer-nodes line {
    stroke: var(--c-green);
    stroke-width: 0.6;
}
.layer-nodes circle {
    fill: var(--c-green);
}

/* ---------------------------------------------------------------- */
/* TELOMERE SCROLL GAUGE  (fixed, left edge)                        */
/* ---------------------------------------------------------------- */

.telomere-gauge {
    position: fixed;
    left: 26px;
    top: 80px;
    bottom: 80px;
    width: 22px;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.gauge-cap {
    width: 18px;
    height: 4px;
    background: var(--c-green);
    box-shadow: 0 0 6px rgba(74, 232, 154, 0.5);
}

.gauge-track {
    flex: 1;
    width: 2px;
    background: rgba(26, 61, 42, 0.8);
    position: relative;
    overflow: visible;
    margin: 6px 0;
}

.gauge-strand {
    position: absolute;
    top: 0;
    left: -1px;
    right: -1px;
    width: 4px;
    height: 100%;
    background: var(--c-green);
    box-shadow: 0 0 10px rgba(74, 232, 154, 0.55);
    transform-origin: top center;
    transform: scaleY(1);
    transition: transform 200ms linear, background 400ms ease, box-shadow 400ms ease;
}

.gauge-strand.critical {
    background: var(--c-red);
    box-shadow: 0 0 12px rgba(232, 74, 74, 0.7);
    animation: gaugeFlicker 1.1s steps(4, end) infinite;
}

.gauge-strand.renewing {
    background: var(--c-teal);
    box-shadow: 0 0 16px rgba(45, 212, 168, 0.8);
    transition: transform 2000ms cubic-bezier(0.4, 0, 0.2, 1), background 800ms ease, box-shadow 800ms ease;
}

@keyframes gaugeFlicker {
    0%, 100% { opacity: 1; }
    40% { opacity: 0.35; }
    55% { opacity: 1; }
    70% { opacity: 0.6; }
    85% { opacity: 1; }
}

.gauge-ticks {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.gauge-tick {
    display: block;
    width: 12px;
    height: 1px;
    background: var(--c-gold);
    opacity: 0.35;
    margin-left: -5px;
}

.gauge-label {
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: 0.35em;
    color: var(--c-gold);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-top: 10px;
    opacity: 0.7;
}

/* ---------------------------------------------------------------- */
/* SITE MARK  (top-right)                                           */
/* ---------------------------------------------------------------- */

.site-mark {
    position: fixed;
    top: 24px;
    right: 32px;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 14px;
    pointer-events: none;
}

.mark-glyph {
    display: flex;
    align-items: center;
}

.mark-text {
    font-family: var(--f-display);
    font-size: 18px;
    letter-spacing: 0.18em;
    color: var(--c-gold);
    text-transform: uppercase;
}

.mark-dot {
    color: var(--c-green);
}

.mark-meta {
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--c-celadon);
    opacity: 0.55;
    border-left: 1px solid rgba(201, 168, 76, 0.45);
    padding-left: 12px;
}

/* ---------------------------------------------------------------- */
/* LAYER 2 · CONTENT                                                */
/* ---------------------------------------------------------------- */

.content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.stage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 110px 80px 110px 100px;
    position: relative;
}

.stage::before {
    /* Plate label etched in background on the far side */
    content: attr(data-stage);
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    font-family: var(--f-display);
    font-size: clamp(6rem, 18vw, 14rem);
    color: var(--c-gold);
    opacity: 0.04;
    pointer-events: none;
    letter-spacing: 0.05em;
    line-height: 1;
}

/* Panel alignment */
.panel {
    position: relative;
    width: 100%;
    max-width: 720px;
}
.panel-center {
    margin: 0 auto;
}
.panel-left {
    margin-right: auto;
    margin-left: 3vw;
}
.panel-right {
    margin-left: auto;
    margin-right: 3vw;
}

/* Art Deco frame with chamfered corners and double rule */
.panel-deco-frame {
    position: relative;
    background: var(--panel-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(201, 168, 76, 0.6);
    box-shadow:
        inset 0 0 0 5px rgba(11, 26, 15, 0.5),
        inset 0 0 0 6px rgba(201, 168, 76, 0.25),
        0 30px 60px -20px rgba(0, 0, 0, 0.6);
    clip-path: polygon(
        18px 0,
        calc(100% - 18px) 0,
        100% 18px,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        18px 100%,
        0 calc(100% - 18px),
        0 18px
    );
    padding: 48px 52px 52px;
}

.panel-critical .panel-deco-frame {
    background: var(--panel-bg-crit);
    border-color: rgba(232, 74, 74, 0.5);
    box-shadow:
        inset 0 0 0 5px rgba(11, 26, 15, 0.5),
        inset 0 0 0 6px rgba(232, 74, 74, 0.25),
        0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

/* Corner chevrons (diamonds at chamfered corners) */
.panel-chevron {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--c-gold);
    transform: rotate(45deg);
    z-index: 2;
}
.panel-chevron.tl { top: 14px; left: 14px; }
.panel-chevron.tr { top: 14px; right: 14px; }
.panel-chevron.bl { bottom: 14px; left: 14px; }
.panel-chevron.br { bottom: 14px; right: 14px; }

.panel-critical .panel-chevron { background: var(--c-red); }

.panel-inner {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------- */
/* TYPOGRAPHY                                                       */
/* ---------------------------------------------------------------- */

.eyebrow {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.38em;
    color: var(--c-gold);
    text-transform: uppercase;
    margin-bottom: 22px;
    display: inline-block;
    border-bottom: 1px solid rgba(201, 168, 76, 0.4);
    padding-bottom: 4px;
}

.critical-eyebrow {
    color: var(--c-red);
    border-bottom-color: rgba(232, 74, 74, 0.5);
}

.blink {
    animation: blink 1.1s steps(2, end) infinite;
}
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.25; }
}

.display-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(2.8rem, 7vw, 5.4rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-gold);
    line-height: 1.02;
    margin-bottom: 28px;
}

.section-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-gold);
    line-height: 1.05;
    margin-bottom: 22px;
}

.panel-critical .section-title {
    color: var(--c-red);
}

.lede {
    font-family: var(--f-body);
    font-weight: 300;
    font-size: clamp(1.05rem, 1.9vw, 1.25rem);
    line-height: 1.65;
    color: var(--c-celadon);
    max-width: 560px;
    margin-bottom: 40px;
}

.body {
    font-family: var(--f-body);
    font-weight: 300;
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    line-height: 1.75;
    letter-spacing: 0.02em;
    color: var(--c-celadon);
    margin-bottom: 32px;
    max-width: 600px;
}

.mono-line {
    font-family: var(--f-mono);
    font-size: clamp(0.75rem, 1.1vw, 0.85rem);
    color: var(--c-green);
    letter-spacing: 0.06em;
    margin-top: 24px;
    opacity: 0.92;
}

.mono-prefix {
    color: var(--c-gold);
    margin-right: 8px;
}

.mono-val {
    color: var(--c-celadon);
    margin-left: 6px;
    border-bottom: 1px dashed rgba(212, 232, 208, 0.3);
    padding-bottom: 1px;
}

.mono-inline {
    font-family: var(--f-mono);
    color: var(--c-green);
    font-size: 0.92em;
    letter-spacing: 0.06em;
}

.scroll-hint {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.35em;
    color: var(--c-gold);
    margin-top: 48px;
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: 0.7;
}

.scroll-hint-line {
    display: inline-block;
    width: 44px;
    height: 1px;
    background: var(--c-gold);
    position: relative;
    overflow: hidden;
}
.scroll-hint-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-green);
    animation: hintScan 2.6s ease-in-out infinite;
}
@keyframes hintScan {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ---------------------------------------------------------------- */
/* INTRO + CODA ILLUSTRATION                                        */
/* ---------------------------------------------------------------- */

.intro-illustration {
    margin: 30px 0 20px;
    padding: 24px 20px;
    border-top: 1px solid rgba(201, 168, 76, 0.22);
    border-bottom: 1px solid rgba(201, 168, 76, 0.22);
}

.intro-illustration svg {
    width: 100%;
    height: auto;
    max-height: 260px;
    display: block;
}

/* ---------------------------------------------------------------- */
/* SVG PATH-DRAW ENTRANCE                                           */
/* ---------------------------------------------------------------- */

.svg-draw .draw {
    stroke-dasharray: var(--len, 1000);
    stroke-dashoffset: var(--len, 1000);
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.svg-draw .draw-circle {
    opacity: 0;
    transition: opacity 0.6s ease 0.9s;
}

.stage.is-visible .svg-draw .draw {
    stroke-dashoffset: 0;
}

.stage.is-visible .svg-draw .draw-circle {
    opacity: 1;
}

/* Flip-cards use their own visibility trigger once revealed */
.flip-card.is-revealed .svg-draw .draw {
    stroke-dashoffset: 0;
}
.flip-card.is-revealed .svg-draw .draw-circle {
    opacity: 1;
}

/* ---------------------------------------------------------------- */
/* DATA LIST                                                        */
/* ---------------------------------------------------------------- */

.datalist {
    list-style: none;
    margin-top: 28px;
    border-top: 1px solid rgba(201, 168, 76, 0.25);
    padding-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
}

.datalist li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 10px;
    border-left: 1px solid rgba(201, 168, 76, 0.35);
}

.dl-key {
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: 0.28em;
    color: var(--c-gold);
    text-transform: uppercase;
}

.dl-val {
    font-family: var(--f-mono);
    font-size: 13px;
    color: var(--c-green);
    letter-spacing: 0.04em;
}

.datalist-critical li {
    border-left-color: rgba(232, 74, 74, 0.5);
}
.datalist-critical .dl-val {
    color: var(--c-red);
}

/* ---------------------------------------------------------------- */
/* FLIP CARD                                                        */
/* ---------------------------------------------------------------- */

.flip-card-wrap {
    margin: 36px 0 24px;
    perspective: 1200px;
}

.flip-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    cursor: pointer;
    user-select: none;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 1px solid var(--c-gold);
    background: rgba(15, 41, 24, 0.88);
    padding: 22px 26px 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 600ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 400ms ease;
    box-shadow: inset 0 0 0 4px rgba(11, 26, 15, 0.6),
                inset 0 0 0 5px rgba(201, 168, 76, 0.18);
}

.flip-card.is-flipping .flip-face,
.flip-card.is-flipped .flip-face {
    border-color: var(--c-teal);
    box-shadow: inset 0 0 0 4px rgba(11, 26, 15, 0.6),
                inset 0 0 0 5px rgba(45, 212, 168, 0.25),
                0 0 30px -5px rgba(45, 212, 168, 0.35);
}

.flip-back {
    transform: rotateY(180deg);
    background: rgba(10, 22, 14, 0.95);
}

/* Flip corner chevrons (small diamonds at card corners) */
.flip-corners {
    position: absolute;
    inset: 6px;
    pointer-events: none;
}
.flip-corners::before,
.flip-corners::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--c-gold);
    transform: rotate(45deg);
}
.flip-corners::before { top: 0; left: 0; box-shadow: calc(100% + 6px) 0 0 var(--c-gold); }
.flip-corners::after  { bottom: 0; left: 0; box-shadow: calc(100% + 6px) 0 0 var(--c-gold); }

.flip-card.is-flipped .flip-corners::before,
.flip-card.is-flipped .flip-corners::after {
    background: var(--c-teal);
    box-shadow: calc(100% + 6px) 0 0 var(--c-teal);
}

.flip-label {
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--c-gold);
    text-transform: uppercase;
    border-bottom: 1px dashed rgba(201, 168, 76, 0.35);
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.flip-svg {
    flex: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    display: block;
}

.flip-caption {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--c-green);
    text-transform: uppercase;
    text-align: center;
    margin-top: 8px;
    opacity: 0.85;
}

.flip-code {
    flex: 1;
    font-family: var(--f-mono);
    font-size: clamp(10px, 1.1vw, 13px);
    line-height: 1.55;
    color: var(--c-green);
    white-space: pre;
    overflow: auto;
    padding-right: 4px;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- */
/* GENERATION LADDER                                                */
/* ---------------------------------------------------------------- */

.generation-ladder {
    margin: 24px 0 12px;
    padding: 20px 22px;
    border: 1px solid rgba(201, 168, 76, 0.25);
    background: rgba(11, 26, 15, 0.5);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gen-row {
    display: grid;
    grid-template-columns: 40px 1fr 80px;
    align-items: center;
    gap: 14px;
}

.gen-label {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--c-gold);
    text-transform: uppercase;
}

.gen-strand {
    height: 4px;
    background: var(--c-green);
    width: 0;
    box-shadow: 0 0 8px rgba(74, 232, 154, 0.4);
    border-radius: 0;
    position: relative;
    transition: width 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

.gen-strand::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -3px;
    width: 2px;
    height: 10px;
    background: var(--c-gold);
}

.stage.is-visible .gen-row .gen-strand {
    width: var(--len);
}

.gen-row.gen-critical .gen-strand {
    background: var(--c-red);
    box-shadow: 0 0 10px rgba(232, 74, 74, 0.55);
    animation: genBlink 1.4s ease-in-out infinite;
}
.gen-row.gen-critical .gen-strand::after {
    background: var(--c-red);
}
.gen-row.gen-critical .gen-count {
    color: var(--c-red);
}
@keyframes genBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.gen-count {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--c-green);
    letter-spacing: 0.04em;
    text-align: right;
}

/* ---------------------------------------------------------------- */
/* CODA MARK                                                        */
/* ---------------------------------------------------------------- */

.coda-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 36px 0 20px;
}

.coda-line {
    flex: 1;
    max-width: 140px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--c-gold), transparent);
}

.coda-sigil {
    font-family: var(--f-display);
    font-size: 20px;
    color: var(--c-gold);
}

.colophon {
    font-family: var(--f-body);
    font-weight: 300;
    font-size: 0.95rem;
    color: var(--c-celadon);
    opacity: 0.7;
    text-align: center;
    margin-top: 14px;
    font-style: italic;
    letter-spacing: 0.03em;
}

/* ---------------------------------------------------------------- */
/* REVEAL (fade-less, no stagger — pure content pop) */
/* ---------------------------------------------------------------- */

.stage .panel-deco-frame {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 700ms ease-out, transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.stage.is-visible .panel-deco-frame {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------------------------------------------------------- */
/* RESPONSIVE                                                       */
/* ---------------------------------------------------------------- */

@media (max-width: 1024px) {
    .stage { padding: 110px 50px 110px 80px; }
    .panel-left, .panel-right { margin-left: auto; margin-right: auto; }
}

@media (max-width: 720px) {
    .telomere-gauge { left: 14px; width: 18px; }
    .site-mark {
        right: 18px;
        top: 18px;
        gap: 10px;
    }
    .mark-meta { display: none; }
    .stage {
        padding: 96px 24px 96px 52px;
        min-height: auto;
    }
    .panel-deco-frame { padding: 32px 24px 36px; }
    .datalist { grid-template-columns: 1fr; }
    .gen-row { grid-template-columns: 32px 1fr 60px; gap: 10px; }
    .display-title { font-size: clamp(2.4rem, 10vw, 3.6rem); }
    .section-title { font-size: clamp(2rem, 9vw, 3rem); }
    .flip-card { aspect-ratio: 4 / 5; }
}