/* =====================================================================
   miris.studio — observatory HUD overlay
   palette: void #080010, indigo #1A0A3A, magenta #FF2D78, cyan #00F0FF,
            lavender #E0D6FF, chartreuse #CCFF00, coral #FF6B4A, white #FFFFFF
   typography: Space Mono (400, 700) — single voice
   ===================================================================== */

:root {
    --void:        #080010;
    --indigo:      #1A0A3A;
    --magenta:     #FF2D78;
    --cyan:        #00F0FF;
    --lavender:    #E0D6FF;
    --chartreuse:  #CCFF00;
    --coral:       #FF6B4A;
    --white:       #FFFFFF;

    --grid-step:   73px;
    --transition-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --channel-fade: 1200ms;
}

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

html, body {
    width: 100%;
    height: 100%;
    background: var(--void);
    color: var(--lavender);
    font-family: "Space Mono", ui-monospace, "Menlo", monospace;
    overflow: hidden;
    cursor: none;
}

button {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: none;
}

/* =====================================================================
   Viewport (single full-screen container)
   ===================================================================== */
.viewport {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: var(--void);
    isolation: isolate;
}

/* =====================================================================
   Layer 0: Void
   ===================================================================== */
.layer-void {
    position: absolute;
    inset: 0;
    background: var(--void);
    z-index: 0;
    pointer-events: none;
}

/* =====================================================================
   Layer 1: Grid Substrate (73px non-standard interval, drifts subtly)
   ===================================================================== */
.layer-grid {
    position: absolute;
    inset: -50px;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(26, 10, 58, 0.45) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26, 10, 58, 0.45) 1px, transparent 1px),
        radial-gradient(circle at 20% 30%, rgba(26, 10, 58, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(26, 10, 58, 0.3) 0%, transparent 60%);
    background-size: var(--grid-step) var(--grid-step), var(--grid-step) var(--grid-step), 100% 100%, 100% 100%;
    will-change: transform;
    filter: blur(0.5px);
    opacity: 0.6;
}

/* =====================================================================
   Layer 2: Data Field (channels)
   ===================================================================== */
.layer-data {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* =====================================================================
   Status Bar (top edge)
   ===================================================================== */
.status-bar {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--magenta);
    opacity: 0.8;
    z-index: 6;
    pointer-events: none;
}

.status-label {
    text-shadow: 0 0 8px rgba(255, 45, 120, 0.5);
}

.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chartreuse);
    box-shadow: 0 0 10px rgba(204, 255, 0, 0.8);
    animation: pulse-dot 2s infinite ease-in-out;
}

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

.status-stream {
    color: var(--cyan);
    font-size: 10px;
    letter-spacing: 0.25em;
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
    min-width: 24ch;
    text-align: left;
}

.timestamp-readout {
    position: absolute;
    top: 28px;
    left: 28px;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cyan);
    opacity: 0.85;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
    z-index: 6;
    pointer-events: none;
}

/* =====================================================================
   Corner Navigation Glyphs
   ===================================================================== */
.corner-nav {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
}

.nav-glyph {
    position: absolute;
    width: 24px;
    height: 24px;
    color: var(--magenta);
    pointer-events: auto;
    transition: color 400ms var(--transition-easing), transform 400ms var(--transition-easing);
    filter: drop-shadow(0 0 6px rgba(255, 45, 120, 0.5));
}

.nav-glyph svg {
    width: 24px;
    height: 24px;
    overflow: visible;
}

.nav-glyph-tl { top: 80px; left: 28px; }
.nav-glyph-tr { top: 80px; right: 28px; }
.nav-glyph-bl { bottom: 80px; left: 28px; }
.nav-glyph-br { bottom: 80px; right: 28px; }

.nav-glyph .nav-label {
    position: absolute;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cyan);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 400ms var(--transition-easing), transform 400ms var(--transition-easing);
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.5);
    pointer-events: none;
}

.nav-glyph-tl .nav-label { top: 6px; left: 36px; }
.nav-glyph-tr .nav-label { top: 6px; right: 36px; text-align: right; }
.nav-glyph-bl .nav-label { bottom: 6px; left: 36px; }
.nav-glyph-br .nav-label { bottom: 6px; right: 36px; text-align: right; }

.nav-glyph:hover {
    color: var(--chartreuse);
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(204, 255, 0, 0.8));
}

.nav-glyph:hover .nav-label {
    opacity: 1;
    transform: translateY(0);
}

.nav-glyph.is-active {
    color: var(--chartreuse);
    filter: drop-shadow(0 0 10px rgba(204, 255, 0, 0.8));
}

.nav-glyph.is-active .nav-label {
    opacity: 0.85;
    transform: translateY(0);
}

/* =====================================================================
   Channel Strip (right side)
   ===================================================================== */
.channel-strip {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 18px;
    z-index: 6;
    pointer-events: auto;
}

.strip-label {
    font-size: 10px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--magenta);
    opacity: 0.7;
    text-shadow: 0 0 6px rgba(255, 45, 120, 0.4);
}

.strip-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.strip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--lavender);
    opacity: 0.4;
    cursor: none;
    transition: opacity 400ms var(--transition-easing), color 400ms var(--transition-easing);
}

.strip-num {
    font-weight: 700;
    text-align: right;
    width: 3ch;
}

.strip-tick {
    width: 18px;
    height: 1px;
    background: var(--lavender);
    opacity: 0.5;
    transition: width 500ms var(--transition-easing), background 400ms var(--transition-easing), opacity 400ms var(--transition-easing);
}

.strip-item.is-active {
    opacity: 1;
    color: var(--chartreuse);
}

.strip-item.is-active .strip-tick {
    width: 36px;
    background: var(--chartreuse);
    opacity: 1;
    box-shadow: 0 0 8px rgba(204, 255, 0, 0.7);
}

.strip-progress {
    width: 1px;
    height: 64px;
    background: linear-gradient(to bottom, transparent, rgba(255, 45, 120, 0.4), transparent);
    margin-top: 8px;
}

/* =====================================================================
   Blackout Transition Overlay
   ===================================================================== */
.blackout {
    position: absolute;
    inset: 0;
    background: var(--void);
    z-index: 9;
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms var(--transition-easing);
}

.blackout.is-active {
    opacity: 1;
}

/* =====================================================================
   Channels
   Each channel is a full-viewport scene; only one visible at a time.
   ===================================================================== */
.channel {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    transform: scale(1.005);
    pointer-events: none;
    transition: opacity 600ms var(--transition-easing), transform 600ms var(--transition-easing);
}

.channel.channel-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Channel meta tags positioned at viewport edges */
.ch-meta {
    position: absolute;
    z-index: 4;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--magenta);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ch-meta-tl { top: 110px;    left: 80px;  flex-direction: column; align-items: flex-start; gap: 6px; }
.ch-meta-tr { top: 110px;    right: 80px; flex-direction: column; align-items: flex-end;   gap: 6px; }
.ch-meta-bl { bottom: 110px; left: 80px;  flex-direction: column; align-items: flex-start; gap: 8px; max-width: 380px; }
.ch-meta-br { bottom: 110px; right: 80px; flex-direction: column; align-items: flex-end;   gap: 8px; }

.meta-tag {
    font-weight: 700;
    color: var(--magenta);
    font-size: 12px;
    letter-spacing: 0.25em;
    text-shadow: 0 0 8px rgba(255, 45, 120, 0.5);
}

.meta-tag-line {
    width: 64px;
    height: 1px;
    background: var(--magenta);
    opacity: 0.4;
    box-shadow: 0 0 6px rgba(255, 45, 120, 0.3);
}

.meta-sub {
    color: var(--cyan);
    opacity: 0.85;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}

.meta-coord {
    color: var(--cyan);
    font-size: 10px;
    letter-spacing: 0.25em;
    opacity: 0.8;
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}

.meta-block-coord {
    color: var(--lavender);
    opacity: 0.3;
    font-size: 11px;
    letter-spacing: 0.15em;
    font-weight: 700;
}

.meta-body {
    color: var(--lavender);
    opacity: 0.85;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1.85;
    max-width: 52ch;
    border-left: 1px solid rgba(255, 45, 120, 0.4);
    padding-left: 14px;
}

.ch-meta-br .meta-body { border-left: 0; border-right: 1px solid rgba(255, 45, 120, 0.4); padding-left: 0; padding-right: 14px; text-align: right; }

.meta-tag-alt {
    color: var(--cyan);
    font-size: 10px;
    letter-spacing: 0.25em;
    opacity: 0.6;
}

.meta-tick {
    color: var(--chartreuse);
    font-size: 10px;
    letter-spacing: 0.4em;
    text-shadow: 0 0 6px rgba(204, 255, 0, 0.7);
    animation: tick-march 1.6s infinite;
}

@keyframes tick-march {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* =====================================================================
   Channel 01 — Signal Acquired
   ===================================================================== */
.primary-header {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-size: clamp(48px, 9vw, 132px);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--magenta);
    text-shadow:
        0 0 12px rgba(255, 45, 120, 0.45),
        0 0 32px rgba(255, 45, 120, 0.2);
    white-space: nowrap;
    z-index: 5;
    animation: glow-pulse 4s infinite ease-in-out;
}

.primary-header .header-bracket {
    color: var(--cyan);
    opacity: 0.7;
    text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

.primary-header .header-dot {
    color: var(--chartreuse);
    text-shadow: 0 0 14px rgba(204, 255, 0, 0.8);
}

@keyframes glow-pulse {
    0%, 100% { text-shadow: 0 0 12px rgba(255, 45, 120, 0.30), 0 0 32px rgba(255, 45, 120, 0.18); }
    50%      { text-shadow: 0 0 18px rgba(255, 45, 120, 0.50), 0 0 44px rgba(255, 45, 120, 0.28); }
}

.header-sub {
    position: absolute;
    top: calc(50% + 90px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    letter-spacing: 0.4em;
    color: var(--cyan);
    text-transform: uppercase;
    opacity: 0.85;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
    z-index: 5;
    white-space: nowrap;
}

.waveform-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 180px));
    width: min(76vw, 1100px);
    height: 220px;
    z-index: 4;
    pointer-events: none;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.waveform-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.wave-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 2400ms var(--transition-easing);
    filter: drop-shadow(0 0 4px currentColor);
}

.channel.channel-active .wave-path { stroke-dashoffset: 0; }
.channel.channel-active .wave-path-1 { transition-delay:  100ms; }
.channel.channel-active .wave-path-2 { transition-delay:  500ms; }
.channel.channel-active .wave-path-3 { transition-delay:  900ms; }

.wave-tag {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--cyan);
    text-transform: uppercase;
    opacity: 0.7;
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}
.wave-tag-l { left: -30px; }
.wave-tag-r { right: -30px; }

/* =====================================================================
   Channel header (sections 02-05)
   ===================================================================== */
.channel-header {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-size: 48px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--magenta);
    text-shadow:
        0 0 12px rgba(255, 45, 120, 0.45),
        0 0 28px rgba(255, 45, 120, 0.18);
    text-align: center;
    z-index: 5;
    animation: glow-pulse 4s infinite ease-in-out;
}

.channel-sub {
    position: absolute;
    top: 168px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--cyan);
    text-transform: uppercase;
    opacity: 0.7;
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
    z-index: 5;
    text-align: center;
}

/* =====================================================================
   Channel 02 — Field Survey: 4-up specimen grid
   ===================================================================== */
.survey-grid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(80vw, 1100px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    z-index: 4;
}

.survey-item {
    position: relative;
    border: 1px solid rgba(255, 45, 120, 0.25);
    border-right-width: 0;
    border-bottom-width: 0;
    padding: 18px 16px 14px;
    background: rgba(8, 0, 16, 0.4);
    transition: border-color 400ms var(--transition-easing), transform 400ms var(--transition-easing);
    -webkit-mask-image: linear-gradient(135deg, black 70%, transparent 100%);
            mask-image: linear-gradient(135deg, black 70%, transparent 100%);
}

.survey-item-a { transform: translateY(-12px); }
.survey-item-b { transform: translateY(8px); }
.survey-item-c { transform: translateY(-4px); }
.survey-item-d { transform: translateY(16px); }

.survey-item:hover {
    border-color: rgba(255, 45, 120, 0.7);
    transform: translateY(-4px);
}

.survey-item .illustration {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
}

.spec-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--magenta);
    text-shadow: 0 0 6px rgba(255, 45, 120, 0.4);
    margin-top: 14px;
    font-weight: 700;
}

.spec-note {
    display: block;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--lavender);
    opacity: 0.7;
    line-height: 1.7;
    margin-top: 6px;
    text-transform: none;
}

/* Path-draw animation default state */
.ill-stroke {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 3px currentColor);
    transition: stroke-dashoffset 2200ms var(--transition-easing);
}

.ill-stroke.ill-detail { transition-duration: 2600ms; transition-delay: 200ms; }
.ill-stroke.ill-accent { transition-duration: 1800ms; transition-delay: 400ms; }

.channel.channel-active .ill-stroke { stroke-dashoffset: 0; }
.survey-item:hover .ill-stroke { animation: redraw 1800ms var(--transition-easing) forwards; }
.archive-item:hover .ill-stroke { animation: redraw 2200ms var(--transition-easing) forwards; }

@keyframes redraw {
    0%   { stroke-dashoffset: 1; }
    100% { stroke-dashoffset: 0; }
}

.ill-accent { /* fill accents like dots */ }

/* =====================================================================
   Channel 03 — Instrument Readings: edge-positioned readout blocks
   ===================================================================== */
.channel-header-vertical {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 56px;
    line-height: 1.1;
    text-align: center;
    color: var(--magenta);
    opacity: 0.55;
}

.readout-block {
    position: absolute;
    width: 360px;
    padding: 16px 20px 18px;
    background: rgba(8, 0, 16, 0.5);
    z-index: 4;
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
            mask-image: linear-gradient(to right, black 80%, transparent 100%);
}

.readout-block[data-edge="left"] {
    border-left: 1px solid rgba(255, 45, 120, 0.55);
    -webkit-mask-image: linear-gradient(to right, black 78%, transparent 100%);
            mask-image: linear-gradient(to right, black 78%, transparent 100%);
}

.readout-block[data-edge="right"] {
    border-right: 1px solid rgba(255, 45, 120, 0.55);
    text-align: right;
    -webkit-mask-image: linear-gradient(to left, black 78%, transparent 100%);
            mask-image: linear-gradient(to left, black 78%, transparent 100%);
}

.readout-block-1 { top: 22%;  left: 80px; }
.readout-block-2 { top: 22%;  right: 80px; }
.readout-block-3 { bottom: 22%; left: 80px; }
.readout-block-4 { bottom: 22%; right: 80px; }

.readout-coord {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--lavender);
    opacity: 0.4;
    font-weight: 700;
    margin-bottom: 6px;
}

.readout-title {
    font-family: "Space Mono", monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--magenta);
    text-shadow: 0 0 8px rgba(255, 45, 120, 0.4);
    margin-bottom: 10px;
}

.readout-body {
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--lavender);
    opacity: 0.85;
    line-height: 1.85;
    text-transform: none;
}

/* =====================================================================
   Channel 04 — Specimen Archive
   ===================================================================== */
.archive-layout {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(86vw, 1240px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    z-index: 4;
}

.archive-item {
    position: relative;
    padding: 14px 16px 18px;
    background: rgba(8, 0, 16, 0.45);
    border-top: 1px solid rgba(255, 45, 120, 0.4);
    transition: border-color 400ms var(--transition-easing), transform 500ms var(--transition-easing);
    -webkit-mask-image: linear-gradient(to bottom, black 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 84%, transparent 100%);
}

.archive-item-1 { transform: translateY(-30px); }
.archive-item-2 { transform: translateY(20px); }
.archive-item-3 { transform: translateY(-10px); }

.archive-item:hover {
    border-color: var(--magenta);
    transform: translateY(-12px);
}

.archive-illustration {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
}

.archive-meta {
    margin-top: 14px;
}

.archive-class {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--magenta);
    text-shadow: 0 0 6px rgba(255, 45, 120, 0.4);
}

.archive-note {
    display: block;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--lavender);
    opacity: 0.78;
    line-height: 1.8;
    margin-top: 8px;
    text-transform: none;
    max-width: 36ch;
}

/* =====================================================================
   Channel 05 — Transmission Log
   ===================================================================== */
.comms-log {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(72vw, 880px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(8, 0, 16, 0.55);
    padding: 26px 28px;
    border-left: 1px solid rgba(255, 45, 120, 0.55);
    border-top: 1px solid rgba(255, 45, 120, 0.18);
    z-index: 4;
    -webkit-mask-image: linear-gradient(135deg, black 90%, transparent 100%);
            mask-image: linear-gradient(135deg, black 90%, transparent 100%);
}

.log-entry {
    display: grid;
    grid-template-columns: 230px 110px 1fr;
    align-items: center;
    gap: 18px;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 600ms var(--transition-easing), transform 600ms var(--transition-easing);
}

.channel-active .log-entry { opacity: 1; transform: translateY(0); }
.channel-active .log-entry:nth-child(1) { transition-delay:  60ms; }
.channel-active .log-entry:nth-child(2) { transition-delay: 200ms; }
.channel-active .log-entry:nth-child(3) { transition-delay: 340ms; }
.channel-active .log-entry:nth-child(4) { transition-delay: 480ms; }
.channel-active .log-entry:nth-child(5) { transition-delay: 620ms; }
.channel-active .log-entry:nth-child(6) { transition-delay: 760ms; }

.log-time {
    color: var(--cyan);
    opacity: 0.8;
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.35);
}

.log-marker {
    color: var(--magenta);
    font-weight: 700;
    text-shadow: 0 0 6px rgba(255, 45, 120, 0.45);
}

.log-body {
    color: var(--lavender);
    opacity: 0.85;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 13px;
}

/* Pulse rings — broadcast mode */
.broadcast-pulses {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    pointer-events: none;
    z-index: 3;
}

.pulse-ring {
    position: absolute;
    inset: 0;
    border: 1px solid var(--magenta);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(255, 45, 120, 0.4);
    opacity: 0;
}

.channel-05.channel-active .pulse-ring { animation: pulse-out 3.6s infinite ease-out; }
.channel-05.channel-active .pulse-ring:nth-child(2) { animation-delay: 1.2s; }
.channel-05.channel-active .pulse-ring:nth-child(3) { animation-delay: 2.4s; }

@keyframes pulse-out {
    0%   { transform: scale(1);   opacity: 0.6; }
    80%  { transform: scale(8);   opacity: 0;   }
    100% { transform: scale(8);   opacity: 0;   }
}

/* =====================================================================
   Layer 3: Reticle — cursor-follow overlays
   ===================================================================== */
.layer-reticle {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Crosshair lines (full-viewport spans, with a gap at cursor) */
.crosshair-h {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 240, 255, 0.25);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.25);
    will-change: top;
    --gap: 40px;
}

.crosshair-v {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(0, 240, 255, 0.25);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.25);
    will-change: left;
}

.crosshair-readout {
    position: absolute;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cyan);
    opacity: 0.85;
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.5);
    will-change: transform;
    white-space: nowrap;
}

.crosshair-readout-top    { top: 14px;    transform: translateX(-50%); }
.crosshair-readout-bottom { bottom: 14px; transform: translateX(-50%); }
.crosshair-readout-left   { left: 14px;   transform: translateY(-50%); }
.crosshair-readout-right  { right: 14px;  transform: translateY(-50%); }

/* Orbital ring */
.orbital-ring {
    position: absolute;
    width: 120px;
    height: 120px;
    margin-left: -60px;
    margin-top: -60px;
    border: 1px dashed var(--magenta);
    border-radius: 50%;
    will-change: transform;
    transition: width 300ms var(--transition-easing), height 300ms var(--transition-easing),
                margin 300ms var(--transition-easing), border-style 300ms var(--transition-easing),
                box-shadow 300ms var(--transition-easing);
    box-shadow: 0 0 12px rgba(255, 45, 120, 0.3);
    animation: ring-rotate 8s linear infinite;
}

.orbital-ring.is-locked {
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
    border-style: solid;
    border-color: var(--chartreuse);
    box-shadow: 0 0 16px rgba(204, 255, 0, 0.6);
}

@keyframes ring-rotate {
    from { transform: translate(var(--rx, 0), var(--ry, 0)) rotate(0deg); }
    to   { transform: translate(var(--rx, 0), var(--ry, 0)) rotate(360deg); }
}

.ring-tick {
    position: absolute;
    background: var(--magenta);
    box-shadow: 0 0 6px rgba(255, 45, 120, 0.7);
}

.ring-tick-n { top: -3px;    left: 50%; transform: translateX(-50%); width: 1px; height: 6px; }
.ring-tick-s { bottom: -3px; left: 50%; transform: translateX(-50%); width: 1px; height: 6px; }
.ring-tick-e { right: -3px;  top: 50%;  transform: translateY(-50%); width: 6px; height: 1px; }
.ring-tick-w { left: -3px;   top: 50%;  transform: translateY(-50%); width: 6px; height: 1px; }

.orbital-ring.is-locked .ring-tick { background: var(--chartreuse); box-shadow: 0 0 8px rgba(204, 255, 0, 0.8); }

/* Distance marker */
.distance-marker {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.distance-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.distance-readout {
    position: absolute;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--chartreuse);
    text-shadow: 0 0 6px rgba(204, 255, 0, 0.6);
    opacity: 0;
    transition: opacity 200ms var(--transition-easing);
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.distance-marker.is-active .distance-readout { opacity: 1; }
.distance-marker:not(.is-active) .distance-line line { stroke-opacity: 0; }

/* Wake trail dots */
.wake-trail {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.trail-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--lavender);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 4px rgba(224, 214, 255, 0.6);
    pointer-events: none;
}

/* =====================================================================
   Reduced-motion / touch accommodations
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
    body { cursor: auto; }
    .layer-reticle { display: none; }
    .nav-glyph .nav-label {
        opacity: 0.85;
        transform: translateY(0);
    }
}

@media (max-width: 880px) {
    .survey-grid { grid-template-columns: repeat(2, 1fr); width: min(90vw, 600px); gap: 18px; }
    .archive-layout { grid-template-columns: 1fr; width: min(80vw, 420px); gap: 24px; }
    .archive-item-1, .archive-item-2, .archive-item-3 { transform: none; }
    .channel-header { font-size: 32px; top: 90px; }
    .header-sub { top: calc(50% + 64px); font-size: 10px; letter-spacing: 0.3em; }
    .readout-block { width: min(72vw, 320px); }
    .readout-block-1, .readout-block-3 { left: 28px; }
    .readout-block-2, .readout-block-4 { right: 28px; }
    .ch-meta-tl, .ch-meta-tr, .ch-meta-bl, .ch-meta-br {
        left: 28px; right: 28px; max-width: calc(100vw - 56px);
    }
    .comms-log { width: min(86vw, 600px); padding: 16px; }
    .log-entry { grid-template-columns: 1fr; gap: 4px; }
    .timestamp-readout, .status-bar { font-size: 9px; }
}