/* ─── Space shell ────────────────────────────────────────────────────────── */

.space-root {
  --space-void: #01040e;
  --space-deep: #080e1e;
  --glow-cyan:   rgba(34, 211, 238, 0.45);
  --glow-indigo: rgba(99, 102, 241, 0.35);
  --preview-sticky-top: 4.5rem;

  /* ─── Layout tokens ─────────────────────────────────────────────────────── */
  /* Left column width in the preview grid (desktop). */
  --left-col-width: 19rem;

  /* Pill layout-track padding and gap (0.14rem pad × 2 = 0.28rem total gap). */
  --pill-pad: 0.14rem;
  --pill-gap: 0.28rem;  /* = --pill-pad * 2 */

  /* Opaque background shared by .pdf-tab-panels and .pdf-tab-panel
     so the page background never bleeds through during tab switches. */
  --pane-bg: rgb(4, 12, 28);

  /* Result/download panel widths. */
  --dl-panel-width: 20rem;        /* #result-panel max-width */
  --dl-panel-inner-width: 17rem;  /* .result-download-inner max-width */
}

.space-bg {
  background-color: var(--space-void);
  background-attachment: fixed;
  background-image:
    radial-gradient(ellipse 110% 60% at 50%  -20%, rgba(30, 90, 200, 0.18), transparent 55%),
    radial-gradient(ellipse  70% 50% at 105%  20%, rgba(79, 70, 229, 0.10), transparent 50%),
    radial-gradient(ellipse  55% 45% at  -5%  65%, rgba(14, 165, 233, 0.08), transparent 48%),
    radial-gradient(ellipse  80% 60% at  80% 105%, rgba(59, 130, 246, 0.06), transparent 50%),
    linear-gradient(180deg, #01040e 0%, #080e1e 45%, #01040e 100%);
}

/* Noise dither overlay to eliminate colour banding in dark gradients.
   Uses an inline SVG turbulence filter — no external images needed. */
.space-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
}

/* ─── Aurora overlay (slow drift) ────────────────────────────────────────── */
.space-aurora {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  will-change: transform;
  background:
    radial-gradient(ellipse 80% 40% at 20%  15%, rgba(34, 211, 238, 0.055), transparent 55%),
    radial-gradient(ellipse 65% 35% at 80%  70%, rgba(99, 102, 241, 0.06),  transparent 50%),
    radial-gradient(ellipse 50% 30% at 55% 100%, rgba(59, 130, 246, 0.05),  transparent 50%);
  animation: aurora-drift 28s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
  0%   { transform: translate3d(  0px,  0px, 0) scale(1);   }
  33%  { transform: translate3d( 18px, 10px, 0) scale(1.02); }
  66%  { transform: translate3d(-12px, 18px, 0) scale(0.98); }
  100% { transform: translate3d( 10px, -8px, 0) scale(1.01); }
}

/* ─── Stars ──────────────────────────────────────────────────────────────── */
/* Note: do not animate this layer’s opacity in keyframes — it capped visibility
   near ~0.5 and made updates look like “no change”. Glow uses filter only. */
.space-stars {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Individual stars generated by JS — random position, size and timing per load */
.star {
  position: absolute;
  border-radius: 50%;
  background: var(--star-color, white);
  will-change: opacity, filter;
  animation: star-twinkle var(--star-dur, 4s) ease-in-out infinite var(--star-delay, 0s);
}

@keyframes star-twinkle {
  0%, 100% {
    opacity: var(--star-dim, 0.06);
    filter: brightness(0.9);
  }
  50% {
    opacity: var(--star-bright, 0.85);
    filter: brightness(1.7) drop-shadow(0 0 var(--star-glow, 1px) var(--star-glow-color, rgba(210, 235, 255, 0.8)));
  }
}

/* ─── Z-stack (above aurora/stars) ──────────────────────────────────────── */
.z-content {
  position: relative;
  z-index: 2;
}

/* ─── Cross-document page transition ────────────────────────────────────── */
.z-content {
  animation: page-slide-in 0.28s ease-out both;
}

@keyframes page-slide-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .z-content { animation: none; }
}

/* ─── Landscape phones: reduce vertical padding (viewport ≤ 500 px tall) ─── */
/* Tablets in landscape are ≥ 768 px tall so this rule never fires for them.   */
@media (orientation: landscape) and (max-height: 500px) {
  #site-main {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}