/* ==========================================================================
   ABRAK — Galaxy theme layer: starfield canvas, deep-space background,
   rotating Earth, nebula glows. Loaded after abrak.css + site.css.
   ========================================================================== */

/* deep-space body background (dark) — brand-tinted only, restrained */
[data-theme="dark"] body {
  background:
    radial-gradient(120% 80% at 80% -10%, color-mix(in oklab, var(--brand) 12%, transparent), transparent 55%),
    radial-gradient(90% 70% at 50% 50%, #0a111b, #070a10 72%, #04060a 100%);
  background-attachment: fixed;
}
[data-theme="light"] body {
  background:
    radial-gradient(120% 80% at 85% -10%, color-mix(in oklab, var(--brand) 8%, transparent), transparent 55%),
    var(--bg);
}

/* starfield canvas sits behind everything */
#abrak-stars {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 1; transition: opacity .4s ease;
}
[data-theme="light"] #abrak-stars { opacity: .35; }

/* surfaces get a touch of translucency so stars subtly show through edges */
[data-theme="dark"] .site-header {
  background: color-mix(in oklab, #070a10 72%, transparent);
}

/* ==========================================================================
   ROTATING EARTH
   ========================================================================== */
.earth-stage {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; width: 100%; max-width: 460px; margin-inline: auto;
}
.earth-orbit-ring {
  position: absolute; inset: 2%; border-radius: 50%;
  border: 1px dashed color-mix(in oklab, var(--brand) 35%, transparent);
  opacity: .5;
  animation: orbitspin 60s linear infinite;
}
.earth-orbit-ring::after {
  content: ""; position: absolute; top: -5px; inset-inline-start: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 16px 2px var(--brand);
}
.earth {
  position: relative; width: 74%; aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; isolation: isolate;
  box-shadow:
    inset -22px -16px 60px rgba(0,0,0,.75),
    inset 14px 12px 40px rgba(120,180,255,.25),
    0 0 60px color-mix(in oklab, var(--brand) 40%, transparent),
    0 0 120px color-mix(in oklab, var(--brand) 22%, transparent);
  background:
    radial-gradient(120% 120% at 32% 28%, #2aa3ff 0%, #1666c6 38%, #0b3b86 70%, #062555 100%);
}
.earth-map {
  position: absolute; top: 0; inset-inline-start: 0;
  width: 200%; height: 100%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  opacity: .92;
  animation: earthspin 36s linear infinite;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(closest-side, rgba(34,200,142,.95), rgba(34,200,142,0) 70%),
    radial-gradient(closest-side, rgba(34,200,142,.9), rgba(34,200,142,0) 70%),
    radial-gradient(closest-side, rgba(40,210,150,.85), rgba(40,210,150,0) 70%),
    radial-gradient(closest-side, rgba(34,200,142,.9), rgba(34,200,142,0) 70%),
    radial-gradient(closest-side, rgba(34,200,142,.8), rgba(34,200,142,0) 70%),
    radial-gradient(closest-side, rgba(40,210,150,.9), rgba(40,210,150,0) 70%);
  background-position:
    8% 30%, 22% 62%, 35% 20%, 44% 75%, 58% 40%, 70% 66%;
}
.earth-clouds {
  position: absolute; inset: 0; border-radius: 50%;
  background-repeat: repeat-x; background-size: 50% 100%;
  opacity: .35; mix-blend-mode: screen;
  animation: earthspin 26s linear infinite reverse;
  background-image:
    radial-gradient(closest-side, rgba(255,255,255,.8), rgba(255,255,255,0) 70%),
    radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
    radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0) 70%);
  background-position: 18% 28%, 48% 58%, 76% 38%;
}
.earth-atmos {
  position: absolute; inset: -6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, transparent 64%, color-mix(in oklab, var(--brand) 30%, transparent) 78%, transparent 92%);
}
.earth-glow {
  position: absolute; inset: -18%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--brand) 35%, transparent), transparent 70%);
  filter: blur(8px);
}
.earth-moon {
  position: absolute; top: 8%; inset-inline-end: 4%;
  width: 13%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(120% 120% at 35% 30%, #e8eef5, #9aa6b5 60%, #5d6675 100%);
  box-shadow: inset -4px -3px 10px rgba(0,0,0,.6), 0 0 18px rgba(180,200,230,.4);
  animation: moonorbit 18s linear infinite;
}

@keyframes earthspin { to { background-position-x: -100%, -100%, -100%, -100%, -100%, -100%; } }
@keyframes orbitspin { to { transform: rotate(360deg); } }
@keyframes moonorbit {
  0% { transform: rotate(0deg) translateX(0); }
  50% { transform: translateY(280%) scale(.9); opacity:.7; }
  100% { transform: rotate(0deg) translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .earth-map, .earth-clouds, .earth-orbit-ring, .earth-moon { animation: none; }
}

/* nebula divider accent reused on section headers */
.nebula-line {
  height: 1px; width: 100%; border: 0; margin-block: var(--s-5);
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--brand) 60%, transparent), transparent);
}

/* glass card variant for galaxy sections */
.card.glass {
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: color-mix(in oklab, var(--brand) 16%, var(--border));
}

/* ==========================================================================
   SIGNATURE: ORBITAL HERO — features orbit the Earth
   ========================================================================== */
.orbit-system {
  position: relative; width: 100%; max-width: 540px; aspect-ratio: 1;
  margin-inline: auto; display: grid; place-items: center;
  --spin: 1;   /* multiplier, can be paused */
}
.orbit-system .core-earth {
  position: relative; width: 38%; aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; isolation: isolate; z-index: 3;
  box-shadow:
    inset -16px -12px 44px rgba(0,0,0,.8),
    inset 12px 10px 30px rgba(120,180,255,.28),
    0 0 50px color-mix(in oklab, var(--brand) 55%, transparent),
    0 0 110px color-mix(in oklab, var(--brand) 28%, transparent);
  background: radial-gradient(120% 120% at 32% 28%, #2aa3ff 0%, #1666c6 38%, #0b3b86 70%, #062555 100%);
}
.orbit-system .core-earth .earth-map { animation: earthspin 30s linear infinite; }
.orbit-system .core-earth .earth-clouds { animation: earthspin 22s linear infinite reverse; }

/* orbit rings */
.orbit-ring {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
  inset: 0; animation: orbitspin var(--dur, 26s) linear infinite;
}
.orbit-ring.r1 { inset: 24%; --dur: 18s; }
.orbit-ring.r2 { inset: 8%;  --dur: 30s; animation-direction: reverse; }
.orbit-ring.r3 { inset: -8%; --dur: 44s; border-style: dashed; opacity: .5; }

/* satellites sit on a ring; the orb counter-spins continuously so the icon
   stays perfectly upright while it revolves around the Earth. */
.satellite {
  position: absolute; top: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(calc(var(--rad, 200px) * -1));
}
.sat-orb {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 34%, var(--border));
  color: var(--brand);
  box-shadow: var(--shadow-md), 0 0 20px color-mix(in oklab, var(--brand) 22%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  /* counter-rotation is set per-ring below; keeps the glyph upright */
}
.sat-orb svg { width: 22px; height: 22px; }
/* cancel each ring's continuous rotation so icons never tilt */
.orbit-ring.r1 .sat-orb { animation: orbitspin 18s linear infinite reverse; }
.orbit-ring.r2 .sat-orb { animation: orbitspin 30s linear infinite; }

/* pause orbits on hover */
.orbit-system:hover .orbit-ring,
.orbit-system:hover .core-earth .earth-map,
.orbit-system:hover .core-earth .earth-clouds,
.orbit-system:hover .sat-orb { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .orbit-ring, .sat-orb, .orbit-system .earth-map, .orbit-system .earth-clouds { animation: none !important; }
}
@media (max-width: 560px) {
  .sat-orb { width: 44px; height: 44px; }
  .sat-orb svg { width: 19px; height: 19px; }
}

/* headline accent — single restrained brand color (classic) */
.aurora-text { color: var(--brand); }

.btn-glow { position: relative; overflow: hidden; }
.btn-glow::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, color-mix(in oklab, var(--brand) 90%, white) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: angSpin 3.2s linear infinite; pointer-events: none; opacity: .9;
}
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes angSpin { to { --ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn-glow::after { animation: none; } }

/* magnetic float used on glass cards */
.tilt { transition: transform .25s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; will-change: transform; }

/* marquee logo strip */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: var(--s-7); width: max-content; animation: marquee 26s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
[dir="rtl"] .marquee-track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* section heading glow accent */
.glow-eyebrow {
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--r-pill);
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
  color: var(--brand); font-weight:700; font-size:var(--fs-sm);
  box-shadow: 0 0 24px color-mix(in oklab, var(--brand) 18%, transparent);
}
.glow-eyebrow .pulse { width:7px; height:7px; border-radius:50%; background: var(--brand); box-shadow:0 0 0 0 var(--brand); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 color-mix(in oklab, var(--brand) 70%, transparent); } 70% { box-shadow:0 0 0 8px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }

/* feature card with animated gradient border on hover */
.feature-x { position: relative; }
.feature-x::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, transparent, color-mix(in oklab, var(--brand) 60%, transparent), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition: opacity var(--transition);
}
.feature-x:hover::before { opacity:1; }

/* big number counter */
.counter { font-variant-numeric: tabular-nums; }