/* chrono.games — Temporal Paradox Archive
 * Palette: sepia-nostalgic ← → neon-cyan
 * Typography: Playfair Display + Lora + VT323 fallbacks
 * Aesthetic: pixel-art, split-screen, crystalline, CRT
 * Compliance font terms: Interaction:** Interaction: Interface Coordinates Labels:** Labels: (Google IntersectionObserver threshold crossing watching complement while being distinct enough hierarchy.
 */

/* ---------- Reset & Base ---------- */

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

:root {
    /* Core sepia/future palette */
    --c-past-bg: #2C2417;
    --c-future-bg: #0D0F14;
    --c-past-surface: #1E1A14;
    --c-future-surface: #161A22;
    --c-past-text: #C8B08A;
    --c-future-text: #B8C4D0;
    --c-amber: #D4A24E;
    --c-cyan: #00E5CC;
    --c-red: #E84545;

    /* Rift path custom properties - mutated via JS */
    --rift-x1: 50;
    --rift-x2: 52;
    --rift-x3: 48;
    --rift-x4: 54;
    --rift-x5: 46;

    /* Timing */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Fonts */
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body: "Lora", Georgia, "Times New Roman", serif;
    --font-mono: "VT323", "Space Mono", "Courier New", Courier, monospace;

    /* Gradients */
    --grad-temporal: linear-gradient(90deg, #2C2417 0%, #161A22 45%, #0D0F14 100%);
    --grad-amber-haze: radial-gradient(ellipse at center, rgba(212, 162, 78, 0.15) 0%, transparent 70%);
    --grad-neon-bleed: radial-gradient(ellipse at center, rgba(0, 229, 204, 0.12) 0%, transparent 60%);
}

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

body {
    font-family: var(--font-body);
    color: var(--c-past-text);
    background: var(--c-future-bg);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    line-height: 1.75;
}

/* ---------- Canvas Particle Layer ---------- */

.particle-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    opacity: 0.85;
}

/* ---------- Scan Lines Overlay ---------- */

.scan-lines {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.22) 0px,
        rgba(0, 0, 0, 0.22) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.35;
    animation: scan-roll 8s linear infinite;
    mix-blend-mode: multiply;
}

@keyframes scan-roll {
    0% { transform: translateY(0); }
    100% { transform: translateY(3px); }
}

/* ---------- Film Grain ---------- */

.film-grain {
    position: fixed;
    inset: 0;
    z-index: 91;
    pointer-events: none;
    opacity: 0.08;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.82  0 0 0 0 0.71  0 0 0 0 0.55  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
    animation: grain-shift 2.4s steps(6) infinite;
}

@keyframes grain-shift {
    0%   { background-position: 0 0; }
    16%  { background-position: -40px 30px; }
    33%  { background-position: 60px -10px; }
    50%  { background-position: -20px 80px; }
    66%  { background-position: 100px 40px; }
    83%  { background-position: 30px -60px; }
    100% { background-position: 0 0; }
}

/* ---------- CRT Power On ---------- */

.crt-power-on {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    background: #000;
    overflow: hidden;
}

.crt-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: var(--c-cyan);
    box-shadow: 0 0 8px var(--c-cyan), 0 0 24px var(--c-cyan);
    transform: scaleX(0);
    transform-origin: center center;
    animation: crt-line-spread 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.crt-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    animation: crt-flash 100ms linear 550ms forwards;
}

@keyframes crt-line-spread {
    0%   { transform: scaleX(0) scaleY(1); opacity: 0; }
    12%  { transform: scaleX(1) scaleY(1); opacity: 1; }
    65%  { transform: scaleX(1) scaleY(1); opacity: 1; }
    100% { transform: scaleX(1) scaleY(540); opacity: 1; }
}

@keyframes crt-flash {
    0%   { opacity: 0; }
    50%  { opacity: 0.3; }
    100% { opacity: 0; }
}

.crt-power-on.is-done {
    animation: crt-fade-out 450ms linear forwards;
}

@keyframes crt-fade-out {
    0%   { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

/* ---------- Coord Bar (top HUD) ---------- */

.coord-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.6rem, 2vw, 1.4rem);
    padding: 0.6rem 1.2rem;
    background: linear-gradient(90deg,
        rgba(30, 26, 20, 0.88) 0%,
        rgba(22, 26, 34, 0.88) 100%);
    border-bottom: 1px solid rgba(0, 229, 204, 0.35);
    font-family: var(--font-mono);
    font-size: clamp(0.72rem, 1.3vw, 0.95rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-amber);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    flex-wrap: wrap;
}

.coord-segment {
    display: inline-flex;
    gap: 0.55rem;
    align-items: baseline;
}

.coord-label {
    color: rgba(200, 176, 138, 0.55);
}

.coord-value {
    color: var(--c-cyan);
    text-shadow: 0 0 4px rgba(0, 229, 204, 0.55);
}

.coord-divider {
    color: rgba(0, 229, 204, 0.4);
}

.coord-blink {
    color: var(--c-red);
    animation: blink 1.3s steps(2) infinite;
    text-shadow: 0 0 6px rgba(232, 69, 69, 0.65);
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.22; }
}

.coord-bar.is-glitching {
    animation: temporal-shake 400ms ease-in-out;
    filter: hue-rotate(180deg);
    transition: filter 100ms linear;
}

/* ---------- Temporal Shake ---------- */

@keyframes temporal-shake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-3px, -1px) rotate(-0.5deg); }
    20% { transform: translate(2px, 1px) rotate(0.3deg); }
    30% { transform: translate(-1px, 2px) rotate(-0.2deg); }
    40% { transform: translate(3px, -1px) rotate(0.5deg); }
    50% { transform: translate(-2px, 1px) rotate(-0.3deg); }
    60% { transform: translate(1px, -2px) rotate(0.2deg); }
    70% { transform: translate(-3px, 0px) rotate(-0.4deg); }
    80% { transform: translate(2px, 2px) rotate(0.3deg); }
    90% { transform: translate(-1px, -1px) rotate(0.1deg); }
}

.is-glitching {
    animation: temporal-shake 400ms ease-in-out;
}

/* ---------- Rift Container ---------- */

.rift-container {
    position: relative;
    z-index: 5;
}

/* ---------- Hero Rift Zone ---------- */

.rift-zone {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 640px;
    display: flex;
    overflow: hidden;
}

.zone {
    position: relative;
    width: 50vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
}

.zone--past {
    background: var(--c-past-bg);
    color: var(--c-past-text);
    clip-path: polygon(
        0 0,
        calc(var(--rift-x1) * 1%) 0,
        calc(var(--rift-x2) * 1%) 12%,
        calc(var(--rift-x3) * 1%) 25%,
        calc(var(--rift-x4) * 1%) 38%,
        calc(var(--rift-x5) * 1%) 50%,
        calc(var(--rift-x2) * 1%) 62%,
        calc(var(--rift-x3) * 1%) 75%,
        calc(var(--rift-x1) * 1%) 88%,
        calc(var(--rift-x4) * 1%) 100%,
        0 100%
    );
    transition: clip-path 1.6s cubic-bezier(0.4, 0.1, 0.3, 1);
}

.zone--past::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-amber-haze);
    pointer-events: none;
    z-index: 1;
}

.zone--past::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.5;
    mix-blend-mode: multiply;
}

.zone--future {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    background: var(--c-future-bg);
    color: var(--c-future-text);
    clip-path: polygon(
        calc(var(--rift-x1) * 1%) 0,
        100% 0,
        100% 100%,
        calc(var(--rift-x4) * 1%) 100%,
        calc(var(--rift-x1) * 1%) 88%,
        calc(var(--rift-x3) * 1%) 75%,
        calc(var(--rift-x2) * 1%) 62%,
        calc(var(--rift-x5) * 1%) 50%,
        calc(var(--rift-x4) * 1%) 38%,
        calc(var(--rift-x3) * 1%) 25%,
        calc(var(--rift-x2) * 1%) 12%
    );
    justify-content: center;
    padding-left: 55vw;
    padding-right: clamp(1.5rem, 4vw, 3rem);
    transition: clip-path 1.6s cubic-bezier(0.4, 0.1, 0.3, 1);
}

.zone--future::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-neon-bleed);
    pointer-events: none;
    z-index: 1;
}

.zone--future::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(0, 229, 204, 0.04) 0px,
        rgba(0, 229, 204, 0.04) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.5;
}

.zone-inner {
    position: relative;
    z-index: 2;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.zone--future .zone-inner {
    margin-left: auto;
}

.hero-label {
    font-family: var(--font-mono);
    font-size: clamp(0.8rem, 1.4vw, 1rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c-amber);
    opacity: 0.8;
}

.hero-label--future {
    color: var(--c-cyan);
    text-shadow: 0 0 6px rgba(0, 229, 204, 0.6);
}

/* Hero Logo */

.hero-logo {
    font-family: var(--font-display);
    line-height: 0.9;
    display: flex;
    flex-direction: column;
    font-weight: 900;
}

.hero-logo-line--top {
    font-size: clamp(3.2rem, 9vw, 8.5rem);
    letter-spacing: 0.15em;
    font-weight: 900;
}

.hero-logo-line--bottom {
    font-size: clamp(2.3rem, 6vw, 5.5rem);
    letter-spacing: -0.02em;
    font-weight: 700;
    font-style: italic;
}

.hero-logo--past {
    color: var(--c-amber);
    text-shadow:
        2px 0 0 rgba(232, 69, 69, 0.25),
        -2px 0 0 rgba(212, 162, 78, 0.4),
        0 0 18px rgba(212, 162, 78, 0.25);
    position: relative;
}

.hero-logo--past::before {
    content: "";
    position: absolute;
    inset: -4px;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 2px,
        rgba(44, 36, 23, 0.5) 2px,
        rgba(44, 36, 23, 0.5) 4px
    );
    pointer-events: none;
    mix-blend-mode: multiply;
}

.hero-logo--future {
    color: #F2F8FF;
    text-shadow:
        0 0 7px var(--c-cyan),
        0 0 14px var(--c-cyan),
        0 0 28px rgba(0, 229, 204, 0.55),
        0 0 56px rgba(0, 229, 204, 0.28);
    animation: neon-pulse 3s ease-in-out infinite;
}

@keyframes neon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.84; }
}

.hero-tagline {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    line-height: 1.7;
    font-style: italic;
    max-width: 44ch;
}

.hero-tagline--past {
    color: var(--c-past-text);
}

.hero-tagline--future {
    color: var(--c-future-text);
}

.hero-readout {
    display: flex;
    gap: 1.4rem;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: clamp(0.78rem, 1.2vw, 0.95rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(212, 162, 78, 0.35);
    margin-top: 0.6rem;
}

.hero-readout--past {
    color: var(--c-amber);
}

.hero-readout--future {
    color: var(--c-cyan);
    border-top-color: rgba(0, 229, 204, 0.35);
    text-shadow: 0 0 4px rgba(0, 229, 204, 0.4);
}

/* Rift SVG */

.rift-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
}

.rift-path {
    fill: none;
    stroke-width: 0.6;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: miter;
    stroke-dasharray: 20 6;
    animation: rift-flow 6s linear infinite;
}

.rift-path--amber {
    stroke: var(--c-amber);
    filter: drop-shadow(0 0 4px var(--c-amber)) drop-shadow(0 0 12px rgba(212, 162, 78, 0.6));
    opacity: 0.85;
    transform: translateX(-0.3%);
}

.rift-path--cyan {
    stroke: var(--c-cyan);
    filter: drop-shadow(0 0 4px var(--c-cyan)) drop-shadow(0 0 16px rgba(0, 229, 204, 0.7));
    opacity: 0.95;
    transform: translateX(0.3%);
    animation-duration: 4.5s;
    animation-direction: reverse;
}

@keyframes rift-flow {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -240; }
}

.rift-instruction {
    position: absolute;
    bottom: clamp(1rem, 3vh, 2.4rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c-cyan);
    background: rgba(13, 15, 20, 0.5);
    border: 1px solid rgba(0, 229, 204, 0.35);
    text-shadow: 0 0 5px rgba(0, 229, 204, 0.5);
    animation: instr-float 3s ease-in-out infinite;
}

.rift-instruction__arrow {
    color: var(--c-amber);
    animation: instr-arrow 1.4s ease-in-out infinite;
}

@keyframes instr-float {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.92; }
    50%      { transform: translate(-50%, -4px); opacity: 1; }
}

@keyframes instr-arrow {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(5px); }
}

/* ---------- Timeline Intro ---------- */

.timeline-intro {
    position: relative;
    background: var(--grad-temporal);
    padding: clamp(5rem, 12vh, 9rem) clamp(1.5rem, 6vw, 4rem);
    border-top: 1px solid rgba(212, 162, 78, 0.18);
    border-bottom: 1px solid rgba(0, 229, 204, 0.18);
    z-index: 4;
}

.timeline-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-amber-haze);
    opacity: 0.5;
    pointer-events: none;
}

.timeline-intro__inner {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.intro-marker {
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1.3vw, 0.95rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-cyan);
    margin-bottom: 1.4rem;
    text-shadow: 0 0 5px rgba(0, 229, 204, 0.5);
}

.intro-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.08;
    color: var(--c-amber);
    margin-bottom: 1.4rem;
    text-shadow: 0 0 24px rgba(212, 162, 78, 0.35);
    letter-spacing: -0.01em;
}

.intro-body {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.8;
    color: var(--c-past-text);
    max-width: 68ch;
    margin: 0 auto 1rem;
}

.intro-body em {
    color: var(--c-amber);
    font-style: italic;
    font-weight: 600;
}

.intro-body--dim {
    opacity: 0.72;
    font-size: clamp(0.9rem, 1.3vw, 1.05rem);
}

.intro-divider {
    display: flex;
    justify-content: center;
    gap: 1.1rem;
    margin-top: 2.2rem;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--c-amber);
    letter-spacing: 0.3em;
}

.intro-divider span:nth-child(even) {
    color: var(--c-cyan);
}

/* ---------- Timeline (horizontal scroller) ---------- */

.timeline {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--c-cyan) var(--c-future-surface);
    background: var(--grad-temporal);
    position: relative;
    z-index: 4;
}

.timeline::-webkit-scrollbar {
    height: 8px;
}

.timeline::-webkit-scrollbar-track {
    background: var(--c-future-surface);
}

.timeline::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--c-amber), var(--c-cyan));
    border-radius: 4px;
}

.era {
    flex: 0 0 100vw;
    min-width: 100vw;
    height: 100vh;
    min-height: 640px;
    scroll-snap-align: start;
    display: grid;
    grid-template-rows: 1fr 1fr;
    position: relative;
    overflow: hidden;
    border-left: 1px solid rgba(0, 229, 204, 0.12);
    border-right: 1px solid rgba(212, 162, 78, 0.12);
}

.era::before {
    content: attr(data-title);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
    font-family: var(--font-display);
    font-size: clamp(7rem, 22vw, 22rem);
    font-weight: 900;
    letter-spacing: 0.05em;
    color: rgba(212, 162, 78, 0.05);
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    text-shadow: 0 0 40px rgba(0, 229, 204, 0.15);
}

.era-half {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
    overflow: hidden;
}

.era-half--past {
    background: var(--c-past-bg);
    color: var(--c-past-text);
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 22px),
        calc(50% + 30px) 100%,
        calc(50% + 10px) calc(100% - 10px),
        calc(50% - 10px) 100%,
        calc(50% - 30px) calc(100% - 14px),
        0 calc(100% - 22px)
    );
}

.era-half--past::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-amber-haze);
    pointer-events: none;
}

.era-half--past::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.18) 0px,
        rgba(0, 0, 0, 0.18) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.45;
    mix-blend-mode: multiply;
}

.era-half--future {
    background: var(--c-future-bg);
    color: var(--c-future-text);
}

.era-half--future::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-neon-bleed);
    pointer-events: none;
}

.era-half--future::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(0, 229, 204, 0.045) 0px,
        rgba(0, 229, 204, 0.045) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.55;
}

.era-half__content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.era-half--future .era-half__content {
    flex-direction: row;
    align-items: center;
    gap: clamp(1.2rem, 3vw, 2.4rem);
}

.era-stamp {
    font-family: var(--font-mono);
    font-size: clamp(0.82rem, 1.3vw, 1rem);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--c-amber);
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(212, 162, 78, 0.35);
    background: rgba(30, 26, 20, 0.5);
}

.era-stamp--future {
    color: var(--c-cyan);
    border-color: rgba(0, 229, 204, 0.4);
    background: rgba(22, 26, 34, 0.6);
    text-shadow: 0 0 4px rgba(0, 229, 204, 0.5);
}

.era-half--future .era-stamp {
    align-self: flex-start;
    margin-bottom: 0.6rem;
}

.era-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.6rem, 3.6vw, 2.9rem);
    line-height: 1.1;
    color: var(--c-amber);
    letter-spacing: -0.01em;
    text-shadow: 0 0 18px rgba(212, 162, 78, 0.3);
}

.era-text {
    font-family: var(--font-body);
    font-size: clamp(0.98rem, 1.35vw, 1.12rem);
    line-height: 1.75;
    color: var(--c-past-text);
    max-width: 62ch;
}

.era-text em {
    color: var(--c-amber);
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.era-text--quiet {
    font-style: italic;
    opacity: 0.68;
    border-left: 2px solid var(--c-amber);
    padding-left: 1rem;
    color: rgba(200, 176, 138, 0.82);
}

.era-text--future {
    color: var(--c-future-text);
    max-width: 34ch;
}

.glow-cyan {
    color: var(--c-cyan);
    text-shadow: 0 0 8px rgba(0, 229, 204, 0.75), 0 0 18px rgba(0, 229, 204, 0.4);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ---------- Paradox Node (Diamond) ---------- */

.paradox-node-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(160px, 20vw, 230px);
    height: clamp(160px, 20vw, 230px);
    position: relative;
}

.paradox-node {
    position: relative;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background: linear-gradient(135deg,
        rgba(22, 26, 34, 0.95) 0%,
        rgba(30, 26, 20, 0.95) 50%,
        rgba(22, 26, 34, 0.95) 100%);
    transition: transform 300ms var(--ease-spring), filter 300ms ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paradox-node::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background:
        linear-gradient(135deg, transparent 48%, var(--c-cyan) 49%, var(--c-cyan) 51%, transparent 52%),
        linear-gradient(45deg, transparent 48%, var(--c-amber) 49%, var(--c-amber) 51%, transparent 52%);
    background-size: 100% 100%;
    opacity: 0.75;
    pointer-events: none;
}

.paradox-node__frame {
    position: absolute;
    inset: 6px;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background: radial-gradient(ellipse at center, rgba(13, 15, 20, 0.95) 30%, rgba(30, 26, 20, 0.85) 100%);
    border: none;
    z-index: 1;
}

.paradox-node__frame::before,
.paradox-node__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 350ms ease;
    pointer-events: none;
}

.paradox-node__frame::before {
    background:
        linear-gradient(35deg, transparent 45%, rgba(0, 229, 204, 0.55) 49%, transparent 53%),
        linear-gradient(-35deg, transparent 45%, rgba(212, 162, 78, 0.45) 49%, transparent 53%),
        linear-gradient(75deg, transparent 42%, rgba(0, 229, 204, 0.35) 50%, transparent 58%);
}

.paradox-node__frame::after {
    background:
        radial-gradient(circle at 30% 40%, rgba(0, 229, 204, 0.35), transparent 45%),
        radial-gradient(circle at 70% 60%, rgba(212, 162, 78, 0.28), transparent 45%);
}

.paradox-node__icon {
    position: relative;
    z-index: 3;
    width: 32px;
    height: 32px;
    transform: rotate(0deg);
    filter: drop-shadow(0 0 6px rgba(0, 229, 204, 0.65));
}

.paradox-node__label {
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c-cyan);
    text-shadow: 0 0 4px rgba(0, 229, 204, 0.7);
    z-index: 4;
    white-space: nowrap;
}

.paradox-node:hover,
.paradox-node.is-active {
    transform: scale(1.18);
    filter: drop-shadow(0 0 20px rgba(0, 229, 204, 0.55)) drop-shadow(0 0 40px rgba(212, 162, 78, 0.35));
}

.paradox-node.is-expanded {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    z-index: 220;
    transform: translate(-50%, -50%) scale(1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    background:
        radial-gradient(circle at 28% 42%, rgba(212, 162, 78, 0.24), transparent 34%),
        radial-gradient(circle at 70% 55%, rgba(0, 229, 204, 0.2), transparent 38%),
        linear-gradient(90deg, #2C2417 0%, #161A22 48%, #0D0F14 100%);
    filter: drop-shadow(0 0 34px rgba(0, 229, 204, 0.65));
    animation: node-unseal 500ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards, temporal-shake 400ms ease-in-out;
}

.paradox-node.is-expanded::before {
    opacity: 0.48;
    background:
        linear-gradient(135deg, transparent 46%, #00E5CC 49%, transparent 52%),
        linear-gradient(45deg, transparent 46%, #D4A24E 49%, transparent 52%),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 4px);
}

.paradox-node.is-expanded::after {
    content: attr(data-node-detail);
    position: absolute;
    left: 50%;
    bottom: clamp(4rem, 12vh, 8rem);
    transform: translateX(-50%);
    width: min(760px, calc(100vw - 3rem));
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 2.1vw, 1.6rem);
    line-height: 1.75;
    text-align: center;
    color: #B8C4D0;
    text-shadow: 0 0 16px rgba(0, 229, 204, 0.36);
    z-index: 7;
    opacity: 0;
    animation: expanded-copy-in 420ms ease 220ms forwards;
}

.paradox-node.is-expanded .paradox-node__frame {
    inset: clamp(1rem, 5vw, 4rem);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    background:
        radial-gradient(circle at center, rgba(13, 15, 20, 0.55), rgba(30, 26, 20, 0.28)),
        repeating-linear-gradient(90deg, rgba(0, 229, 204, 0.08) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(0deg, rgba(212, 162, 78, 0.07) 0 1px, transparent 1px 42px);
}

.paradox-node.is-expanded .paradox-node__icon {
    transform: scale(2.6);
    filter: drop-shadow(0 0 10px rgba(0, 229, 204, 0.9)) drop-shadow(0 0 24px rgba(212, 162, 78, 0.45));
}

.paradox-node.is-expanded .paradox-node__label {
    bottom: auto;
    top: clamp(5rem, 16vh, 9rem);
    font-size: clamp(1.1rem, 3vw, 2.4rem);
    color: #D4A24E;
    text-shadow: 0 0 12px rgba(212, 162, 78, 0.75), 0 0 28px rgba(0, 229, 204, 0.4);
}

body.node-expanded {
    overflow: hidden;
}

@keyframes node-unseal {
    0% {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        transform: translate(-50%, -50%) scale(0.2) rotate(0.001deg);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
    }
}

@keyframes expanded-copy-in {
    0% { opacity: 0; transform: translate(-50%, 14px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}

.paradox-node:hover .paradox-node__frame::before,
.paradox-node:hover .paradox-node__frame::after,
.paradox-node.is-active .paradox-node__frame::before,
.paradox-node.is-active .paradox-node__frame::after {
    opacity: 1;
    animation: fracture-propagate 1.6s ease-in-out infinite alternate;
}

@keyframes fracture-propagate {
    0%   { transform: scale(0.96) rotate(-0.5deg); opacity: 0.7; }
    100% { transform: scale(1.04) rotate(0.5deg); opacity: 1; }
}

/* --- Pixel-art icons via box-shadow --- */

/* Common anchor: a single pixel that emits box-shadow pixels */
.pixel-icon {
    position: relative;
    width: 2px;
    height: 2px;
    background: transparent;
}

/* Hourglass icon — 16x16 grid, 2px pixels */
#icon-hourglass {
    width: 2px;
    height: 2px;
    background: var(--c-cyan);
    box-shadow:
        /* top bar */
        0px -14px 0 var(--c-amber), 2px -14px 0 var(--c-amber), 4px -14px 0 var(--c-amber),
        6px -14px 0 var(--c-amber), 8px -14px 0 var(--c-amber), 10px -14px 0 var(--c-amber),
        12px -14px 0 var(--c-amber), -2px -14px 0 var(--c-amber), -4px -14px 0 var(--c-amber),
        -6px -14px 0 var(--c-amber), -8px -14px 0 var(--c-amber), -10px -14px 0 var(--c-amber),
        -12px -14px 0 var(--c-amber), -14px -14px 0 var(--c-amber), 14px -14px 0 var(--c-amber),
        /* upper funnel */
        -12px -12px 0 var(--c-amber), 12px -12px 0 var(--c-amber),
        -10px -10px 0 var(--c-cyan), -8px -10px 0 var(--c-cyan), -6px -10px 0 var(--c-cyan),
        -4px -10px 0 var(--c-cyan), -2px -10px 0 var(--c-cyan), 0px -10px 0 var(--c-cyan),
        2px -10px 0 var(--c-cyan), 4px -10px 0 var(--c-cyan), 6px -10px 0 var(--c-cyan),
        8px -10px 0 var(--c-cyan), 10px -10px 0 var(--c-cyan),
        -8px -8px 0 var(--c-cyan), -6px -8px 0 var(--c-cyan), -4px -8px 0 var(--c-cyan),
        -2px -8px 0 var(--c-cyan), 0px -8px 0 var(--c-cyan), 2px -8px 0 var(--c-cyan),
        4px -8px 0 var(--c-cyan), 6px -8px 0 var(--c-cyan), 8px -8px 0 var(--c-cyan),
        -6px -6px 0 var(--c-cyan), -4px -6px 0 var(--c-cyan), -2px -6px 0 var(--c-cyan),
        0px -6px 0 var(--c-cyan), 2px -6px 0 var(--c-cyan), 4px -6px 0 var(--c-cyan), 6px -6px 0 var(--c-cyan),
        -4px -4px 0 var(--c-cyan), -2px -4px 0 var(--c-cyan), 0px -4px 0 var(--c-cyan), 2px -4px 0 var(--c-cyan), 4px -4px 0 var(--c-cyan),
        -2px -2px 0 var(--c-cyan), 0px -2px 0 var(--c-cyan), 2px -2px 0 var(--c-cyan),
        /* neck */
        0px 0px 0 var(--c-amber),
        /* lower funnel */
        -2px 2px 0 var(--c-amber), 0px 2px 0 var(--c-amber), 2px 2px 0 var(--c-amber),
        -4px 4px 0 var(--c-amber), -2px 4px 0 var(--c-amber), 0px 4px 0 var(--c-amber), 2px 4px 0 var(--c-amber), 4px 4px 0 var(--c-amber),
        -6px 6px 0 var(--c-amber), -4px 6px 0 var(--c-amber), -2px 6px 0 var(--c-amber),
        0px 6px 0 var(--c-amber), 2px 6px 0 var(--c-amber), 4px 6px 0 var(--c-amber), 6px 6px 0 var(--c-amber),
        -8px 8px 0 var(--c-amber), -6px 8px 0 var(--c-amber), -4px 8px 0 var(--c-amber),
        -2px 8px 0 var(--c-amber), 0px 8px 0 var(--c-amber), 2px 8px 0 var(--c-amber),
        4px 8px 0 var(--c-amber), 6px 8px 0 var(--c-amber), 8px 8px 0 var(--c-amber),
        -10px 10px 0 var(--c-amber), -8px 10px 0 var(--c-amber), -6px 10px 0 var(--c-amber),
        -4px 10px 0 var(--c-amber), -2px 10px 0 var(--c-amber), 0px 10px 0 var(--c-amber),
        2px 10px 0 var(--c-amber), 4px 10px 0 var(--c-amber), 6px 10px 0 var(--c-amber),
        8px 10px 0 var(--c-amber), 10px 10px 0 var(--c-amber),
        -12px 12px 0 var(--c-amber), 12px 12px 0 var(--c-amber),
        /* bottom bar */
        -14px 14px 0 var(--c-amber), -12px 14px 0 var(--c-amber), -10px 14px 0 var(--c-amber),
        -8px 14px 0 var(--c-amber), -6px 14px 0 var(--c-amber), -4px 14px 0 var(--c-amber),
        -2px 14px 0 var(--c-amber), 0px 14px 0 var(--c-amber), 2px 14px 0 var(--c-amber),
        4px 14px 0 var(--c-amber), 6px 14px 0 var(--c-amber), 8px 14px 0 var(--c-amber),
        10px 14px 0 var(--c-amber), 12px 14px 0 var(--c-amber), 14px 14px 0 var(--c-amber);
    animation: icon-drift 5s ease-in-out infinite;
}

/* Loop icon — infinity-loop with glitch break */
#icon-loop {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        /* left lobe */
        -10px -2px 0 var(--c-cyan), -12px -2px 0 var(--c-cyan), -14px 0px 0 var(--c-cyan),
        -12px 2px 0 var(--c-cyan), -10px 2px 0 var(--c-cyan),
        -8px -4px 0 var(--c-cyan), -8px 4px 0 var(--c-cyan),
        -14px -2px 0 var(--c-cyan), -14px 2px 0 var(--c-cyan),
        -12px -4px 0 var(--c-cyan), -10px -4px 0 var(--c-cyan),
        -12px 4px 0 var(--c-cyan), -10px 4px 0 var(--c-cyan),
        -6px -2px 0 var(--c-cyan), -6px 2px 0 var(--c-cyan),
        -4px 0px 0 var(--c-cyan),
        /* glitch break (red) */
        -2px -2px 0 var(--c-red), 0px 0px 0 var(--c-red), 2px 2px 0 var(--c-red),
        -2px 2px 0 var(--c-red), 2px -2px 0 var(--c-red),
        /* right lobe */
        4px 0px 0 var(--c-amber),
        6px -2px 0 var(--c-amber), 6px 2px 0 var(--c-amber),
        8px -4px 0 var(--c-amber), 8px 4px 0 var(--c-amber),
        10px -4px 0 var(--c-amber), 10px 4px 0 var(--c-amber),
        12px -4px 0 var(--c-amber), 12px 4px 0 var(--c-amber),
        10px -2px 0 var(--c-amber), 12px -2px 0 var(--c-amber),
        10px 2px 0 var(--c-amber), 12px 2px 0 var(--c-amber),
        14px 0px 0 var(--c-amber), 14px -2px 0 var(--c-amber), 14px 2px 0 var(--c-amber);
    animation: icon-drift 4s ease-in-out infinite;
}

/* Branch icon — branching timeline tree */
#icon-branch {
    width: 2px;
    height: 2px;
    background: var(--c-amber);
    box-shadow:
        /* trunk vertical */
        0px -14px 0 var(--c-amber), 0px -12px 0 var(--c-amber), 0px -10px 0 var(--c-amber),
        0px -8px 0 var(--c-amber), 0px -6px 0 var(--c-amber), 0px -4px 0 var(--c-amber),
        0px -2px 0 var(--c-amber), 0px 2px 0 var(--c-amber), 0px 4px 0 var(--c-amber),
        0px 6px 0 var(--c-amber), 0px 8px 0 var(--c-amber), 0px 10px 0 var(--c-amber),
        0px 12px 0 var(--c-amber), 0px 14px 0 var(--c-amber),
        /* upper branch right (cyan) */
        2px -4px 0 var(--c-cyan), 4px -6px 0 var(--c-cyan), 6px -6px 0 var(--c-cyan),
        8px -8px 0 var(--c-cyan), 10px -8px 0 var(--c-cyan), 12px -10px 0 var(--c-cyan),
        14px -10px 0 var(--c-cyan),
        /* lower branch left (red glitch) */
        -2px 2px 0 var(--c-red), -4px 4px 0 var(--c-red), -6px 4px 0 var(--c-red),
        -8px 6px 0 var(--c-red), -10px 6px 0 var(--c-red), -12px 8px 0 var(--c-red),
        /* upper branch left (amber fade) */
        -2px -6px 0 var(--c-amber), -4px -6px 0 var(--c-amber), -6px -8px 0 var(--c-amber),
        -8px -8px 0 var(--c-amber), -10px -10px 0 var(--c-amber),
        /* nodes */
        14px -12px 0 var(--c-cyan), -12px 10px 0 var(--c-red), -10px -12px 0 var(--c-amber);
    animation: icon-drift 4.5s ease-in-out infinite;
}

/* Dial icon — time machine dial */
#icon-dial {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        /* outer ring */
        -6px -10px 0 var(--c-amber), -4px -10px 0 var(--c-amber), -2px -10px 0 var(--c-amber),
        0px -10px 0 var(--c-amber), 2px -10px 0 var(--c-amber), 4px -10px 0 var(--c-amber),
        -10px -6px 0 var(--c-amber), 10px -6px 0 var(--c-amber),
        -10px -4px 0 var(--c-amber), 10px -4px 0 var(--c-amber),
        -12px -2px 0 var(--c-amber), 12px -2px 0 var(--c-amber),
        -12px 0px 0 var(--c-amber), 12px 0px 0 var(--c-amber),
        -12px 2px 0 var(--c-amber), 12px 2px 0 var(--c-amber),
        -10px 4px 0 var(--c-amber), 10px 4px 0 var(--c-amber),
        -10px 6px 0 var(--c-amber), 10px 6px 0 var(--c-amber),
        -8px 8px 0 var(--c-amber), -6px 8px 0 var(--c-amber), -4px 8px 0 var(--c-amber),
        -2px 8px 0 var(--c-amber), 0px 8px 0 var(--c-amber), 2px 8px 0 var(--c-amber),
        4px 8px 0 var(--c-amber), 6px 8px 0 var(--c-amber), 8px 8px 0 var(--c-amber),
        -8px -8px 0 var(--c-amber), 8px -8px 0 var(--c-amber),
        -6px 10px 0 var(--c-amber), 6px 10px 0 var(--c-amber),
        /* inner ticks */
        0px -6px 0 var(--c-cyan), 0px 6px 0 var(--c-cyan),
        -6px 0px 0 var(--c-cyan), 6px 0px 0 var(--c-cyan),
        /* pointer needle */
        2px -2px 0 var(--c-cyan), 4px -4px 0 var(--c-cyan), 4px -6px 0 var(--c-cyan),
        /* center pivot */
        0px 0px 0 var(--c-red);
    animation: dial-spin 10s linear infinite;
}

@keyframes dial-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Melt icon — clock with melting hands */
#icon-melt {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        /* clock body outline */
        -4px -10px 0 var(--c-amber), -2px -10px 0 var(--c-amber), 0px -10px 0 var(--c-amber),
        2px -10px 0 var(--c-amber), 4px -10px 0 var(--c-amber),
        -6px -8px 0 var(--c-amber), 6px -8px 0 var(--c-amber),
        -8px -6px 0 var(--c-amber), 8px -6px 0 var(--c-amber),
        -8px -4px 0 var(--c-amber), 8px -4px 0 var(--c-amber),
        -8px -2px 0 var(--c-amber), 8px -2px 0 var(--c-amber),
        -8px 0px 0 var(--c-amber), 8px 0px 0 var(--c-amber),
        -8px 2px 0 var(--c-amber), 8px 2px 0 var(--c-amber),
        -6px 4px 0 var(--c-amber), 6px 4px 0 var(--c-amber),
        -4px 6px 0 var(--c-amber), 4px 6px 0 var(--c-amber),
        /* melting drips */
        -4px 8px 0 var(--c-amber), -2px 8px 0 var(--c-amber),
        -4px 10px 0 var(--c-amber), -4px 12px 0 var(--c-amber),
        2px 8px 0 var(--c-amber), 4px 10px 0 var(--c-amber), 4px 12px 0 var(--c-amber), 4px 14px 0 var(--c-amber),
        /* melting hands (cyan, drooping) */
        -2px -4px 0 var(--c-cyan), 0px -4px 0 var(--c-cyan), 0px -2px 0 var(--c-cyan),
        2px 0px 0 var(--c-cyan), 4px 2px 0 var(--c-cyan),
        /* center */
        0px 0px 0 var(--c-red),
        /* hour markers */
        0px -8px 0 var(--c-cyan), 6px -2px 0 var(--c-cyan), -6px -2px 0 var(--c-cyan), 0px 4px 0 var(--c-cyan);
    animation: icon-drift 6s ease-in-out infinite;
}

@keyframes icon-drift {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(0.5px, -0.5px); }
    50%      { transform: translate(-0.5px, 0.5px); }
    75%      { transform: translate(0.3px, 0.3px); }
}

/* ---------- Vault Section ---------- */

.vault {
    position: relative;
    min-height: 100vh;
    padding: clamp(4rem, 10vh, 7rem) clamp(1rem, 5vw, 3.5rem);
    background:
        radial-gradient(circle at center, #1a1510 0%, #0D0F14 60%, #05070A 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    border-top: 1px solid rgba(0, 229, 204, 0.15);
    z-index: 4;
}

.vault-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(80vmin, 700px);
    height: min(80vmin, 700px);
    background: radial-gradient(circle at center,
        rgba(212, 162, 78, 0.2) 0%,
        rgba(0, 229, 204, 0.1) 30%,
        transparent 70%);
    pointer-events: none;
    animation: vault-aura-pulse 8s ease-in-out infinite;
    z-index: 1;
}

@keyframes vault-aura-pulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}

.vault-door {
    position: relative;
    width: min(64vmin, 520px);
    height: min(64vmin, 520px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vault-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

.vault-ring--1 {
    border: 2px dashed rgba(212, 162, 78, 0.55);
    box-shadow:
        inset 0 0 40px rgba(212, 162, 78, 0.1),
        0 0 30px rgba(212, 162, 78, 0.15);
    animation: ring-spin-cw 60s linear infinite;
}

.vault-ring--2 {
    inset: 14%;
    border: 1px solid rgba(0, 229, 204, 0.45);
    box-shadow:
        inset 0 0 30px rgba(0, 229, 204, 0.15),
        0 0 18px rgba(0, 229, 204, 0.2);
    animation: ring-spin-ccw 40s linear infinite;
}

.vault-ring--3 {
    inset: 28%;
    border: 1px dotted rgba(212, 162, 78, 0.65);
    box-shadow:
        inset 0 0 20px rgba(212, 162, 78, 0.22),
        0 0 15px rgba(212, 162, 78, 0.25);
    animation: ring-spin-cw 24s linear infinite;
}

.vault-ring--3::before,
.vault-ring--3::after {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 1px solid rgba(0, 229, 204, 0.3);
}

.vault-ring--3::after {
    inset: 25%;
    border-color: rgba(212, 162, 78, 0.4);
    border-style: dashed;
}

@keyframes ring-spin-cw {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes ring-spin-ccw {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

.vault-tick {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 14px;
    background: var(--c-amber);
    transform-origin: center calc(50% + min(32vmin, 260px) / 2);
    transform: translate(-50%, -50%) rotate(var(--tick-angle)) translateY(calc(-1 * min(32vmin, 260px) / 2));
    box-shadow: 0 0 6px rgba(212, 162, 78, 0.6);
}

.vault-glyph {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--glyph-angle)) translateY(calc(-1 * min(26vmin, 215px) / 2)) rotate(calc(-1 * var(--glyph-angle)));
    font-family: var(--font-mono);
    font-size: clamp(1.2rem, 2.8vw, 1.8rem);
    color: var(--c-cyan);
    text-shadow: 0 0 8px rgba(0, 229, 204, 0.7);
}

.vault-core {
    position: relative;
    z-index: 5;
    width: min(42vmin, 340px);
    height: min(42vmin, 340px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(212, 162, 78, 0.15) 0%, transparent 40%),
        radial-gradient(circle at center, rgba(22, 26, 34, 0.95) 0%, rgba(13, 15, 20, 0.98) 100%);
    border: 2px solid rgba(0, 229, 204, 0.45);
    box-shadow:
        inset 0 0 30px rgba(0, 229, 204, 0.15),
        0 0 40px rgba(0, 229, 204, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.5rem;
    text-align: center;
}

.vault-core::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    border: 1px dashed rgba(212, 162, 78, 0.5);
    pointer-events: none;
}

.vault-core__label {
    font-family: var(--font-mono);
    font-size: clamp(0.78rem, 1.3vw, 0.95rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c-amber);
    text-shadow: 0 0 4px rgba(212, 162, 78, 0.6);
}

.vault-core__combo {
    font-family: var(--font-mono);
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    letter-spacing: 0.18em;
    color: var(--c-cyan);
    text-shadow:
        0 0 8px var(--c-cyan),
        0 0 20px rgba(0, 229, 204, 0.5);
    animation: combo-flicker 2.4s ease-in-out infinite;
}

@keyframes combo-flicker {
    0%, 100% { opacity: 1; }
    48%      { opacity: 1; }
    50%      { opacity: 0.45; }
    52%      { opacity: 1; }
}

.vault-core__status {
    font-family: var(--font-mono);
    font-size: clamp(0.72rem, 1.2vw, 0.85rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-red);
    text-shadow: 0 0 5px rgba(232, 69, 69, 0.6);
}

.vault-caption {
    position: relative;
    z-index: 3;
    max-width: 640px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem;
}

.vault-caption__title {
    font-family: var(--font-mono);
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--c-cyan);
    text-shadow: 0 0 6px rgba(0, 229, 204, 0.6);
}

.vault-caption__body {
    font-family: var(--font-body);
    font-size: clamp(0.98rem, 1.4vw, 1.12rem);
    line-height: 1.8;
    color: var(--c-past-text);
    font-style: italic;
    opacity: 0.9;
}

.vault-caption__signoff {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1.1vw, 0.82rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-amber);
    opacity: 0.75;
    padding-top: 1rem;
    border-top: 1px dashed rgba(212, 162, 78, 0.3);
}

/* ---------- Footer ---------- */

.sitefoot {
    position: relative;
    z-index: 4;
    padding: 1.8rem 1.5rem;
    background: #05070A;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2.4rem);
    font-family: var(--font-mono);
    font-size: clamp(0.68rem, 1.1vw, 0.82rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(200, 176, 138, 0.62);
    border-top: 1px solid rgba(0, 229, 204, 0.2);
}

.sitefoot__pulse {
    color: var(--c-cyan);
    text-shadow: 0 0 6px var(--c-cyan);
    animation: blink 1.5s steps(2) infinite;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .rift-zone {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }
    .zone--past,
    .zone--future {
        width: 100vw;
        min-height: 60vh;
        position: relative;
        clip-path: none;
        padding: 5rem 1.5rem 3rem;
    }
    .zone--future {
        top: auto;
        left: auto;
        right: auto;
        padding-left: 1.5rem;
    }
    .zone--future .zone-inner {
        margin-left: 0;
    }
    .rift-svg {
        display: none;
    }
    .era {
        grid-template-rows: auto auto;
        height: auto;
        min-height: 100vh;
    }
    .era-half--past {
        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 14px),
            calc(50% + 20px) 100%,
            calc(50% - 20px) calc(100% - 8px),
            0 calc(100% - 14px)
        );
    }
    .era-half--future .era-half__content {
        flex-direction: column;
        align-items: flex-start;
    }
    .paradox-node-wrap {
        width: 150px;
        height: 150px;
        align-self: center;
    }
    .coord-bar {
        gap: 0.5rem;
        font-size: 0.7rem;
    }
    .coord-divider {
        display: none;
    }
}

@media (max-width: 560px) {
    .hero-logo-line--top { font-size: 2.8rem; }
    .hero-logo-line--bottom { font-size: 2rem; }
    .hero-readout {
        gap: 0.8rem;
        font-size: 0.7rem;
    }
    .era-title {
        font-size: 1.5rem;
    }
    .vault-core {
        width: 70vw;
        height: 70vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}