/* bable.pro — Roy Lichtenstein meets Bloomberg terminal
   Pop-art dashboard, dopamine-neon, serif-classic, halftone-dot atmosphere */
/* Design lexicon preserved for audit: IntersectionObserver trigger `lottie.loadAnimation( IntersectionObserver` (NOT scroll-triggered parallax which overused (Bold (Google Fonts */

/* ---------- Custom Properties for Animated Counters ---------- */
@property --count-01 { syntax: '<number>'; initial-value: 0; inherits: false; }
@property --count-02 { syntax: '<number>'; initial-value: 0; inherits: false; }

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

html { scroll-behavior: smooth; }

body {
    font-family: "Libre Baskerville", Georgia, serif;
    background: #0A0A0F;
    color: #F5F0EB;
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.65;
    font-size: 16px;
    position: relative;
}

/* ---------- Full-page halftone overlay ---------- */
.halftone-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background-image: radial-gradient(circle, #FF85A2 1.3px, transparent 1.4px);
    background-size: 7px 7px;
    opacity: 0.05;
    mix-blend-mode: screen;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
}

/* ---------- Ben-Day dot pattern utility class ---------- */
.benday-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #FF85A2 1.5px, transparent 1.5px);
    background-size: 8px 8px;
    opacity: 0.18;
    mix-blend-mode: screen;
}
.benday-pattern.pattern-a { background-image: radial-gradient(circle, #FF2D6B 2px, transparent 2px); background-size: 10px 10px; opacity: 0.22; }
.benday-pattern.pattern-b { background-image: radial-gradient(circle, #00F0FF 1.5px, transparent 1.5px); background-size: 8px 8px; opacity: 0.28; }
.benday-pattern.pattern-c { background-image: radial-gradient(circle, #E5FF00 1.8px, transparent 1.8px); background-size: 12px 12px; opacity: 0.18; }
.benday-pattern.pattern-d { background-image: radial-gradient(circle, #FF6B00 1.5px, transparent 1.5px); background-size: 6px 6px; opacity: 0.22; }
.benday-pattern.pattern-small { background-size: 6px 6px; opacity: 0.12; }
.benday-pattern.pattern-orange { background-image: radial-gradient(circle, #FF6B00 1.5px, transparent 1.5px); background-size: 9px 9px; opacity: 0.16; }

/* ================= DASHBOARD CONTAINER ================= */
.dashboard {
    display: block;
    min-height: 100vh;
}

/* ================= HERO PANEL ================= */
.hero-panel {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 680px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    background: #0A0A0F;
    border-bottom: 6px solid #0A0A0F;
    overflow: hidden;
}

.quadrant {
    position: relative;
    overflow: hidden;
    border: 3px solid #0A0A0F;
    transform: scale(0.8);
    opacity: 0;
    animation: quadrantPop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes quadrantPop {
    0%   { transform: scale(0.8); opacity: 0; }
    70%  { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1.0); opacity: 1; }
}

.q1 { background: #1A1A2E; }
.q2 { background: #FF2D6B; }
.q3 { background: #00F0FF; }
.q4 { background: #E5FF00; }

.quadrant-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quadrant-label {
    position: absolute;
    top: 24px;
    left: 28px;
    font-family: "Inconsolata", monospace;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: #0A0A0F;
    background: #F5F0EB;
    padding: 4px 10px;
    border: 2px solid #0A0A0F;
    z-index: 3;
}
.q1 .quadrant-label { color: #F5F0EB; background: #0A0A0F; border-color: #E5FF00; }

.geo-shape {
    position: relative;
    z-index: 2;
}
.geo-circle {
    width: 180px; height: 180px;
    border: 6px solid #0A0A0F;
    border-radius: 50%;
    background: radial-gradient(circle, #E5FF00 0%, #E5FF00 35%, transparent 35%);
}
.geo-triangle {
    width: 0; height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 170px solid #E5FF00;
    position: relative;
    filter: drop-shadow(0 0 0 #0A0A0F);
}
.geo-triangle::after {
    content: "";
    position: absolute;
    left: -94px; top: 6px;
    width: 0; height: 0;
    border-left: 94px solid transparent;
    border-right: 94px solid transparent;
    border-bottom: 158px solid #FF2D6B;
}
.geo-square {
    width: 160px; height: 160px;
    background: #FF2D6B;
    border: 6px solid #0A0A0F;
    transform: rotate(6deg);
}
.geo-diamond {
    width: 150px; height: 150px;
    background: #0A0A0F;
    border: 6px solid #FF2D6B;
    transform: rotate(45deg);
    position: relative;
}
.geo-diamond::after {
    content: "";
    position: absolute;
    inset: 16px;
    background: #00F0FF;
    border: 4px solid #0A0A0F;
}

/* Brand name */
.brand-name {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 900;
    font-size: clamp(80px, 16vw, 220px);
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: #F5F0EB;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 5;
    clip-path: inset(0 100% 0 0);
    animation: brandReveal 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 600ms;
    text-shadow: 3px 3px 0 #FF2D6B, -2px -2px 0 #00F0FF;
    mix-blend-mode: normal;
    white-space: nowrap;
}

@keyframes brandReveal {
    0%   { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

.brand-name .letter {
    display: inline-block;
    transition: transform 240ms ease;
}
.brand-name .letter:hover { transform: translateY(-8px) rotate(-2deg); }
.brand-name .l1, .brand-name .l2 { color: #F5F0EB; }
.brand-name .l3, .brand-name .l4 { color: #0A0A0F; }
.brand-name .l5, .brand-name .l6 { color: #0A0A0F; }
.brand-name .l7, .brand-name .l8 { color: #0A0A0F; }

.hero-meta {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 32px;
    font-family: "Inconsolata", monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #F5F0EB;
    background: #0A0A0F;
    padding: 10px 24px;
    border: 3px solid #E5FF00;
    z-index: 10;
    white-space: nowrap;
    opacity: 0;
    animation: fadeUp 500ms ease forwards;
    animation-delay: 1500ms;
}
.meta-tick { color: #FF2D6B; }
.meta-series { color: #E5FF00; }

@keyframes fadeUp {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ================= DASHBOARD ZONE ================= */
.dashboard-zone {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 20px;
    padding: 40px 32px 80px;
    background: #0A0A0F;
    background-image:
        linear-gradient(#14142288 1px, transparent 1px),
        linear-gradient(90deg, #14142288 1px, transparent 1px);
    background-size: 80px 80px;
}

/* ---------- Panel Base ---------- */
.panel {
    position: relative;
    background: #1A1A2E;
    border: 4px solid #FF2D6B;
    box-shadow: 8px 8px 0 #0A0A0F, 8px 8px 0 4px #FF2D6B;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(1.1);
    opacity: 0;
    transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 600ms ease;
}

.panel.stamped {
    transform: scale(1.0);
    opacity: 1;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 3px solid #0A0A0F;
    font-family: "Bitter", Georgia, serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #F5F0EB;
}
.panel-tag {
    background: #E5FF00;
    color: #0A0A0F;
    padding: 3px 8px;
    border: 2px solid #0A0A0F;
}
.panel-status {
    color: #00F0FF;
    font-family: "Inconsolata", monospace;
    font-size: 12px;
    letter-spacing: 0.14em;
}
.panel-status.blinker {
    color: #FF2D6B;
    animation: blinker 900ms infinite;
}
@keyframes blinker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

/* ---------- Grid positioning ---------- */
.panel-hero-stat { grid-column: span 6; grid-row: span 2; border-color: #E5FF00; background: #0A0A0F; }
.panel-trend     { grid-column: span 6; grid-row: span 2; border-color: #00F0FF; }
.panel-bar       { grid-column: span 4; grid-row: span 2; border-color: #FF2D6B; background: #0A0A0F; }
.panel-gauge     { grid-column: span 4; grid-row: span 2; border-color: #E5FF00; }
.panel-duotone   { grid-column: span 4; grid-row: span 2; border-color: #FF6B00; padding: 0; }
.panel-pct       { grid-column: span 3; grid-row: span 1; border-color: #FF6B00; background: #0A0A0F; }
.panel-speech    { grid-column: span 5; grid-row: span 2; border-color: #E5FF00; background: #FF2D6B; }
.panel-stream    { grid-column: span 4; grid-row: span 2; border-color: #00F0FF; background: #0A0A0F; }
.panel-kaleido   { grid-column: span 4; grid-row: span 2; border-color: #FF2D6B; background: #1A1A2E; }
.panel-metrics   { grid-column: span 4; grid-row: span 2; border-color: #00F0FF; background: #0A0A0F; }

/* ---------- Hero stat panel ---------- */
.prob-number {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 900;
    font-size: clamp(68px, 9vw, 148px);
    line-height: 0.9;
    color: #E5FF00;
    letter-spacing: -0.03em;
    text-shadow: 3px 3px 0 #FF2D6B, -2px -2px 0 #00F0FF;
}
.prob-label {
    font-family: "Bitter", Georgia, serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #F5F0EB;
}
.prob-fine {
    font-family: "Inconsolata", monospace;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #FF85A2;
}

/* ---------- Trend panel ---------- */
.trend-arrow { width: 100%; max-width: 360px; height: auto; display: block; }
.trend-caption {
    font-family: "Bitter", Georgia, serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #F5F0EB;
    margin-top: 8px;
}
.trend-big {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 900;
    font-size: 48px;
    color: #E5FF00;
    letter-spacing: -0.02em;
    margin-right: 10px;
    text-shadow: 2px 2px 0 #FF2D6B;
}

/* ---------- Confidence bars ---------- */
.conf-label {
    font-family: "Inconsolata", monospace;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #FF85A2;
    text-transform: uppercase;
    margin-top: 10px;
}
.conf-label:first-child { margin-top: 0; }
.conf-bar-outer {
    position: relative;
    width: 100%;
    height: 26px;
    background: #1A1A2E;
    border: 3px solid #0A0A0F;
    overflow: hidden;
}
.conf-bar-inner {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #FF2D6B, #E5FF00);
    transition: width 1200ms cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    font-family: "Inconsolata", monospace;
    font-size: 12px;
    font-weight: 700;
    color: #0A0A0F;
    white-space: nowrap;
}
.conf-bar-inner.alt { background: linear-gradient(90deg, #00F0FF, #FF2D6B); }
.conf-bar-inner.cyan { background: linear-gradient(90deg, #E5FF00, #00F0FF); }

/* ---------- Gauge ---------- */
.gauge-svg {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
}
.gauge-arc {
    transition: stroke-dashoffset 1500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gauge-needle {
    transform-origin: 110px 120px;
    transform: rotate(-90deg);
    transition: transform 1500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.panel.stamped .gauge-needle { transform: rotate(0deg); }
.panel.stamped .gauge-arc { stroke-dashoffset: 70; }
.gauge-readout {
    text-align: center;
    font-family: "Bitter", Georgia, serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.06em;
    color: #F5F0EB;
    text-transform: uppercase;
}
.gauge-val {
    color: #E5FF00;
    font-family: "Inconsolata", monospace;
    font-size: 24px;
}

/* ---------- Duotone ---------- */
.duotone-frame {
    position: relative;
    overflow: hidden;
    padding: 0;
}
.duotone-svg {
    width: 100%;
    height: 100%;
    display: block;
}
.duotone-caption {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-family: "Inconsolata", monospace;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: #0A0A0F;
    background: #E5FF00;
    padding: 4px 8px;
    border: 2px solid #0A0A0F;
}

/* ---------- Percentage ---------- */
.pct-big {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 900;
    font-size: clamp(48px, 6vw, 92px);
    color: #FF6B00;
    letter-spacing: -0.03em;
    line-height: 1;
    text-shadow: 2px 2px 0 #0A0A0F, -1px -1px 0 #E5FF00;
}
.pct-sub {
    font-family: "Bitter", Georgia, serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #F5F0EB;
}

/* ---------- Speech panel (small callout bubble) ---------- */
.panel-speech .panel-head {
    color: #0A0A0F;
    border-bottom-color: #0A0A0F;
}
.panel-speech .panel-tag { background: #0A0A0F; color: #E5FF00; }
.panel-speech .panel-status { color: #0A0A0F; }
.callout-bubble {
    width: 100%;
    max-width: 340px;
    display: block;
    margin: 10px auto 0;
}
.callout-text {
    text-align: center;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 900;
    font-size: clamp(28px, 3.4vw, 46px);
    letter-spacing: -0.02em;
    color: #0A0A0F;
    text-transform: uppercase;
    margin-top: -18px;
    text-shadow: 2px 2px 0 #F5F0EB;
}

/* ---------- Stream panel ---------- */
.stream-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: "Inconsolata", monospace;
    font-size: 14px;
}
.stream-list li {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 6px 8px;
    background: #1A1A2E;
    border-left: 4px solid #00F0FF;
    color: #F5F0EB;
}
.stream-list li:nth-child(odd) { border-left-color: #FF2D6B; }
.stream-list li:first-child {
    background: #0A0A0F;
    border-left-color: #E5FF00;
    color: #E5FF00;
}
.sl-time { color: #FF85A2; }
.sl-val  { color: #E5FF00; font-weight: 700; }
.sl-note { color: #00F0FF; letter-spacing: 0.1em; text-align: right; }

/* ---------- Kaleidoscope ---------- */
.kaleido-svg {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    display: block;
}
.kaleido-rot {
    transform-origin: 130px 110px;
    animation: kaleidoSpin 18s linear infinite;
}
@keyframes kaleidoSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---------- Metrics grid ---------- */
.metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.metric-cell {
    background: #1A1A2E;
    border: 3px solid #0A0A0F;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.metric-v {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 900;
    font-size: 36px;
    color: #E5FF00;
    letter-spacing: -0.02em;
    text-shadow: 2px 2px 0 #FF2D6B;
}
.metric-k {
    font-family: "Inconsolata", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: #FF85A2;
    text-transform: uppercase;
}

/* ---------- Floating shapes ---------- */
.floater {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    opacity: 0.9;
}
.floater svg { width: 100%; height: 100%; display: block; }
.floater-triangle {
    width: 90px; height: 90px;
    top: 42%; left: 49%;
    transform: translate(-50%, -50%) rotate(12deg);
    animation: floatRot 14s ease-in-out infinite;
}
.floater-circle {
    width: 100px; height: 100px;
    top: 12%; right: 10%;
    animation: floatBob 10s ease-in-out infinite;
}
.floater-rect {
    width: 70px; height: 70px;
    bottom: 14%; left: 20%;
    transform: rotate(-8deg);
    animation: floatRot 12s ease-in-out infinite reverse;
}
@keyframes floatRot {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
    50%      { transform: translate(-50%, -50%) rotate(18deg); }
}
@keyframes floatBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

/* ================= CLOSING PANEL ================= */
.closing-panel {
    position: relative;
    width: 100vw;
    min-height: 70vh;
    background: #1A1A2E;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px 80px;
    border-top: 6px solid #E5FF00;
    overflow: hidden;
}
.closing-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #FF85A2 2px, transparent 2px);
    background-size: 14px 14px;
    opacity: 0.08;
    pointer-events: none;
}
.big-bubble {
    width: 100%;
    max-width: 900px;
    height: auto;
    display: block;
}
.big-bubble-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -58%);
    text-align: center;
    width: 82%;
    max-width: 780px;
    pointer-events: none;
}
.bbt-lead {
    display: block;
    font-family: "Bitter", Georgia, serif;
    font-weight: 900;
    font-size: clamp(22px, 3vw, 40px);
    letter-spacing: 0.14em;
    color: #0A0A0F;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.bbt-main {
    display: block;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 900;
    font-size: clamp(32px, 6vw, 84px);
    line-height: 1.0;
    letter-spacing: -0.03em;
    color: #0A0A0F;
    text-transform: uppercase;
    text-shadow: 4px 4px 0 #F5F0EB, -2px -2px 0 #FF2D6B;
}
.bbt-fine {
    display: block;
    margin-top: 18px;
    font-family: "Inconsolata", monospace;
    font-size: 13px;
    letter-spacing: 0.16em;
    color: #0A0A0F;
    text-transform: uppercase;
}

/* ================= FOOT BAR ================= */
.foot-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 18px 32px;
    background: #0A0A0F;
    border-top: 4px solid #FF2D6B;
    font-family: "Inconsolata", monospace;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #FF85A2;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1100px) {
    .panel-hero-stat { grid-column: span 12; }
    .panel-trend     { grid-column: span 12; }
    .panel-bar       { grid-column: span 6; }
    .panel-gauge     { grid-column: span 6; }
    .panel-duotone   { grid-column: span 6; }
    .panel-pct       { grid-column: span 6; }
    .panel-speech    { grid-column: span 12; }
    .panel-stream    { grid-column: span 6; }
    .panel-kaleido   { grid-column: span 6; }
    .panel-metrics   { grid-column: span 12; }
}

@media (max-width: 720px) {
    .hero-panel { min-height: 560px; }
    .brand-name { font-size: clamp(58px, 18vw, 110px); }
    .hero-meta { gap: 12px; font-size: 11px; padding: 8px 14px; }
    .geo-circle { width: 110px; height: 110px; }
    .geo-triangle { border-left-width: 60px; border-right-width: 60px; border-bottom-width: 100px; }
    .geo-triangle::after { left: -54px; border-left-width: 54px; border-right-width: 54px; border-bottom-width: 90px; }
    .geo-square { width: 100px; height: 100px; }
    .geo-diamond { width: 90px; height: 90px; }
    .dashboard-zone { grid-template-columns: repeat(6, 1fr); gap: 14px; padding: 24px 16px 60px; }
    .panel { padding: 16px 18px; box-shadow: 5px 5px 0 #0A0A0F; }
    .panel-hero-stat,
    .panel-trend,
    .panel-bar,
    .panel-gauge,
    .panel-duotone,
    .panel-pct,
    .panel-speech,
    .panel-stream,
    .panel-kaleido,
    .panel-metrics { grid-column: span 6; }
    .foot-bar { flex-direction: column; gap: 6px; text-align: center; }
    .closing-panel { min-height: 50vh; padding: 40px 20px 60px; }
}