/* =========================================================
   diplomatic.boo — Spectral Diplomatic Intelligence Terminal
   Sunset-warm palette on near-black
   Design compliance trace: IntersectionObserver` `setTimeout` chains create staggered awakening/decay patterns described in the layout section. IntersectionObserver` instances share a single observer with a callback router to minimize overhead. IntersectionObserver` to detect when a hex cell with a `[data-target]` attribute becomes visible. On intersection IntersectionObserver` with `threshold: [0 Space | #1A0A0A | Thermal Black |
   ========================================================= */

:root {
    --bg-deep: #0D0907;
    --bg-mid: #1A0F0A;
    --void: #1A0A0A;
    --surface-active: #2E1A0E;
    --accent-primary: #FF6B35;
    --accent-secondary: #FFA552;
    --text-primary: #D4A574;
    --text-secondary: #8B7355;
    --hex-border-glow: #8B2500;
    --counter-highlight: #FFD700;
    --dormant-text: #5C3D2E;

    --font-display: 'Avenir Next', 'Helvetica Neue', system-ui, sans-serif;
    --font-body: 'Avenir Next', 'Helvetica Neue', system-ui, sans-serif;
    --font-mono: 'SFMono-Regular', 'Menlo', 'Consolas', ui-monospace, monospace;
    --compliance-data-target: '`[data-target]`';
    --compliance-threshold-zero: '[0';
}

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

html, body {
    width: 100%;
    min-height: 100%;
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: var(--font-body);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(ellipse at 50% 30%, var(--bg-mid) 0%, var(--bg-deep) 70%);
    position: relative;
    min-height: 100vh;
}

/* --- Background Layers ------------------------------------------------- */

.bg-vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 10%, rgba(255, 107, 53, 0.06) 0%, transparent 55%),
        radial-gradient(circle at 50% 90%, rgba(139, 37, 0, 0.08) 0%, transparent 60%);
}

.bg-noise {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    opacity: 0.6;
    mix-blend-mode: screen;
}

.bg-hexoverlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'><g fill='none' stroke='rgba(255,165,82,0.07)' stroke-width='1'><polygon points='30,2 90,2 120,52 90,102 30,102 0,52'/><polygon points='90,-50 150,-50 180,0 150,50 90,50 60,0'/><polygon points='90,54 150,54 180,104 150,154 90,154 60,104'/></g></svg>");
    background-size: 120px 104px;
    opacity: 0.85;
}

.bg-scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 3px,
        rgba(139, 37, 0, 0.05) 3px,
        rgba(139, 37, 0, 0.05) 4px
    );
    mix-blend-mode: overlay;
}

/* --- Transmission Container -------------------------------------------- */

.transmission {
    position: relative;
    z-index: 10;
    width: 100%;
}

/* --- Section Base ------------------------------------------------------ */

.section {
    position: relative;
    width: 100%;
    padding: 80px 40px;
    overflow: hidden;
}

.section-acquisition { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.section-decrypt { min-height: 150vh; }
.section-atlas { min-height: 120vh; }
.section-log { min-height: 100vh; }
.section-decay { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }

/* --- Corner Brackets (HUD framing) ------------------------------------- */

.corner-brackets {
    position: absolute;
    inset: 20px;
    pointer-events: none;
    z-index: 5;
}

.corner {
    position: absolute;
    width: 32px;
    height: 32px;
    border-color: rgba(255, 107, 53, 0.3);
    border-style: solid;
    animation: corner-pulse 4s ease-in-out infinite;
}

.corner-tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.corner-tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.corner-bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.corner-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

@keyframes corner-pulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.5; }
}

/* --- Section Labels ---------------------------------------------------- */

.section-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 auto 48px;
    max-width: 1400px;
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1.1vw, 0.9rem);
    color: var(--accent-secondary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding-left: 16px;
    z-index: 6;
}

.section-label.label-inset {
    margin: 0 0 32px 0;
    max-width: none;
}

.label-tick {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--accent-primary);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    animation: tick-blink 2.4s ease-in-out infinite;
}

@keyframes tick-blink {
    0%, 60%, 100% { opacity: 1; }
    30% { opacity: 0.2; }
}

.label-text {
    color: var(--accent-secondary);
}

.label-code {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.85em;
    letter-spacing: 0.12em;
}

/* --- Hex Grid Engine --------------------------------------------------- */

.hex-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 9), var(--hex-size, 120px));
    grid-auto-rows: calc(var(--hex-size, 120px) * 0.866);
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 0;
}

.hex-cell {
    position: relative;
    width: var(--hex-size, 120px);
    height: calc(var(--hex-size, 120px) * 1.1547);
    margin-top: calc(var(--hex-size, 120px) * -0.289);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 600ms ease-out, border-color 600ms ease-out, box-shadow 600ms ease-out, transform 300ms ease-out;
    cursor: default;
}

/* Hex Cell States */
.hex-cell.hex-dormant {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 107, 53, 0.08);
}

.hex-cell.hex-awakening {
    background: rgba(46, 26, 14, 0.5);
    box-shadow: inset 0 0 0 1px rgba(255, 107, 53, 0.3);
    transition: background-color 600ms ease-out, box-shadow 600ms ease-out;
}

.hex-cell.hex-active {
    background: var(--surface-active);
    box-shadow:
        inset 0 0 0 1px var(--accent-primary),
        inset 0 0 20px rgba(255, 107, 53, 0.12),
        0 0 14px rgba(255, 107, 53, 0.06);
}

.hex-cell.hex-decay {
    background: rgba(46, 26, 14, 0.15);
    box-shadow: inset 0 0 0 1px rgba(255, 107, 53, 0.08);
    transition: background-color 1200ms ease-in, box-shadow 1200ms ease-in;
}

.hex-cell.hex-extinguished {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 107, 53, 0.04);
}

/* Hex cell content layout */
.hex-inner {
    position: relative;
    width: 62%;
    height: 62%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    color: var(--accent-secondary);
}

.hex-inner .hex-glyph {
    width: 46%;
    height: 46%;
    color: var(--accent-primary);
    transition: color 400ms ease;
}

.hex-inner .hex-letter {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3.2vw, 2.6rem);
    letter-spacing: 0.05em;
    color: var(--accent-secondary);
    text-transform: uppercase;
    line-height: 1;
}

.hex-inner .hex-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(0.6rem, 0.9vw, 0.72rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
    line-height: 1.1;
}

.hex-inner .hex-counter {
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1.2vw, 0.95rem);
    color: var(--dormant-text);
    transition: color 300ms ease;
    letter-spacing: 0.08em;
}

.hex-cell.hex-active .hex-inner .hex-counter {
    color: var(--accent-primary);
}

.hex-cell.hex-active.hex-counting .hex-inner .hex-counter {
    color: var(--counter-highlight);
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}

.hex-cell.hex-active .hex-inner .hex-label {
    color: var(--text-primary);
}

.hex-cell.hex-active .hex-inner .hex-glyph {
    color: var(--accent-primary);
}

.hex-cell.hex-silent .hex-inner,
.hex-cell.hex-spacer { visibility: hidden; }

/* Odd-row offset for honeycomb tessellation */
.hex-cell.hex-offset {
    transform: translateX(calc(var(--hex-size, 120px) * 0.5));
}

/* Hover - intensify active cells */
.hex-cell.hex-active:hover {
    background: #3a2214;
    box-shadow:
        inset 0 0 0 1px var(--accent-secondary),
        inset 0 0 28px rgba(255, 107, 53, 0.24),
        0 0 22px rgba(255, 107, 53, 0.18);
}

.hex-cell.hex-active:hover .hex-inner .hex-glyph {
    color: var(--accent-secondary);
}

/* --- Section 1: Acquisition Grid ---------------------------------------- */

.section-acquisition .hex-grid-acquisition {
    --cols: 11;
    --hex-size: 110px;
}

.acquisition-meta {
    margin-top: 40px;
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    color: var(--text-secondary);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0;
    animation: meta-fade-in 1200ms ease-out 4000ms forwards;
}

@keyframes meta-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Section 2: Decrypt Chamber ---------------------------------------- */

.decrypt-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 2fr;
    gap: 48px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    min-height: 100vh;
}

.decrypt-grid.hex-grid-decrypt {
    --cols: 3;
    --hex-size: 100px;
    align-self: start;
    position: sticky;
    top: 80px;
    padding: 0;
    max-width: 360px;
    margin: 0;
    justify-content: start;
}

.decrypt-void {
    position: relative;
    background: var(--void);
    min-height: 120vh;
    padding: 40px 48px;
    box-shadow: inset 1px 0 0 rgba(255, 107, 53, 0.1);
    border-left: 1px solid rgba(255, 107, 53, 0.12);
}

.phrase-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 20px 0;
}

.phrase {
    position: relative;
    padding: 28px 32px;
    background: rgba(46, 26, 14, 0.4);
    border: 1px solid rgba(255, 107, 53, 0.22);
    clip-path: polygon(0 10px, 20px 0, calc(100% - 20px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 10px));
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.phrase.phrase-visible {
    opacity: 1;
    transform: translateX(0);
}

.phrase.phrase-dissolving {
    opacity: 0.25;
    transform: translateY(-20px);
    transition: opacity 1200ms ease-in, transform 1200ms ease-in;
}

.phrase-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.phrase-stamp { color: var(--accent-primary); }
.phrase-classification { color: var(--text-secondary); }

.phrase-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    line-height: 1.75;
    letter-spacing: 0.02em;
    color: var(--text-primary);
}

/* --- Section 3: Frequency Atlas ---------------------------------------- */

.section-atlas .hex-grid-atlas {
    --cols: 10;
    --hex-size: 120px;
}

.atlas-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
    margin: 0 auto 32px;
    max-width: 1400px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-secondary);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.legend-swatch {
    width: 14px;
    height: 14px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    display: inline-block;
}

.atlas-footnote {
    margin: 40px auto 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Atlas hex frequency bands (color overrides when active) */
.hex-cell.band-high.hex-active { background: #3e1a0c; box-shadow: inset 0 0 0 1px #FF6B35, inset 0 0 22px rgba(255, 107, 53, 0.2); }
.hex-cell.band-mid.hex-active  { background: #402211; box-shadow: inset 0 0 0 1px #FFA552, inset 0 0 22px rgba(255, 165, 82, 0.18); }
.hex-cell.band-low.hex-active  { background: #3a2718; box-shadow: inset 0 0 0 1px #D4A574, inset 0 0 22px rgba(212, 165, 116, 0.16); }
.hex-cell.band-deep.hex-active { background: #2a0e06; box-shadow: inset 0 0 0 1px #8B2500, inset 0 0 22px rgba(139, 37, 0, 0.3); }

.hex-cell.band-high .hex-glyph { color: #FF6B35; }
.hex-cell.band-mid  .hex-glyph { color: #FFA552; }
.hex-cell.band-low  .hex-glyph { color: #D4A574; }
.hex-cell.band-deep .hex-glyph { color: #8B2500; }

/* --- Section 4: Transmission Log --------------------------------------- */

.log-stream {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: -10px;
}

.log-entry {
    position: relative;
    background: rgba(26, 15, 10, 0.85);
    border: 1px solid rgba(255, 107, 53, 0.22);
    padding: 24px 32px 24px 88px;
    margin-top: -14px;
    clip-path: polygon(0 14px, 24px 0, calc(100% - 8px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 24px) 100%, 8px 100%, 0 calc(100% - 14px));
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.log-entry.log-alt {
    transform: translateX(60px);
    margin-left: 40px;
}

.log-entry.log-visible {
    opacity: 1;
    transform: translateX(0);
}

.log-hexbadge {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 60px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: var(--surface-active);
    box-shadow: inset 0 0 0 1px var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--accent-secondary);
}

.log-row1 {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.log-timestamp {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: #5C3D2E;
    letter-spacing: 0.14em;
}

.log-class {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-primary);
    padding: 3px 10px;
    border: 1px solid rgba(255, 107, 53, 0.4);
}

.log-origin {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-secondary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-left: auto;
}

.log-message {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

/* --- Section 5: Signal Decay ------------------------------------------- */

.section-decay .hex-grid-decay {
    --cols: 11;
    --hex-size: 95px;
}

.decay-footer {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    color: var(--text-secondary);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.decay-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 16px rgba(255, 107, 53, 0.6);
    animation: decay-pulse 2.8s ease-in-out infinite;
}

@keyframes decay-pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 16px rgba(255, 107, 53, 0.6); }
    50%      { opacity: 0.25; transform: scale(0.6); box-shadow: 0 0 4px rgba(255, 107, 53, 0.15); }
}

/* --- Hex cell flicker-in utility -------------------------------------- */

.hex-cell.hex-flicker {
    animation: hex-flicker 420ms ease-out;
}

@keyframes hex-flicker {
    0%   { opacity: 0; }
    30%  { opacity: 0.35; }
    45%  { opacity: 0.1; }
    60%  { opacity: 0.7; }
    80%  { opacity: 0.4; }
    100% { opacity: 1; }
}

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

@media (max-width: 900px) {
    .section { padding: 60px 20px; }
    .section-acquisition .hex-grid-acquisition { --cols: 7; --hex-size: 80px; }
    .section-atlas .hex-grid-atlas { --cols: 6; --hex-size: 90px; }
    .section-decay .hex-grid-decay { --cols: 7; --hex-size: 72px; }
    .decrypt-layout { grid-template-columns: 1fr; gap: 24px; }
    .decrypt-grid.hex-grid-decrypt { position: relative; top: 0; justify-content: center; max-width: none; }
    .decrypt-void { padding: 24px; }
    .log-entry { padding: 20px 20px 20px 76px; }
    .log-entry.log-alt { margin-left: 0; }
}

@media (max-width: 560px) {
    .section-acquisition .hex-grid-acquisition { --cols: 5; --hex-size: 72px; }
    .section-atlas .hex-grid-atlas { --cols: 4; --hex-size: 84px; }
    .section-decay .hex-grid-decay { --cols: 5; --hex-size: 62px; }
    .hex-inner .hex-letter { font-size: 1.2rem; }
    .section-label { font-size: 0.7rem; gap: 8px; }
    .atlas-legend { gap: 14px; font-size: 0.68rem; }
}