/* ================================================
   ECONOMICS.DAY - styles.css
   Palette: Market Black #0A0A0A, Gold Standard #D4A830,
            Luxury White #F0E8D0, Crash Red #C03030,
            Bull Green #30A040, Gold Bright #FFD060
   Fonts: Bungee (display), Inter (body), Fira Code (data)
   ================================================ */

:root {
    --black: #0A0A0A;
    --gold: #D4A830;
    --gold-bright: #FFD060;
    --white: #F0E8D0;
    --crash: #C03030;
    --bull: #30A040;
    --gold-40: rgba(212, 168, 48, 0.4);
    --gold-80: rgba(212, 168, 48, 0.8);
    --panel-bg: rgba(10, 10, 10, 0.85);
}

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

html, body {
    background: var(--black);
    color: var(--white);
    font-family: "Inter", sans-serif;
    font-weight: 400;
    line-height: 1.65;
    overflow-x: hidden;
    min-height: 100vh;
}

body {
    font-size: clamp(14px, 1vw, 16px);
}

a, button { font-family: inherit; color: inherit; }

/* ============== MARKET OPEN ============== */
.market-open {
    position: relative;
    min-height: 100vh;
    background: var(--black);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

.bg-pulse {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 60%, rgba(212, 168, 48, 0.15) 0%, transparent 60%);
    animation: pulse-bg 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse-bg {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.bg-glyph {
    position: absolute;
    font-family: "Bungee", sans-serif;
    font-size: clamp(80px, 14vw, 220px);
    color: var(--gold);
    opacity: 0.06;
    pointer-events: none;
    line-height: 1;
}
.glyph-tl { top: 6%; left: 4%; }
.glyph-tr { top: 8%; right: 6%; }
.glyph-bl { bottom: 10%; left: 8%; }
.glyph-br { bottom: 12%; right: 4%; }

/* ----- Tickers ----- */
.ticker {
    position: relative;
    height: 24px;
    overflow: hidden;
    background: var(--black);
    border-top: 1px solid var(--gold-40);
    border-bottom: 1px solid var(--gold-40);
    z-index: 4;
}
.ticker-top { margin-top: 0; }
.ticker-bottom { margin-top: auto; }

.ticker-track {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    height: 100%;
    animation: ticker-scroll 60s linear infinite;
    will-change: transform;
}
.ticker-track-reverse {
    animation: ticker-scroll-rev 75s linear infinite;
}

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

.ticker-item {
    font-family: "Fira Code", monospace;
    font-size: 13px;
    color: var(--gold);
    padding: 0 28px;
    border-right: 1px solid var(--gold-40);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 24px;
}
.ticker-item em {
    font-style: normal;
    color: var(--white);
}
.ticker-item em.up { color: var(--bull); }
.ticker-item em.down { color: var(--crash); }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ----- Hero content ----- */
.market-open-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 6vh clamp(24px, 6vw, 96px);
    position: relative;
    z-index: 3;
}

.session-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Fira Code", monospace;
    font-size: 12px;
    color: var(--gold);
    border: 1px solid var(--gold-40);
    padding: 6px 12px;
    margin-bottom: clamp(20px, 4vh, 40px);
    background: rgba(212, 168, 48, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.session-label .dot {
    width: 8px;
    height: 8px;
    background: var(--gold-bright);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--gold-bright);
    animation: dot-pulse 1.5s ease-in-out infinite;
}
@keyframes dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.hero-title {
    font-family: "Bungee", sans-serif;
    font-weight: 400;
    font-size: clamp(60px, 14vw, 220px);
    line-height: 0.92;
    color: var(--gold);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
    letter-spacing: 0.01em;
    display: flex;
    flex-direction: column;
    margin-bottom: clamp(20px, 3vh, 40px);
}

.hero-line-1 {
    display: block;
    opacity: 0;
    transform: scale(0.9);
    animation: hero-in 700ms cubic-bezier(.22,.8,.32,1) 600ms forwards;
}
.hero-line-2 {
    display: block;
    color: var(--gold-bright);
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: clamp(40px, 12vw, 220px);
    opacity: 0;
    transform: translateY(10px);
    animation: hero-in-2 700ms cubic-bezier(.22,.8,.32,1) 1200ms forwards;
}

@keyframes hero-in {
    to { opacity: 1; transform: scale(1); }
}
@keyframes hero-in-2 {
    to { opacity: 1; transform: translateY(0); }
}

.hero-subline {
    font-family: "Inter", sans-serif;
    font-size: clamp(14px, 1.4vw, 18px);
    color: var(--white);
    max-width: 560px;
    margin-bottom: clamp(20px, 3vh, 36px);
    opacity: 0.85;
    border-left: 2px solid var(--gold);
    padding-left: 14px;
}

.hero-coords {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-family: "Fira Code", monospace;
    font-size: 13px;
    color: var(--gold);
    opacity: 0.9;
}
.hero-coords span {
    border: 1px solid var(--gold-40);
    padding: 4px 10px;
}

/* ============== HUD ZONE ============== */
.hud-zone {
    position: relative;
    background: var(--black);
    padding: clamp(60px, 10vh, 120px) 0 clamp(60px, 10vh, 120px);
    overflow: hidden;
}

.hud-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(212, 168, 48, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 168, 48, 0.06) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
}

.hud-header {
    position: relative;
    z-index: 2;
    padding: 0 clamp(24px, 6vw, 96px);
    margin-bottom: clamp(40px, 8vh, 100px);
    max-width: 1100px;
}
.hud-header .kicker {
    font-family: "Fira Code", monospace;
    font-size: 13px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 12px;
}
.hud-header h2 {
    font-family: "Bungee", sans-serif;
    font-weight: 400;
    font-size: clamp(36px, 6vw, 80px);
    color: var(--gold);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
    line-height: 1;
    letter-spacing: 0.02em;
    margin-bottom: 14px;
}
.hud-header-sub {
    font-size: clamp(15px, 1.2vw, 18px);
    color: var(--white);
    opacity: 0.7;
    max-width: 620px;
}

/* ----- HUD Panels ----- */
.hud-panel {
    position: relative;
    background: var(--panel-bg);
    border: 1px solid var(--gold-40);
    color: var(--white);
    padding: clamp(18px, 2.4vw, 28px);
    z-index: 3;
    transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
    backdrop-filter: blur(2px);
}

.hud-panel:hover {
    border-color: var(--gold-80);
    box-shadow: 0 0 30px rgba(212, 168, 48, 0.18);
}

.hud-panel::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px;
    width: 14px; height: 14px;
    border-top: 2px solid var(--gold);
    border-left: 2px solid var(--gold);
}
.hud-panel::after {
    content: "";
    position: absolute;
    bottom: -1px; right: -1px;
    width: 14px; height: 14px;
    border-bottom: 2px solid var(--gold);
    border-right: 2px solid var(--gold);
}

.hp-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--gold-40);
    padding-bottom: 10px;
    margin-bottom: 14px;
    font-family: "Fira Code", monospace;
    font-size: 11px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.hp-status {
    color: var(--white);
    background: rgba(212, 168, 48, 0.12);
    padding: 3px 8px;
    border: 1px solid var(--gold-40);
}
.hp-status.status-live::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--bull);
    border-radius: 50%;
    margin-right: 6px;
    box-shadow: 0 0 6px var(--bull);
    animation: dot-pulse 1.2s ease-in-out infinite;
}
.hp-status.status-alert {
    color: var(--white);
    background: rgba(192, 48, 48, 0.18);
    border-color: var(--crash);
}

.hp-title {
    font-family: "Bungee", sans-serif;
    font-weight: 400;
    font-size: clamp(20px, 1.8vw, 28px);
    color: var(--gold);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
    line-height: 1.1;
    margin-bottom: 12px;
}
.hp-title-large {
    font-size: clamp(22px, 2.2vw, 34px);
}

.hp-text {
    font-size: clamp(14px, 1vw, 16px);
    color: var(--white);
    opacity: 0.85;
    margin-bottom: 12px;
}
.hp-text-quiet {
    font-family: "Fira Code", monospace;
    font-size: 12px;
    opacity: 0.6;
    margin-bottom: 0;
}

.hp-data { margin-top: 10px; }
.hp-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: "Fira Code", monospace;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(212, 168, 48, 0.18);
}
.hp-row:last-child { border-bottom: none; }
.hp-row span { color: var(--gold); opacity: 0.8; }
.hp-row em { font-style: normal; color: var(--white); }
.hp-row em.up { color: var(--bull); }
.hp-row em.down { color: var(--crash); }
.hp-row-wide span { letter-spacing: 0.08em; }

/* Big number indicator */
.hp-bignum {
    font-family: "Bungee", sans-serif;
    font-weight: 400;
    font-size: clamp(64px, 9vw, 120px);
    color: var(--gold-bright);
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6);
    line-height: 0.9;
    margin: 8px 0 4px;
}
.hp-bignum-pct {
    font-size: 0.45em;
    color: var(--gold);
    margin-left: 4px;
}
.hp-bignum-label {
    font-family: "Fira Code", monospace;
    font-size: 12px;
    color: var(--gold);
    letter-spacing: 0.16em;
    margin-bottom: 14px;
}
.hp-bar {
    position: relative;
    height: 6px;
    background: rgba(212, 168, 48, 0.15);
    margin-bottom: 24px;
}
.hp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 100%);
}
.hp-bar-tick {
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
    font-family: "Fira Code", monospace;
    font-size: 10px;
    color: var(--gold);
    white-space: nowrap;
}

/* Mini chart */
.hp-chart {
    margin: 6px 0 12px;
    height: 100px;
    border: 1px solid rgba(212, 168, 48, 0.15);
    background:
        linear-gradient(rgba(212, 168, 48, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 168, 48, 0.06) 1px, transparent 1px);
    background-size: 30px 25px;
}
.hp-chart svg {
    width: 100%;
    height: 100%;
    display: block;
}
.chart-line {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: chart-draw 2.5s ease-out forwards;
}
@keyframes chart-draw {
    to { stroke-dashoffset: 0; }
}
.chart-area {
    opacity: 0;
    animation: chart-fade 1.5s ease-out 1.5s forwards;
}
@keyframes chart-fade {
    to { opacity: 1; }
}

/* Collage */
.hp-collage { padding: 0; }
.hp-collage .hp-head { padding: 16px 18px 10px; margin-bottom: 0; }

.collage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 110px;
    gap: 0;
}
.collage-cell {
    border: 1px solid rgba(212, 168, 48, 0.18);
    margin: -1px 0 0 -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    color: var(--gold);
}
.cc-stamp {
    font-family: "Bungee", sans-serif;
    font-size: 14px;
    color: var(--gold);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    line-height: 1.1;
    background: repeating-linear-gradient(45deg,
        rgba(212, 168, 48, 0.04) 0,
        rgba(212, 168, 48, 0.04) 6px,
        transparent 6px,
        transparent 12px);
    border: 2px solid var(--gold-40);
    border-style: dashed;
}
.cc-stamp-2 { font-size: 12px; }
.cc-coin svg { width: 70%; height: 70%; }
.cc-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 14px;
}
.mini-bar {
    flex: 1;
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
}
.cc-quote {
    font-family: "Inter", serif;
    font-style: italic;
    font-size: 13px;
    color: var(--white);
    line-height: 1.35;
}
.cc-icon svg { width: 70%; height: 70%; }

/* Dashboard */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 4px;
}
.dash-cell {
    border: 1px solid rgba(212, 168, 48, 0.2);
    padding: 12px;
    background: rgba(212, 168, 48, 0.03);
}
.dash-label {
    font-family: "Fira Code", monospace;
    font-size: 10px;
    color: var(--gold);
    letter-spacing: 0.14em;
    margin-bottom: 6px;
}
.dash-value {
    font-family: "Bungee", sans-serif;
    font-size: clamp(28px, 3vw, 40px);
    color: var(--gold-bright);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
    line-height: 1;
    margin-bottom: 8px;
}
.dash-value span {
    font-size: 0.5em;
    color: var(--gold);
    margin-left: 2px;
}
.dash-bar {
    height: 4px;
    background: rgba(212, 168, 48, 0.15);
}
.dash-bar-fill {
    height: 100%;
    transition: width 1s ease-out;
}

/* Pull quote */
.hp-pullquote {
    padding: clamp(28px, 3vw, 44px);
}
.pullquote-mark {
    font-family: "Bungee", sans-serif;
    font-size: clamp(80px, 10vw, 140px);
    color: var(--gold);
    line-height: 0.6;
    display: block;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}
.pullquote-text {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 1.8vw, 26px);
    line-height: 1.4;
    color: var(--white);
    margin: -10px 0 16px;
}
.pullquote-author {
    font-family: "Fira Code", monospace;
    font-size: 12px;
    color: var(--gold);
    letter-spacing: 0.1em;
}

/* ----- Asymmetric HUD layout ----- */
.hp-1 { width: clamp(280px, 36vw, 460px); margin-left: clamp(24px, 6vw, 96px); margin-top: 0; }
.hp-2 { width: clamp(260px, 30vw, 380px); margin-left: auto; margin-right: clamp(40px, 10vw, 160px); margin-top: -8vh; }
.hp-3 { width: clamp(280px, 38vw, 480px); margin-left: clamp(60px, 16vw, 220px); margin-top: 8vh; }
.hp-4 { width: clamp(300px, 42vw, 540px); margin-left: auto; margin-right: clamp(24px, 6vw, 96px); margin-top: -4vh; }
.hp-5 { width: clamp(280px, 36vw, 440px); margin-left: clamp(120px, 22vw, 320px); margin-top: 10vh; }
.hp-6 { width: clamp(300px, 40vw, 500px); margin-left: auto; margin-right: clamp(80px, 14vw, 200px); margin-top: -6vh; }
.hp-7 { width: clamp(300px, 44vw, 580px); margin-left: clamp(40px, 10vw, 160px); margin-top: 6vh; }
.hp-8 { width: clamp(300px, 38vw, 480px); margin-left: auto; margin-right: clamp(60px, 12vw, 180px); margin-top: 4vh; }

.hud-panel + .hud-panel { margin-top: clamp(28px, 5vh, 70px); }
.hp-1 { margin-top: 0; }
.hp-2 { margin-top: clamp(28px, 5vh, 70px); }

/* HUD entrance stagger */
.hud-panel {
    opacity: 0;
    transform: translateY(20px);
}
.hud-panel.is-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

/* ============== KLIMT ZONE ============== */
.klimt-zone {
    position: relative;
    min-height: 100vh;
    background: var(--black);
    overflow: hidden;
    padding: clamp(60px, 10vh, 120px) clamp(24px, 6vw, 96px);
}

.klimt-pattern {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg,
            var(--gold) 0,
            var(--gold) 2px,
            var(--black) 2px,
            var(--black) 14px),
        repeating-linear-gradient(-45deg,
            rgba(212, 168, 48, 0.6) 0,
            rgba(212, 168, 48, 0.6) 1px,
            transparent 1px,
            transparent 8px),
        radial-gradient(circle at 30% 40%, rgba(255, 208, 96, 0.18) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(212, 168, 48, 0.22) 0%, transparent 50%);
    background-size: 28px 28px, 16px 16px, 100% 100%, 100% 100%;
    background-position: 0 0;
    animation: klimt-shift 30s linear infinite;
}
@keyframes klimt-shift {
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    to { background-position: 280px 0, -160px 0, 0 0, 0 0; }
}

.klimt-content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "kicker kicker"
        "title  motifs"
        "panel  motifs";
    gap: clamp(24px, 4vw, 60px);
    align-items: start;
}

.klimt-kicker {
    grid-area: kicker;
    font-family: "Fira Code", monospace;
    font-size: 13px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--panel-bg);
    border: 1px solid var(--gold-40);
    padding: 8px 14px;
    display: inline-block;
    justify-self: start;
}

.klimt-title {
    grid-area: title;
    font-family: "Bungee", sans-serif;
    font-weight: 400;
    font-size: clamp(48px, 8vw, 110px);
    color: var(--gold-bright);
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 168, 48, 0.4);
    line-height: 0.95;
    letter-spacing: 0.02em;
}

.klimt-motifs {
    grid-area: motifs;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 1.4vw, 16px);
    background: rgba(255, 248, 220, 0.92);
    border: 2px solid var(--gold);
    padding: clamp(12px, 1.6vw, 22px);
}

.motif {
    aspect-ratio: 1;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gold-40);
    transition: transform 250ms ease, background 250ms ease;
    cursor: pointer;
}
.motif:hover {
    transform: rotate(15deg);
    background: var(--gold-bright);
}
.motif svg { width: 75%; height: 75%; }

.klimt-panel {
    grid-area: panel;
    background: var(--white);
    color: var(--black);
    padding: clamp(20px, 3vw, 36px);
    border: 2px solid var(--gold);
    box-shadow: 8px 8px 0 var(--gold);
}
.klimt-text {
    font-family: "Inter", serif;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.7;
    color: var(--black);
    font-weight: 500;
}

/* ============== GLITCH ZONE ============== */
.glitch-zone {
    position: relative;
    min-height: 80vh;
    background: var(--black);
    overflow: hidden;
    padding: clamp(60px, 10vh, 120px) clamp(24px, 6vw, 96px);
    display: flex;
    align-items: center;
}

.glitch-noise {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg,
            rgba(192, 48, 48, 0.04) 0,
            rgba(192, 48, 48, 0.04) 1px,
            transparent 1px,
            transparent 3px),
        repeating-linear-gradient(0deg,
            rgba(212, 168, 48, 0.05) 0,
            rgba(212, 168, 48, 0.05) 2px,
            transparent 2px,
            transparent 5px);
    pointer-events: none;
    opacity: 0.7;
}

.glitch-bands {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.glitch-band {
    position: absolute;
    left: 0;
    width: 100%;
    background: rgba(192, 48, 48, 0.18);
    border-top: 1px solid rgba(212, 168, 48, 0.4);
    border-bottom: 1px solid rgba(212, 168, 48, 0.4);
}
.gb-1 { top: 18%; height: 3px; animation: band-shift 3s steps(8) infinite; }
.gb-2 { top: 44%; height: 4px; animation: band-shift 5s steps(12) infinite reverse; }
.gb-3 { top: 67%; height: 2px; animation: band-shift 2.4s steps(10) infinite; }
.gb-4 { top: 82%; height: 5px; animation: band-shift 4s steps(7) infinite reverse; }

@keyframes band-shift {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    20% { transform: translateX(-30px); opacity: 0.9; }
    40% { transform: translateX(40px); opacity: 0.4; }
    60% { transform: translateX(-15px); opacity: 0.8; }
    80% { transform: translateX(20px); opacity: 0.5; }
}

.glitch-content {
    position: relative;
    z-index: 2;
    max-width: 920px;
}
.glitch-kicker {
    font-family: "Fira Code", monospace;
    font-size: 13px;
    color: var(--crash);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 16px;
    border-left: 3px solid var(--crash);
    padding-left: 12px;
}

.glitch-title {
    font-family: "Bungee", sans-serif;
    font-weight: 400;
    font-size: clamp(48px, 10vw, 140px);
    color: var(--white);
    line-height: 0.95;
    letter-spacing: 0.02em;
    position: relative;
    margin-bottom: 14px;
}
.glitch-title::before,
.glitch-title::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}
.glitch-title::before {
    color: var(--crash);
    transform: translate(-4px, 0);
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    animation: glitch-shift-1 2s steps(2) infinite;
}
.glitch-title::after {
    color: var(--gold);
    transform: translate(4px, 0);
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    animation: glitch-shift-2 2s steps(2) infinite;
}

.glitch-zone.is-active .glitch-title::before { animation-duration: 0.4s; }
.glitch-zone.is-active .glitch-title::after { animation-duration: 0.4s; }
.glitch-zone.is-active { animation: zone-vibrate 500ms steps(8); }

@keyframes glitch-shift-1 {
    0%, 100% { transform: translate(-4px, 0); }
    25% { transform: translate(-7px, 0); }
    50% { transform: translate(-2px, 0); }
    75% { transform: translate(-6px, 0); }
}
@keyframes glitch-shift-2 {
    0%, 100% { transform: translate(4px, 0); }
    25% { transform: translate(7px, 0); }
    50% { transform: translate(2px, 0); }
    75% { transform: translate(6px, 0); }
}
@keyframes zone-vibrate {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    60% { transform: translateX(-1px); }
    80% { transform: translateX(2px); }
}

.glitch-sub {
    font-family: "Fira Code", monospace;
    font-size: clamp(14px, 1.4vw, 20px);
    color: var(--gold);
    letter-spacing: 0.14em;
    margin-bottom: clamp(24px, 4vh, 40px);
    position: relative;
}
.glitch-sub::before {
    content: attr(data-text);
    position: absolute;
    left: 0; top: 0;
    color: var(--crash);
    transform: translate(-2px, 0);
    opacity: 0.7;
    clip-path: polygon(0 30%, 100% 30%, 100% 60%, 0 60%);
}

.glitch-readout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border: 1px solid var(--crash);
    background: rgba(192, 48, 48, 0.06);
    max-width: 540px;
}
.readout-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-right: 1px solid rgba(192, 48, 48, 0.3);
    border-bottom: 1px solid rgba(192, 48, 48, 0.3);
    font-family: "Fira Code", monospace;
    font-size: 13px;
}
.readout-row:nth-child(2n) { border-right: none; }
.readout-row:nth-last-child(-n+2) { border-bottom: none; }
.readout-row span { color: var(--gold); letter-spacing: 0.1em; }
.readout-row em { font-style: normal; }
.readout-row em.up { color: var(--crash); }
.readout-row em.down { color: var(--crash); }

.glitch-zone.is-active .glitch-band {
    height: 8px !important;
    background: rgba(192, 48, 48, 0.4);
}

/* Crash flash overlay */
.crash-flash {
    position: fixed;
    inset: 0;
    background: var(--white);
    opacity: 0;
    pointer-events: none;
    z-index: 999;
    mix-blend-mode: difference;
}
.crash-flash.is-on {
    animation: crash-flash 100ms ease-out;
}
@keyframes crash-flash {
    0% { opacity: 0; }
    50% { opacity: 0.7; }
    100% { opacity: 0; }
}

/* ============== CLOSING BELL ============== */
.closing-bell {
    position: relative;
    min-height: 50vh;
    background: var(--black);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(40px, 6vh, 80px) clamp(24px, 6vw, 96px);
    text-align: center;
}

.bell-line {
    width: clamp(120px, 24vw, 320px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin-bottom: clamp(24px, 4vh, 40px);
}

.bell-content {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bell-kicker {
    font-family: "Fira Code", monospace;
    font-size: 13px;
    color: var(--gold);
    letter-spacing: 0.16em;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.bell-title {
    font-family: "Bungee", sans-serif;
    font-weight: 400;
    font-size: clamp(40px, 7vw, 90px);
    color: var(--gold);
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
    letter-spacing: 0.04em;
    line-height: 1;
    margin-bottom: 18px;
}

.bell-text {
    font-family: "Inter", sans-serif;
    font-size: clamp(14px, 1.2vw, 17px);
    color: var(--white);
    opacity: 0.7;
    margin-bottom: clamp(28px, 4vh, 44px);
    max-width: 480px;
}

.bell-stamp {
    border: 1px solid var(--gold-40);
    padding: 16px 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(212, 168, 48, 0.03);
}
.stamp-line {
    font-family: "Bungee", sans-serif;
    font-size: clamp(16px, 1.4vw, 22px);
    color: var(--gold);
    letter-spacing: 0.04em;
}
.stamp-line.stamp-small {
    font-family: "Fira Code", monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    opacity: 0.7;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 900px) {
    .hp-1, .hp-2, .hp-3, .hp-4, .hp-5, .hp-6, .hp-7, .hp-8 {
        width: calc(100% - 32px);
        margin-left: 16px;
        margin-right: 16px;
        margin-top: clamp(20px, 4vh, 36px);
    }
    .klimt-content {
        grid-template-columns: 1fr;
        grid-template-areas:
            "kicker"
            "title"
            "motifs"
            "panel";
    }
    .collage-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 90px;
    }
    .dash-grid {
        grid-template-columns: 1fr;
    }
    .glitch-readout {
        grid-template-columns: 1fr;
    }
    .readout-row { border-right: none; }
    .hero-line-2 { margin-left: 0; }
}

@media (max-width: 520px) {
    .hero-coords { gap: 8px; }
    .hero-coords span { font-size: 11px; padding: 3px 8px; }
    .ticker-item { font-size: 11px; padding: 0 18px; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .ticker-track,
    .ticker-track-reverse,
    .klimt-pattern,
    .glitch-band,
    .bg-pulse,
    .chart-line,
    .chart-area,
    .glitch-title::before,
    .glitch-title::after {
        animation: none !important;
    }
}