/* ==========================================================================
   MSA space theme layer — animated starfield, nebula drift, orbital hero,
   scroll reveals, glow interactions. Pure progressive enhancement:
   all animation is decorative, all content renders without JS/CSS anim.
   Honors prefers-reduced-motion via site.css global kill switch.
   ========================================================================== */

/* stacking: decorative layers behind, content above. The header is NOT in
   this rule: site.css gives it position:sticky and z-index:50, and flattening
   it to z-index:1 here put the open mobile flyout UNDER later page content. */
#starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.nebula, .nebula::before, .nebula::after { position: fixed; pointer-events: none; }
.nebula { inset: 0; z-index: 0; overflow: hidden; }
main, .site-footer { position: relative; z-index: 1; }

/* let the starfield shimmer through dark sections */
.section.alt { background: rgba(13, 27, 46, 0.82); }
.proof-bar { background: rgba(13, 27, 46, 0.86); }
.card { background: rgba(18, 35, 60, 0.82); backdrop-filter: blur(2px); }
.section.cream .card { background: #fff; }

/* ------------------------------ nebula drift ----------------------------- */
.nebula::before, .nebula::after {
  content: ""; width: 90vmax; height: 90vmax; border-radius: 50%;
  filter: blur(70px); opacity: 0.5; will-change: transform;
}
.nebula::before {
  left: -30vmax; top: -35vmax;
  background: radial-gradient(circle at 40% 40%, rgba(58, 110, 165, 0.20), transparent 62%);
  animation: neb-a 90s ease-in-out infinite alternate;
}
.nebula::after {
  right: -38vmax; bottom: -42vmax;
  background: radial-gradient(circle at 60% 60%, rgba(247, 147, 30, 0.10), transparent 60%);
  animation: neb-b 70s ease-in-out infinite alternate;
}
@keyframes neb-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(9vmax, 6vmax, 0) scale(1.12); } }
@keyframes neb-b { from { transform: translate3d(0,0,0) scale(1.08); } to { transform: translate3d(-8vmax, -5vmax, 0) scale(1); } }

/* ---------------------------- shooting stars ----------------------------- */
.shooting-star {
  position: fixed; z-index: 0; pointer-events: none;
  width: 130px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(245,239,227,0.9), transparent);
  opacity: 0; transform: rotate(-24deg);
}
.shooting-star.s1 { top: 14%; left: 8%; animation: shoot 16s linear infinite 3s; }
.shooting-star.s2 { top: 26%; left: 55%; animation: shoot 21s linear infinite 11s; }
@keyframes shoot {
  0%   { opacity: 0; transform: rotate(-24deg) translateX(0); }
  1.5% { opacity: 0.9; }
  6%   { opacity: 0; transform: rotate(-24deg) translateX(46vw); }
  100% { opacity: 0; transform: rotate(-24deg) translateX(46vw); }
}

/* ------------------------- hero orbital ornament ------------------------- */
.hero { isolation: isolate; }
.orbitals {
  position: absolute; z-index: -1; right: -160px; top: 50%;
  width: 640px; height: 640px; margin-top: -320px;
  opacity: 0.5; pointer-events: none;
}
.orbitals .ring { transform-origin: 50% 50%; }
.orbitals .r1 { animation: orbit 48s linear infinite; }
.orbitals .r2 { animation: orbit 84s linear infinite reverse; }
.orbitals .r3 { animation: orbit 120s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .orbitals { right: -300px; opacity: 0.3; } }

/* ------------------------------ scroll reveal ----------------------------- */
.rv { opacity: 0; transform: translateY(16px); transition: opacity 0.65s ease, transform 0.65s ease; }
.rv.in-view { opacity: 1; transform: none; }
.rv:nth-child(2) { transition-delay: 0.08s; }
.rv:nth-child(3) { transition-delay: 0.16s; }
.rv:nth-child(4) { transition-delay: 0.24s; }
/* no-JS / reduced-motion safety: content stays visible */
html.no-js .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* ------------------------------ interactions ------------------------------ */
.btn { transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
.btn-primary:hover, .btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 26px rgba(247, 147, 30, 0.42), 0 0 0 1px rgba(247, 147, 30, 0.25);
}
.btn-ghost:hover { transform: translateY(-2px); box-shadow: 0 4px 18px rgba(247, 147, 30, 0.18); }
.card { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.grid .card:hover { transform: translateY(-4px); border-color: rgba(247, 147, 30, 0.55); box-shadow: 0 10px 34px rgba(4, 9, 15, 0.5); }

/* console: scanlines + live cursor */
.console {
  background:
    repeating-linear-gradient(0deg, rgba(245,239,227,0.025) 0 1px, transparent 1px 3px),
    #04090f;
}
.console .cursor::after {
  content: "\258C"; color: var(--orange); margin-left: 2px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* real photos */
.photo {
  border-radius: 12px; border: 1px solid var(--line); display: block;
  box-shadow: 0 18px 50px rgba(4, 9, 15, 0.55);
}
figure.shot { margin: 0; }
figure.shot figcaption {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cream-dim); margin-top: 10px;
}

/* let the live starfield show through the hero (glows stay, solid base removed) */
.hero {
  background:
    radial-gradient(1100px 500px at 75% -10%, rgba(247, 147, 30, 0.16), transparent 60%),
    radial-gradient(900px 600px at 15% 110%, rgba(58, 110, 165, 0.22), transparent 60%);
}
.cta-band { background: linear-gradient(120deg, rgba(247,147,30,0.14), rgba(247,147,30,0.02)), rgba(13, 27, 46, 0.72); }