/* Opaque page fragments above an opaque, stationary Meteora background. */
:root { --scene-header: 93px; }
.nav { position: fixed; z-index: 40; top: 0; left: 50%; transform: translateX(-50%); background: rgba(10,6,10,.94); backdrop-filter: blur(16px); }
.section-rail { z-index: 42; }
.rail-link { text-decoration: none; }
main { padding-top: var(--scene-header); }
.scene, .scene:not(.scene-active), .scene.scene-active { opacity: 1; transform: none; filter: none; transition: none; }
.scene::after { display: none; animation: none; }
.scene-transition { display: none; position: fixed; z-index: 20; inset: var(--scene-header) 0 0; overflow: hidden; pointer-events: none; }
.scene-transition.is-scrubbing { display: block; }
.brand-background { position: absolute; inset: 0; background: #191315; }
.brand-background i { position: absolute; inset: 0; display: block; background-position: center; background-size: cover; background-repeat: no-repeat; }
.meteora-backdrop { background-image: url('assets/meteora-background-v1.png'); }
.scene-transition canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-mode, .scene-mode body { height: 100%; overflow: hidden; scroll-behavior: auto; }
.scene-mode main { padding: 0; }
.scene-stage { position: fixed; inset: var(--scene-header) 0 0; z-index: 2; }
.scene-frame { position: absolute; inset: 0; overflow: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #7d3348 #110b10; background: radial-gradient(ellipse at 95% 0%, #231226, transparent 60%), radial-gradient(ellipse at 0% 80%, #310c1c, transparent 60%), #08060a; }
.scene-frame[hidden] { display: none; }
.scene-frame.scene-covered { visibility: hidden; }
.scene-frame > .scene { margin-top: 0; margin-bottom: 0; padding-top: 42px; padding-bottom: 48px; min-height: 100%; }
.scene-frame > .shell { width: min(1160px, calc(100% - 240px)); margin-left: max(32px, calc((100vw - 1280px) / 2)); margin-right: auto; }
.scene-frame > .hero { padding-top: 36px; padding-bottom: 36px; }
.scene-frame .timeline { margin: 28px 0 0; }
.scene-frame > footer { margin-top: 32px; }
.scene-frame > .categories { display: flex; flex-direction: column; justify-content: center; }
.scene-frame .hero-scene::before { inset: 0 -140px 0 24%; }
.scene-frame .section-heading { flex-shrink: 0; }
.theme-light .scene-frame { background: radial-gradient(ellipse at 95% 0%, #f7cfce, transparent 60%), radial-gradient(ellipse at 0% 80%, #f7d6c2, transparent 60%), #f6efec; scrollbar-color: #c38793 #f6efec; }
.scene-capture-host { position: fixed; inset: var(--scene-header) 0 0; z-index: -5; pointer-events: none; }
.scene-capture-host .scene-frame { display: block; visibility: visible; }
.scene-scroll-driver { position: fixed; width: 1px; height: 1px; left: -10px; top: 0; overflow: scroll; pointer-events: none; opacity: 0; }
.scene-scroll-driver > div { height: 901px; width: 1px; }
.scene-notice { position: fixed; z-index: 45; left: 24px; bottom: 20px; padding: 10px 14px; border: 1px solid #b85668; background: #25121b; color: #fff; font: 12px Manrope; max-width: 360px; }
.scene-debug { position: fixed; z-index: 60; left: 10px; bottom: 8px; background: #08060a; color: #fff; padding: 8px; font: 11px monospace; border: 1px solid #965; display: flex; gap: 8px; align-items: center; }
.scene-debug button { cursor: pointer; }
@media (min-width: 751px) and (max-height: 800px) {
 .scene-frame > .hero { min-height: 100%; gap: 30px; padding-block: 20px; }
 .scene-frame .hero h1 { font-size: clamp(48px,5.3vw,72px); margin-block: 16px; }
 .scene-frame .hero .stats { margin-top: 30px; }
 .scene-frame .hero .orbital-card { min-height: 370px; }
}
@media (max-width: 1180px) { .nav { width: min(1100px, calc(100% - 180px)); } }
@media (max-width: 750px) {
 :root { --scene-header: 73px; }
 .nav { width: calc(100% - 32px); height: 72px; }
  .scene-frame > .scene { padding-top: 28px; padding-bottom: 76px; }
  .scene-frame > .shell { width: calc(100% - 32px); margin-inline: auto; }
  .scene-frame .hero-scene::before { inset: 270px -16px 0 5%; }
  .meteora-backdrop { background-size: 100% auto; }
  .scene-debug { bottom: 56px; right: 12px; flex-wrap: wrap; }
}