/* =====================================================================
   oning.stream — Street-Tech HUD Broadcast
   Burgundy-Cream Visor Overlay
   ===================================================================== */

:root {
    --c-burgundy-deep: #3A0618;
    --c-burgundy-edge: #1A030C;
    --c-burgundy-mid: #6B1D2A;
    --c-burgundy-bright: #8A1538;
    --c-burgundy-shadow: #2E0514;
    --c-burgundy-grid: #5A0A1A;
    --c-rose-deep: #4A0A20;
    --c-cream: #F5EDE0;
    --c-parchment: #E8D5C4;
    --c-gold: #C9A07A;
    --c-teal: #2A4A4A;
    --c-ember: #D4622A;

    --bg-hue: var(--c-burgundy-deep);
    --bg-edge: var(--c-burgundy-edge);

    --grid-line: rgba(90, 10, 26, 0.08);

    --font-display: "Playfair Display", "Times New Roman", serif;
    --font-sub: "Cormorant Garamond", "Georgia", serif;
    --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "Courier New", monospace;
}

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

html, body {
    background: radial-gradient(ellipse at center, var(--bg-hue) 0%, var(--bg-edge) 95%);
    color: var(--c-cream);
    font-family: var(--font-body);
    overflow-x: hidden;
    transition: background 1.6s ease;
    min-height: 100vh;
}

body {
    position: relative;
}

/* =================== GRAIN LAYER =================== */
.grain-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.93  0 0 0 0 0.88  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
    opacity: 0.07;
    mix-blend-mode: overlay;
}

.svg-defs { position: absolute; width: 0; height: 0; }

/* =================== VISOR GRID =================== */
.visor-grid {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    pointer-events: none;
    z-index: 2;
}
.visor-grid > span {
    border-right: 1px solid var(--grid-line);
}
.visor-grid > span:first-child { border-left: 1px solid var(--grid-line); }
.visor-grid::before, .visor-grid::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: var(--grid-line);
}
.visor-grid::before { top: 8vh; }
.visor-grid::after  { bottom: 6vh; }

/* =================== CORNER REGISTRATION MARKS =================== */
.reg-mark {
    position: fixed;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    animation: reg-breathe 4s ease-in-out infinite;
}
.reg-cross { width: 22px; height: 22px; flex: 0 0 22px; }
.reg-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--c-burgundy-bright);
    text-transform: uppercase;
}
.reg-tl { top: 14px; left: 18px; }
.reg-tr { top: 14px; right: 18px; flex-direction: row-reverse; }
.reg-tr .reg-label { color: var(--c-cream); }
.reg-bl { bottom: 14px; left: 18px; }
.reg-bl .reg-label { color: var(--c-gold); }
.reg-br { bottom: 14px; right: 18px; flex-direction: row-reverse; }
.reg-br .reg-label { color: var(--c-ember); }

@keyframes reg-breathe {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.78; }
}

/* =================== BROADCAST HEADER =================== */
.broadcast-header {
    position: fixed;
    top: 4vh;
    left: 4vw;
    z-index: 40;
    pointer-events: none;
    max-width: 38vw;
}
.brand-mark {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.brand-prefix {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--c-gold);
    text-transform: uppercase;
}
.brand-name {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(28px, 3.4vw, 44px);
    color: var(--c-cream);
    letter-spacing: -0.03em;
    text-transform: lowercase;
    text-shadow: 1px 1px 0 var(--c-burgundy-bright);
    line-height: 1;
}
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--c-cream);
    text-transform: uppercase;
    background: rgba(58, 6, 24, 0.55);
    border: 1px solid var(--c-burgundy-bright);
    padding: 4px 10px;
    width: fit-content;
}
.live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--c-ember);
    box-shadow: 0 0 8px var(--c-ember);
    animation: live-pulse 1.8s ease-in-out infinite;
}
.live-label { color: var(--c-ember); font-weight: 700; }
.live-meta { color: var(--c-parchment); opacity: 0.75; }

@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}

/* =================== TELEMETRY RAIL =================== */
.telemetry-rail {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: 6.5vw;
    min-width: 78px;
    max-width: 110px;
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 9vh 0 8vh;
    border-left: 1px solid rgba(138, 21, 56, 0.25);
    background: linear-gradient(to left, rgba(26, 3, 12, 0.6), transparent);
    pointer-events: auto;
}
.rail-top, .rail-bottom {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.rail-icon { width: 18px; height: 18px; }
.rail-id {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    color: var(--c-gold);
    text-transform: uppercase;
}

.rail-glyphs {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.6vh;
    margin: 0;
    padding: 0;
}
.rail-glyph {
    appearance: none;
    background: none;
    border: 1px solid transparent;
    color: var(--c-parchment);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    padding: 6px 4px;
    cursor: pointer;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 64px;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.rail-glyph:hover {
    color: var(--c-ember);
    border-color: rgba(212, 98, 42, 0.4);
    background: rgba(212, 98, 42, 0.06);
}
.rail-glyph.active {
    color: var(--c-cream);
    border-color: var(--c-burgundy-bright);
    background: rgba(138, 21, 56, 0.18);
}
.rail-glyph.active .g-num { color: var(--c-ember); }
.g-num {
    font-weight: 700;
    color: var(--c-gold);
    font-size: 13px;
    letter-spacing: 0.05em;
}
.g-name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 8.5px;
    opacity: 0.85;
}

.rail-stream {
    flex: 0 0 auto;
    height: 28vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px dashed rgba(201, 160, 122, 0.18);
    border-bottom: 1px dashed rgba(201, 160, 122, 0.18);
}
.rail-stream::before, .rail-stream::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 30px;
    pointer-events: none;
    z-index: 2;
}
.rail-stream::before {
    top: 0;
    background: linear-gradient(to bottom, var(--c-burgundy-edge), transparent);
}
.rail-stream::after {
    bottom: 0;
    background: linear-gradient(to top, var(--c-burgundy-edge), transparent);
}
.stream-line {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--c-parchment);
    opacity: 0.75;
    white-space: nowrap;
    flex-shrink: 0;
}

/* =================== ANNOTATION BAR =================== */
.annotation-bar {
    position: fixed;
    bottom: 0; left: 0; right: 6.5vw;
    height: 6vh;
    min-height: 44px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 4vw 0 4vw;
    border-top: 1px solid rgba(201, 160, 122, 0.2);
    background: linear-gradient(to top, rgba(26, 3, 12, 0.85), rgba(26, 3, 12, 0.05));
    pointer-events: none;
    overflow: hidden;
}
.annotation-prefix {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--c-gold);
    text-transform: uppercase;
    flex-shrink: 0;
}
.annotation-text {
    font-family: var(--font-sub);
    font-style: italic;
    font-size: 16px;
    color: var(--c-cream);
    letter-spacing: 0.04em;
    transition: opacity 0.4s ease;
    flex: 1 1 auto;
    animation: anno-breathe 5s ease-in-out infinite;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.annotation-text.swap {
    opacity: 0;
}
.annotation-suffix {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--c-ember);
    text-transform: uppercase;
    flex-shrink: 0;
}
@keyframes anno-breathe {
    0%, 100% { letter-spacing: 0.02em; }
    50%      { letter-spacing: 0.08em; }
}

/* =================== PANELS =================== */
.panels {
    position: relative;
    z-index: 5;
    margin-left: 0;
    margin-right: 6.5vw;
    padding-bottom: 6vh;
}

.panel {
    position: relative;
    height: 100vh;
    min-height: 720px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: center center;
}
.panel.is-fading {
    opacity: 0.4;
    transform: scale(0.96);
}
.panel.is-active {
    opacity: 1;
    transform: scale(1);
}

.panel-content {
    position: relative;
    z-index: 6;
    width: 100%;
    max-width: 56vw;
    padding: 14vh 6vw 10vh 8vw;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.content-cluster-2 { padding-left: 14vw; max-width: 60vw; }
.content-cluster-3 { padding-left: 6vw; max-width: 64vw; }
.content-cluster-4 { padding-left: 10vw; max-width: 60vw; }
.content-cluster-5 { padding-left: 6vw; max-width: 70vw; padding-top: 12vh; padding-bottom: 8vh; }
.content-cluster-6 { padding-left: 12vw; max-width: 56vw; }

.hud-stamp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--c-gold);
    text-transform: uppercase;
    width: fit-content;
    border: 1px solid rgba(201, 160, 122, 0.3);
    padding: 5px 12px;
    background: rgba(74, 10, 32, 0.18);
}
.hud-stamp-mark { color: var(--c-ember); }

.panel-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(46px, 6.4vw, 96px);
    color: var(--c-cream);
    letter-spacing: -0.03em;
    line-height: 0.94;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 var(--c-burgundy-bright);
    margin: 0.6rem 0 0;
}
.title-accent {
    font-family: var(--font-sub);
    font-style: italic;
    font-weight: 600;
    color: var(--c-gold);
    text-transform: none;
    letter-spacing: -0.01em;
    text-shadow: none;
    display: inline-block;
    transform: translateX(2.2vw);
}

.panel-subtitle {
    font-family: var(--font-sub);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(20px, 1.6vw, 28px);
    color: var(--c-gold);
    line-height: 1.32;
    max-width: 38em;
    margin-top: 0.8rem;
}

.panel-body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    color: rgba(245, 237, 224, 0.85);
    max-width: 36em;
    margin-top: 0.6rem;
}

/* Data readout (panel 1) */
.data-readout {
    margin-top: 1.4rem;
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 18px 28px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.readout-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 14px;
    border: 1px solid rgba(138, 21, 56, 0.4);
    background: rgba(58, 6, 24, 0.35);
}
.readout-row .rk { color: var(--c-gold); font-size: 9.5px; }
.readout-row .rv { color: var(--c-cream); font-size: 11.5px; }

/* Layer list (panel 2) */
.layer-list {
    list-style: none;
    margin-top: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 44em;
}
.layer-item {
    display: grid;
    grid-template-columns: 56px 130px 1fr;
    align-items: baseline;
    gap: 18px;
    padding: 14px 0 14px 0;
    border-top: 1px solid rgba(201, 160, 122, 0.25);
    font-family: var(--font-body);
}
.layer-item:last-child { border-bottom: 1px solid rgba(201, 160, 122, 0.25); }
.layer-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--c-burgundy-bright);
    background: var(--c-cream);
    padding: 3px 6px;
    width: fit-content;
    height: fit-content;
}
.layer-name {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    color: var(--c-cream);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 var(--c-burgundy-bright);
}
.layer-desc {
    font-size: 16px;
    color: rgba(245, 237, 224, 0.82);
    line-height: 1.5;
}

/* Dive grid (panel 3) */
.dive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 1.6rem;
    max-width: 60em;
}
.dive-card {
    background: rgba(74, 10, 32, 0.45);
    border: 1px solid rgba(201, 160, 122, 0.28);
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: transform 0.4s ease, border-color 0.4s ease;
}
.dive-card:hover {
    transform: translateY(-3px);
    border-color: var(--c-ember);
}
.dive-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--c-ember);
    text-transform: uppercase;
}
.dive-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    color: var(--c-cream);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 var(--c-burgundy-bright);
}
.dive-blurb {
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(245, 237, 224, 0.78);
}
.dive-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Synth pair (panel 4) */
.synth-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: stretch;
    margin-top: 1.6rem;
    max-width: 56em;
}
.synth-half {
    border: 1px solid rgba(201, 160, 122, 0.3);
    padding: 18px 20px;
    background: rgba(58, 6, 24, 0.35);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.synth-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--c-ember);
    text-transform: uppercase;
}
.synth-half p {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(245, 237, 224, 0.85);
}
.synth-link {
    align-self: center;
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--c-gold);
    line-height: 1;
}

.synth-meter {
    margin-top: 1.4rem;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    gap: 14px;
    max-width: 44em;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.meter-label { color: var(--c-gold); }
.meter-track {
    height: 10px;
    background: rgba(245, 237, 224, 0.08);
    border: 1px solid rgba(138, 21, 56, 0.5);
    position: relative;
    overflow: hidden;
}
.meter-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, var(--c-burgundy-bright), var(--c-ember));
    transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.meter-value { color: var(--c-cream); font-weight: 500; }

/* Broadcast grid (panel 5) */
.broadcast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 1.4rem;
    max-width: 64em;
}
.bc-card {
    border: 1px solid rgba(138, 21, 56, 0.45);
    background: rgba(58, 6, 24, 0.55);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
    position: relative;
    overflow: hidden;
}
.bc-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--c-burgundy-bright);
    transition: background 0.4s ease, width 0.4s ease;
}
.bc-card:hover {
    transform: translateX(3px);
    border-color: var(--c-ember);
}
.bc-card:hover::before {
    background: var(--c-ember);
    width: 6px;
}
.bc-day {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    color: var(--c-gold);
    text-transform: uppercase;
}
.bc-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 24px;
    color: var(--c-cream);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 var(--c-burgundy-bright);
    line-height: 1;
}
.bc-blurb {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(245, 237, 224, 0.78);
}

/* Sign-off (panel 6) */
.sign-off {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 1.6rem;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--c-parchment);
    text-transform: uppercase;
    border-left: 2px solid var(--c-burgundy-bright);
    padding-left: 14px;
}
.sign-glyph {
    margin-top: 1.6rem;
    display: flex;
    align-items: center;
    gap: 14px;
}
.sign-can { width: 28px; height: 28px; }
.sign-tag {
    font-family: var(--font-sub);
    font-style: italic;
    font-size: 18px;
    color: var(--c-gold);
}

/* =================== REVEAL ANIMATION =================== */
.reveal-target {
    opacity: 0;
    transform: scale(1.15);
    filter: blur(3px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.6s ease-out;
    transition-delay: 0ms;
}
.reveal-target.is-revealed {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* =================== 3D BACKGROUND FORMS =================== */
.bg-form {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    perspective: 900px;
    transform-style: preserve-3d;
}

/* --- Icosahedron (panel 1, 6) --- */
.bg-form-icosa {
    top: 50%;
    right: 8vw;
    width: 36vmin;
    height: 36vmin;
    transform: translateY(-50%);
    opacity: 0.32;
}
.ico {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotate-y 120s linear infinite;
}
.ico-face, .ico-edge {
    position: absolute;
    border: 1px solid var(--c-burgundy-bright);
    background: linear-gradient(135deg, rgba(107, 29, 42, 0.25), rgba(58, 6, 24, 0.05));
}
.ico-face {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.ico-edge {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border-color: var(--c-cream);
    opacity: 0.4;
    background: transparent;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.ico-face.f1 { transform: rotateY(0deg)   translateZ(60px); }
.ico-face.f2 { transform: rotateY(60deg)  translateZ(60px); }
.ico-face.f3 { transform: rotateY(120deg) translateZ(60px); }
.ico-face.f4 { transform: rotateY(180deg) translateZ(60px); clip-path: polygon(50% 100%, 0% 0%, 100% 0%); }
.ico-face.f5 { transform: rotateY(240deg) translateZ(60px); }
.ico-face.f6 { transform: rotateY(300deg) translateZ(60px); }
.ico-face.f7 { transform: rotateX(72deg)  translateZ(60px); }
.ico-face.f8 { transform: rotateX(-72deg) translateZ(60px); clip-path: polygon(50% 100%, 0% 0%, 100% 0%); }
.ico-edge.e1 { transform: rotateX(36deg)  rotateY(30deg)  translateZ(75px); }
.ico-edge.e2 { transform: rotateX(36deg)  rotateY(150deg) translateZ(75px); }
.ico-edge.e3 { transform: rotateX(-36deg) rotateY(90deg)  translateZ(75px); }
.ico-edge.e4 { transform: rotateX(-36deg) rotateY(210deg) translateZ(75px); }

.bg-form-quiet { opacity: 0.18; right: 10vw; }
.ico-quiet { animation-duration: 200s; }

@keyframes rotate-y {
    from { transform: rotateY(0deg) rotateX(20deg); }
    to   { transform: rotateY(360deg) rotateX(20deg); }
}

/* --- Nested cubes (panel 2) --- */
.bg-form-cubes {
    top: 50%;
    right: 6vw;
    width: 38vmin;
    height: 38vmin;
    transform: translateY(-50%);
    opacity: 0.36;
}
.cube {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}
.cube-outer  { animation: rotate-cube 90s linear infinite; }
.cube-mid    { animation: rotate-cube 70s linear infinite reverse; transform: scale(0.65); }
.cube-inner  { animation: rotate-cube 50s linear infinite; transform: scale(0.35); }
.cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid var(--c-burgundy-bright);
    background: rgba(107, 29, 42, 0.04);
}
.cube-mid .cube-face   { border-color: var(--c-cream); opacity: 0.5; }
.cube-inner .cube-face { border-color: var(--c-gold); opacity: 0.65; }
.cube-face.cf-front  { transform: translateZ(50%); }
.cube-face.cf-back   { transform: rotateY(180deg) translateZ(50%); }
.cube-face.cf-right  { transform: rotateY(90deg)  translateZ(50%); }
.cube-face.cf-left   { transform: rotateY(-90deg) translateZ(50%); }
.cube-face.cf-top    { transform: rotateX(90deg)  translateZ(50%); }
.cube-face.cf-bottom { transform: rotateX(-90deg) translateZ(50%); }
.cube .cube-face.cf-front  { transform: translateZ(calc(50% * 1)); }

@keyframes rotate-cube {
    from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(var(--s, 1)); }
    to   { transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg) scale(var(--s, 1)); }
}
.cube-outer { --s: 1; }
.cube-mid   { --s: 0.65; }
.cube-inner { --s: 0.35; }

/* --- Crystal cluster (panel 3) --- */
.bg-form-cluster {
    top: 50%;
    right: 4vw;
    width: 40vmin;
    height: 40vmin;
    transform: translateY(-50%);
    opacity: 0.34;
}
.crystal {
    position: absolute;
    transform-style: preserve-3d;
    animation: rotate-cube 110s linear infinite;
}
.crystal .cube-face {
    border: 1px solid var(--c-cream);
    background: linear-gradient(45deg, rgba(138, 21, 56, 0.18), rgba(74, 10, 32, 0.05));
}
.crystal.c1 { width: 40%; height: 40%; top: 30%; left: 30%; animation-duration: 90s; }
.crystal.c2 { width: 26%; height: 26%; top: 8%;  left: 18%; animation-duration: 72s; animation-direction: reverse; }
.crystal.c3 { width: 30%; height: 30%; top: 56%; left: 10%; animation-duration: 84s; }
.crystal.c4 { width: 22%; height: 22%; top: 20%; left: 62%; animation-duration: 64s; animation-direction: reverse; }
.crystal .cube-face.cf-front  { transform: translateZ(50%); }
.crystal .cube-face.cf-back   { transform: rotateY(180deg) translateZ(50%); }
.crystal .cube-face.cf-right  { transform: rotateY(90deg)  translateZ(50%); }
.crystal .cube-face.cf-left   { transform: rotateY(-90deg) translateZ(50%); }
.crystal .cube-face.cf-top    { transform: rotateX(90deg)  translateZ(50%); }
.crystal .cube-face.cf-bottom { transform: rotateX(-90deg) translateZ(50%); }

/* --- Torus rings (panel 4, faux 3D from segments) --- */
.bg-form-tori {
    top: 50%;
    right: 6vw;
    width: 44vmin;
    height: 44vmin;
    transform: translateY(-50%);
    opacity: 0.34;
}
.torus {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: rotate-torus 80s linear infinite;
}
.torus-a { transform: rotateX(70deg) rotateY(0deg); }
.torus-b { transform: rotateX(70deg) rotateY(60deg) rotateZ(40deg); animation-duration: 100s; animation-direction: reverse; }

.t-seg {
    position: absolute;
    top: 50%; left: 50%;
    width: 60%;
    height: 60%;
    margin-top: -30%;
    margin-left: -30%;
    border: 1px solid var(--c-burgundy-bright);
    border-radius: 50%;
    transform-style: preserve-3d;
}
.torus-b .t-seg { border-color: var(--c-cream); opacity: 0.6; }
.t-seg.t-s1 { transform: rotateY(0deg)   translateZ(0); }
.t-seg.t-s2 { transform: rotateY(22.5deg) translateZ(0); border-style: dashed; }
.t-seg.t-s3 { transform: rotateY(45deg)  translateZ(0); }
.t-seg.t-s4 { transform: rotateY(67.5deg) translateZ(0); border-style: dashed; }
.t-seg.t-s5 { transform: rotateY(90deg)  translateZ(0); }
.t-seg.t-s6 { transform: rotateY(112.5deg) translateZ(0); border-style: dashed; }
.t-seg.t-s7 { transform: rotateY(135deg) translateZ(0); }
.t-seg.t-s8 { transform: rotateY(157.5deg) translateZ(0); border-style: dashed; }

@keyframes rotate-torus {
    from { transform: rotateX(70deg) rotateY(0deg)   rotateZ(0deg); }
    to   { transform: rotateX(70deg) rotateY(360deg) rotateZ(360deg); }
}

/* --- Stepped pyramid (panel 5) --- */
.bg-form-pyramid {
    top: 50%;
    right: 4vw;
    width: 38vmin;
    height: 38vmin;
    transform: translateY(-50%);
    opacity: 0.32;
}
.pyramid {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: rotate-pyramid 120s linear infinite;
}
.p-step {
    position: absolute;
    border: 1px solid var(--c-burgundy-bright);
    background: rgba(107, 29, 42, 0.06);
    transform-style: preserve-3d;
}
.p-step.ps1 { width: 90%; height: 90%; top: 5%;  left: 5%;  animation: float 7s ease-in-out infinite; }
.p-step.ps2 { width: 70%; height: 70%; top: 15%; left: 15%; animation: float 7s ease-in-out infinite -1.6s; border-color: var(--c-cream); opacity: 0.55; }
.p-step.ps3 { width: 50%; height: 50%; top: 25%; left: 25%; animation: float 7s ease-in-out infinite -3.2s; }
.p-step.ps4 { width: 30%; height: 30%; top: 35%; left: 35%; animation: float 7s ease-in-out infinite -4.8s; border-color: var(--c-gold); opacity: 0.65; }

@keyframes rotate-pyramid {
    from { transform: rotateX(55deg) rotateZ(0deg); }
    to   { transform: rotateX(55deg) rotateZ(360deg); }
}
@keyframes float {
    0%, 100% { transform: translateZ(0) translateY(0); }
    50%      { transform: translateZ(20px) translateY(-6px); }
}

/* =================== NATURE STENCIL MOTIFS =================== */
.motif {
    position: absolute;
    pointer-events: none;
    z-index: 4;
    opacity: 0.14;
}

.motif-fern-bl {
    bottom: 4vh;
    left: -2vw;
    width: 28vmin;
    height: 36vmin;
    animation: sway-a 7s ease-in-out infinite;
    transform-origin: bottom center;
}
.motif-fern-r {
    top: 8vh;
    right: 12vw;
    width: 20vmin;
    height: 28vmin;
    transform: scaleX(-1);
    animation: sway-b 11s ease-in-out infinite;
    opacity: 0.12;
}
.motif-fern-deep {
    width: 32vmin;
    height: 40vmin;
    opacity: 0.1;
}

.motif-vine-top {
    top: 12vh;
    left: 4vw;
    width: 36vw;
    height: 4vh;
    opacity: 0.18;
    animation: sway-c 9s ease-in-out infinite;
}
.motif-vine-mid {
    top: 50%;
    left: 0;
    width: 28vw;
    height: 4vh;
    opacity: 0.14;
    animation: sway-c 13s ease-in-out infinite;
}
.motif-vine-bottom {
    bottom: 12vh;
    left: 4vw;
    width: 32vw;
    height: 4vh;
    opacity: 0.16;
    animation: sway-c 11s ease-in-out infinite;
}
.motif-vine-quiet {
    opacity: 0.1;
    animation-duration: 17s;
}

.motif-ginkgo {
    width: 10vmin;
    height: 10vmin;
    opacity: 0.18;
}
.motif-ginkgo-1 { top: 16vh; right: 22vw; animation: sway-b 11s ease-in-out infinite; }
.motif-ginkgo-2 { bottom: 18vh; left: 32vw; animation: sway-a 9s ease-in-out infinite -2s; opacity: 0.14; }
.motif-ginkgo-3 { top: 24vh; left: 4vw; animation: sway-b 13s ease-in-out infinite -3s; opacity: 0.16; }

.motif-roots {
    bottom: 22vh;
    left: 8vw;
    width: 32vw;
    height: 6vh;
    opacity: 0.18;
}
.motif-roots-2 { bottom: 8vh; left: 16vw; width: 36vw; opacity: 0.16; }
.motif-roots-3 { bottom: 12vh; left: 20vw; width: 30vw; opacity: 0.14; }

.motif.bloom {
    transform: scale(1.08) rotate(0deg) translateX(0);
    transition: transform 2s ease-out;
}

@keyframes sway-a {
    0%, 100% { transform: rotate(-1deg) translateX(0); }
    50%      { transform: rotate(2deg)  translateX(8px); }
}
@keyframes sway-b {
    0%, 100% { transform: rotate(2deg)  translateX(0); }
    50%      { transform: rotate(-2deg) translateX(-6px); }
}
@keyframes sway-c {
    0%, 100% { transform: translateX(0) rotate(-0.5deg); }
    50%      { transform: translateX(-10px) rotate(0.5deg); }
}

/* =================== RESPONSIVE =================== */
@media (max-width: 980px) {
    .telemetry-rail { width: 56px; min-width: 56px; }
    .panels { margin-right: 56px; }
    .annotation-bar { right: 56px; padding: 0 24px; }
    .broadcast-header { left: 24px; max-width: 70vw; }
    .panel-content { padding: 12vh 24px 8vh 24px; max-width: 100%; }
    .content-cluster-2,
    .content-cluster-3,
    .content-cluster-4,
    .content-cluster-5,
    .content-cluster-6 { padding-left: 24px; max-width: 100%; }
    .panel-title { font-size: clamp(38px, 9vw, 64px); }
    .data-readout { grid-template-columns: 1fr 1fr; }
    .bg-form { opacity: 0.18; }
    .bg-form-icosa,
    .bg-form-cubes,
    .bg-form-cluster,
    .bg-form-tori,
    .bg-form-pyramid {
        right: 0;
        width: 60vmin;
        height: 60vmin;
        opacity: 0.18;
    }
    .synth-pair { grid-template-columns: 1fr; }
    .synth-link { transform: rotate(90deg); }
    .layer-item { grid-template-columns: 56px 1fr; }
    .layer-item .layer-desc { grid-column: 1 / -1; padding-left: 74px; margin-top: 4px; }
    .reg-tl, .reg-tr { display: flex; }
    .reg-bl, .reg-br { display: none; }
}

@media (max-width: 620px) {
    .telemetry-rail { width: 44px; min-width: 44px; }
    .panels { margin-right: 44px; }
    .annotation-bar { right: 44px; height: 50px; }
    .annotation-text { font-size: 14px; }
    .rail-glyph { width: 44px; padding: 4px 2px; font-size: 9px; }
    .g-num { font-size: 11px; }
    .g-name { font-size: 7.5px; }
    .panel-title { font-size: clamp(34px, 11vw, 54px); }
    .panel-subtitle { font-size: 18px; }
    .layer-item { grid-template-columns: 48px 1fr; }
    .broadcast-grid { grid-template-columns: 1fr; }
    .dive-grid { grid-template-columns: 1fr; }
}