/* prototype.report -- Corporate Data Report */
:root {
    --bg: #FAFAFA;
    --primary: #1A1A1A;
    --body: #2D2D2D;
    --secondary: #6B6B6B;
    --tertiary: #A0A0A0;
    --rule: #D1D1D1;
    --fill: #E8E8E8;
    --accent: #C62828;
    --table-mono: #3A3A3A;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.75; color: var(--body); background: var(--bg); overflow-x: hidden; }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--primary); z-index: 200; transition: width 0.1s; }

/* Top navigation */
.top-nav { position: fixed; top: 2px; left: 0; right: 0; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; background: var(--bg); z-index: 100; opacity: 0; transform: translateY(-20px); transition: opacity 0.5s, transform 0.5s; }
.top-nav.visible { opacity: 1; transform: translateY(0); }
.wordmark { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary); }
.section-indicator { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary); }

/* Title block */
.title-block { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.title-text { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary); opacity: 0; animation: fade-in 0.8s ease-out 0.3s forwards; }
.title-rule { width: 0; height: 1px; background: var(--primary); margin: 16px 0; animation: rule-expand 0.6s ease-out 1.1s forwards; }
.title-sub { font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 14px; color: var(--secondary); opacity: 0; animation: fade-in 0.5s ease-out 1.7s forwards; }

@keyframes fade-in { to { opacity: 1; } }
@keyframes rule-expand { to { width: 200px; } }

/* Report content */
.report-content { max-width: 1140px; margin: 0 auto; padding: 0 40px 80px; }

/* Section */
.report-section { position: relative; padding: 80px 0; opacity: 0; transform: translateY(30px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.report-section.visible { opacity: 1; transform: translateY(0); }

.section-watermark { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 120px; color: var(--primary); opacity: 0; position: absolute; top: 40px; left: 0; line-height: 1; transition: opacity 0.3s ease-out; }
.report-section.visible .section-watermark { opacity: 0.07; }

.section-title { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 32px; color: var(--primary); letter-spacing: -0.01em; position: relative; z-index: 1; }
.section-rule { width: 100%; height: 1px; background: var(--rule); margin: 16px 0 24px; }

.body-text { color: var(--body); margin-bottom: 1.5em; }
.body-text:last-child { margin-bottom: 0; }

/* Major rule between sections */
.major-rule { border: none; height: 1px; background: var(--rule); margin: 0; }

/* Metric blocks */
.metric-row { display: flex; gap: 60px; margin-top: 40px; flex-wrap: wrap; }
.metric-block { text-align: left; }
.metric-number { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 72px; color: var(--primary); line-height: 1; display: block; }
.metric-label { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--secondary); display: block; margin-top: 4px; }

/* Split content (text + chart) */
.split-content { display: flex; gap: 40px; align-items: flex-start; }
.split-text { flex: 3; }
.split-chart { flex: 2; }

/* Key findings */
.key-finding { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0 16px 16px; border-left: 3px solid var(--accent); margin-top: 24px; }
.red-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 8px; }
.finding-text { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 15px; color: var(--primary); line-height: 1.6; }

/* Charts */
.line-chart, .bar-chart { width: 100%; height: auto; display: block; }
.chart-line { stroke-dasharray: 600; stroke-dashoffset: 600; }
.report-section.visible .chart-line { animation: draw-chart 1.5s ease-in-out forwards; }
@keyframes draw-chart { to { stroke-dashoffset: 0; } }

.bar-chart-container { margin-top: 24px; max-width: 500px; }
.bar { transition: none; }

/* Data table */
.data-table-wrap { margin-top: 24px; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table thead tr { background: var(--primary); }
.data-table th { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bg); padding: 12px 16px; text-align: left; }
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--rule); color: var(--body); }
.data-table tbody tr:nth-child(even) { background: var(--fill); }
.data-table .mono { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--table-mono); }

/* Grid-line background motif */
.bar-chart-container, .split-chart {
    background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, #E8E8E8 39px, #E8E8E8 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, #E8E8E8 39px, #E8E8E8 40px);
    background-size: 100% 100%;
    -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
    mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
    padding: 16px;
}

/* Footer */
.report-footer { max-width: 1140px; margin: 0 auto; padding: 80px 40px 60px; text-align: center; }
.footer-rule { border: none; height: 1px; background: var(--rule); margin-bottom: 24px; }
.footer-text { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary); }
.footer-date { font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 13px; color: var(--secondary); margin-top: 4px; }

@media (max-width: 768px) {
    .report-content { padding: 0 20px 60px; }
    .top-nav { padding: 0 20px; }
    .section-watermark { font-size: 72px; }
    .section-title { font-size: 24px; }
    .metric-number { font-size: 48px; }
    .metric-row { gap: 30px; }
    .split-content { flex-direction: column; }
    .split-text, .split-chart { flex: 1; width: 100%; }
    .data-table { font-size: 10px; }
    .data-table th, .data-table td { padding: 8px 10px; }
}