/* ════════════════════════════════════════════════════════════════
   Research Base — scene.css
   The hero: a calm alpine facility at dawn. Layered SVG + CSS, no images.
   ════════════════════════════════════════════════════════════════ */

.rb-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block: clamp(6rem, 12vh, 9rem) clamp(3rem, 8vh, 6rem);
    overflow: hidden;
    isolation: isolate;
}

/* ── scene container + layers ──────────────────────────────────── */
.rb-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.rb-scene > * { position: absolute; inset: 0; will-change: transform; }

.rb-scene__sky {
    background:
        radial-gradient(120% 90% at 72% 8%, #1b2f49 0%, #122236 38%, #0c1827 70%, var(--rb-bg) 100%);
}

/* drifting star/particle field */
.rb-scene__stars {
    background-image:
        radial-gradient(1.4px 1.4px at 18% 22%, rgba(234,242,249,0.9), transparent),
        radial-gradient(1.2px 1.2px at 67% 12%, rgba(234,242,249,0.7), transparent),
        radial-gradient(1.6px 1.6px at 83% 30%, rgba(200,224,255,0.8), transparent),
        radial-gradient(1px 1px at 42% 8%, rgba(234,242,249,0.6), transparent),
        radial-gradient(1.3px 1.3px at 30% 34%, rgba(180,210,255,0.55), transparent),
        radial-gradient(1px 1px at 91% 16%, rgba(234,242,249,0.6), transparent);
    background-repeat: no-repeat;
    opacity: 0.9;
    animation: rb-twinkle 6s ease-in-out infinite;
}

/* soft aurora glow over the peaks */
.rb-scene__aurora {
    background:
        radial-gradient(60% 40% at 60% 26%, rgba(88,210,193,0.16), transparent 70%),
        radial-gradient(50% 38% at 35% 30%, rgba(156,140,242,0.14), transparent 72%);
    filter: blur(6px);
    animation: rb-drift 16s ease-in-out infinite alternate;
}

/* mountain ranges */
.rb-scene__range { top: auto; bottom: 0; height: 64%; width: 100%; }
.rb-scene__range path { stroke: none; }
.rb-scene__range--far  path { fill: #1a2c44; }
.rb-scene__range--mid  path { fill: #142338; }
.rb-scene__range--near path { fill: #0d1b29; }
.rb-scene__range--far  { height: 56%; opacity: 0.85; }
.rb-scene__range--mid  { height: 50%; }
.rb-scene__range--near { height: 42%; }

/* facility silhouette + signals (sits on the mid ridge) */
.rb-scene__facility {
    top: auto; bottom: 16%; left: 50%;
    width: clamp(220px, 26vw, 360px); height: auto;
    transform: translateX(-46%);
    color: #cde0ef;
    opacity: 0.92;
}
.rb-facility { color: #b9d2e6; }
.rb-facility__beacon { color: var(--rb-amber); animation: rb-beacon 2.4s ease-in-out infinite; }
.rb-facility__beacon--slow { color: var(--rb-teal); animation-duration: 3.6s; }

.rb-signals { color: var(--rb-amber); }
.rb-signals__arc {
    stroke-width: 1.5;
    stroke-dasharray: 1 220;
    opacity: 0;
    animation: rb-signal 4.2s ease-out infinite;
}
.rb-signals__arc--2 { animation-delay: 0.7s; color: var(--rb-teal); }
.rb-signals__arc--3 { animation-delay: 1.4s; color: var(--rb-violet); }

/* fog bands rolling between ridges */
.rb-scene__fog {
    top: auto; bottom: 0; height: 55%;
    background:
        linear-gradient(180deg, transparent 0%, rgba(15,28,44,0.0) 30%, rgba(120,160,190,0.10) 60%, rgba(150,185,215,0.16) 78%, transparent 100%);
    filter: blur(2px);
    animation: rb-fog 22s ease-in-out infinite alternate;
}

/* faint instrument grid, masked so it fades toward the edges */
.rb-scene__grid {
    background-image:
        linear-gradient(rgba(150,185,215,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150,185,215,0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%);
            mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%);
    opacity: 0.5;
}

/* edge vignette + bottom fade into the page */
.rb-scene__vignette {
    background:
        radial-gradient(120% 80% at 50% 30%, transparent 55%, rgba(8,16,26,0.55) 100%),
        linear-gradient(180deg, transparent 60%, var(--rb-bg) 99%);
}

/* ── hero narrative ────────────────────────────────────────────── */
.rb-hero__inner {
    position: relative;
    width: min(100% - 2.5rem, var(--rb-shell));
    margin-inline: auto;
    max-width: 56rem;
}

.rb-eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: var(--rb-display); font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.26em; color: var(--rb-teal);
    padding: 0.4rem 0.85rem; border: 1px solid rgba(88,210,193,0.3);
    border-radius: 999px; background: rgba(88,210,193,0.06);
    margin-bottom: 1.6rem;
}
.rb-eyebrow__tick { width: 8px; height: 8px; border-radius: 50%; background: var(--rb-teal); box-shadow: 0 0 0 4px rgba(88,210,193,0.18); animation: rb-blink 2s ease-in-out infinite; }

.rb-hero__title { font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 700; letter-spacing: -0.02em; }
.rb-hero__line { display: block; color: var(--rb-ink); }
.rb-hero__line--accent {
    background: linear-gradient(100deg, var(--rb-teal), var(--rb-violet) 60%, var(--rb-amber));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

.rb-hero__sub { margin-top: 1.5rem; max-width: 46rem; font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: var(--rb-ink-dim); }
.rb-hero__sub--ka { margin-top: 0.7rem; font-size: 1rem; color: var(--rb-muted); }

.rb-hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; }

/* live telemetry strip */
.rb-signalstrip {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    margin: 2.6rem 0 0;
}
.rb-signalstrip__item {
    flex: 1 1 130px;
    padding: 0.85rem 1.05rem;
    border: 1px solid var(--rb-line);
    border-radius: var(--rb-radius-sm);
    background: var(--rb-panel);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative; overflow: hidden;
}
.rb-signalstrip__item::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--rb-accent);
}
.rb-signalstrip__item dt { font-size: 0.72rem; letter-spacing: 0.04em; color: var(--rb-muted); text-transform: uppercase; }
.rb-signalstrip__item dd { margin: 0.25rem 0 0; font-family: var(--rb-display); font-size: 1.5rem; font-weight: 600; color: var(--rb-ink); }

/* scroll cue */
.rb-hero__scroll {
    position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
    width: 26px; height: 42px; border: 1px solid var(--rb-line-2); border-radius: 999px;
    display: grid; place-items: start center; padding-top: 7px;
}
.rb-hero__scroll span { width: 4px; height: 8px; border-radius: 2px; background: var(--rb-teal); animation: rb-scroll 1.8s ease-in-out infinite; }

/* ── scene animations ──────────────────────────────────────────── */
@keyframes rb-twinkle { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.55; } }
@keyframes rb-drift   { from { transform: translateX(-2%); } to { transform: translateX(3%); } }
@keyframes rb-fog     { from { transform: translateX(-3%); } to { transform: translateX(4%); } }
@keyframes rb-beacon  { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes rb-scroll  { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
@keyframes rb-signal  {
    0%   { stroke-dashoffset: 220; opacity: 0; }
    15%  { opacity: 1; }
    70%  { opacity: 0.9; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}