/*
  Hawk OS — the space background behind the app shell: a dot grid, four
  rings, eight floating dots and two corner glows.

  The browser draws it, not Flutter, so its motion costs Flutter nothing.
  Every animation here moves or fades a layer (transform and opacity only),
  which the browser's compositor runs on the graphics chip without
  repainting anything. In April the same motion ran inside Flutter and
  redrew every page 60 times a second, so it was switched off.

  Flutter shows it by adding `hawk-space-on` to <body>, setting
  --hawk-space-bg and --hawk-space-strength for the theme, and leaving the
  shell see-through (lib/core/components/animated_space_background.dart).
  Positions and colours mirror that file's Flutter version, which is still
  drawn wherever this stylesheet isn't (tests, or if this file fails to
  load). test/core/components/space_background_web_test.dart checks the
  colours against AppPalette and refuses keyframes that animate anything
  but transform or opacity.
*/

/* Read by Flutter to confirm this stylesheet loaded before it goes
   see-through. */
:root {
  --hawk-space-ready: 1;
}

#hawk-space {
  /* The four colours, as RGB. The app sets them for the theme: AppPalette's
     brand colours in dark mode (the fallbacks here), and their deeper
     "readable" versions in light mode, which show on the light page
     (AIE-1093). */
  --aqua: var(--hawk-space-aqua, 1 255 255);
  --violet: var(--hawk-space-violet, 173 186 255);
  --blue: var(--hawk-space-blue, 61 183 233);
  --yellow: var(--hawk-space-yellow, 254 207 64);
  /* 1 in dark mode, 1.3 in light (AIE-1093); every alpha is scaled by it. */
  --s: var(--hawk-space-strength, 1);

  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--hawk-space-bg, #0a1020);
}

body.hawk-space-on #hawk-space {
  display: block;
}

#hawk-space .grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgb(var(--aqua) / calc(0.09 * var(--s))) 1px,
    transparent 1.6px
  );
  background-size: 32px 32px;
  background-position: -16px -16px;
}

#hawk-space .glow {
  position: absolute;
  border-radius: 50%;
}

#hawk-space .glow-tr {
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle closest-side,
    rgb(var(--aqua) / calc(0.05 * var(--s))),
    transparent
  );
  animation: hawk-space-breathe 16s ease-in-out infinite;
}

#hawk-space .glow-bl {
  bottom: -80px;
  left: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle closest-side,
    rgb(var(--violet) / calc(0.04 * var(--s))),
    transparent
  );
  animation: hawk-space-breathe 20s ease-in-out -6s infinite;
}

/* A ring: the outer element holds its place and fixed tilt and fades in;
   .spin turns, carrying the small dot on its edge round the ring. */
#hawk-space .ring {
  position: absolute;
  animation: hawk-space-in 1.2s ease-out both;
}

#hawk-space .spin,
#hawk-space .outer {
  position: absolute;
  inset: 0;
}

#hawk-space .spin {
  animation: hawk-space-orbit var(--orbit) linear infinite;
}

#hawk-space .spin.back {
  animation-name: hawk-space-orbit-back;
}

#hawk-space .outer,
#hawk-space .inner {
  border-radius: 50%;
  border-style: solid;
}

#hawk-space .inner {
  position: absolute;
  inset: 12%;
}

#hawk-space .edge {
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
}

#hawk-space .ring-1 {
  top: -100px;
  right: -80px;
  width: 380px;
  height: 380px;
  transform: rotate(0.4rad);
  animation-delay: 200ms;
  --orbit: 80s;
}
#hawk-space .ring-1 .outer { border-width: 2.5px; border-color: rgb(var(--aqua) / calc(0.18 * var(--s))); }
#hawk-space .ring-1 .inner { border-width: 1.75px; border-color: rgb(var(--aqua) / calc(0.108 * var(--s))); }
#hawk-space .ring-1 .edge { background: rgb(var(--aqua) / calc(0.36 * var(--s))); }

#hawk-space .ring-2 {
  bottom: -60px;
  left: -40px;
  width: 280px;
  height: 280px;
  transform: rotate(-0.6rad);
  animation-delay: 400ms;
  --orbit: 110s;
}
#hawk-space .ring-2 .outer { border-width: 2px; border-color: rgb(var(--violet) / calc(0.14 * var(--s))); }
#hawk-space .ring-2 .inner { border-width: 1.4px; border-color: rgb(var(--violet) / calc(0.084 * var(--s))); }
#hawk-space .ring-2 .edge { background: rgb(var(--violet) / calc(0.28 * var(--s))); }

#hawk-space .ring-3 {
  top: 200px;
  right: 60px;
  width: 160px;
  height: 160px;
  transform: rotate(0.8rad);
  animation-duration: 1s;
  animation-delay: 600ms;
  --orbit: 60s;
}
#hawk-space .ring-3 .outer { border-width: 1.5px; border-color: rgb(var(--blue) / calc(0.12 * var(--s))); }
#hawk-space .ring-3 .edge { background: rgb(var(--blue) / calc(0.24 * var(--s))); }

#hawk-space .ring-4 {
  top: 80px;
  left: 100px;
  width: 100px;
  height: 100px;
  transform: rotate(-0.3rad);
  animation-duration: 1s;
  animation-delay: 800ms;
  --orbit: 50s;
}
#hawk-space .ring-4 .outer { border-width: 1px; border-color: rgb(var(--yellow) / calc(0.12 * var(--s))); }
#hawk-space .ring-4 .edge { background: rgb(var(--yellow) / calc(0.24 * var(--s))); }

/* A floating dot fades in once, then drifts a few pixels in a slow loop.
   --c is its colour, --a its alpha, --d its size; --drift and --phase
   vary the loop so the dots don't move in step. */
#hawk-space .dot {
  position: absolute;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: rgb(var(--c) / calc(var(--a) * var(--s)));
  box-shadow: 0 0 calc(var(--d) * 2) rgb(var(--c) / calc(var(--a) * 0.5 * var(--s)));
  animation:
    hawk-space-in 800ms ease-out var(--enter) both,
    hawk-space-drift var(--drift) ease-in-out var(--phase) infinite;
}

#hawk-space .dot-1 { top: 60px; right: 200px; --d: 8px; --c: var(--violet); --a: 0.7; --enter: 500ms; --drift: 11s; --phase: -2s; }
#hawk-space .dot-2 { top: 140px; right: 90px; --d: 12px; --c: var(--aqua); --a: 0.45; --enter: 600ms; --drift: 14s; --phase: -7s; }
#hawk-space .dot-3 { top: 40px; right: 300px; --d: 5px; --c: var(--yellow); --a: 0.6; --enter: 700ms; --drift: 9s; --phase: -4s; }
#hawk-space .dot-4 { bottom: 120px; left: 180px; --d: 7px; --c: var(--aqua); --a: 0.5; --enter: 800ms; --drift: 12s; --phase: -1s; }
#hawk-space .dot-5 { bottom: 200px; right: 250px; --d: 10px; --c: var(--violet); --a: 0.4; --enter: 900ms; --drift: 15s; --phase: -9s; }
#hawk-space .dot-6 { top: 300px; left: 60px; --d: 6px; --c: var(--blue); --a: 0.55; --enter: 1000ms; --drift: 10s; --phase: -5s; }
#hawk-space .dot-7 { bottom: 80px; left: 350px; --d: 4px; --c: var(--yellow); --a: 0.5; --enter: 1100ms; --drift: 8s; --phase: -3s; }
#hawk-space .dot-8 { top: 220px; right: 400px; --d: 9px; --c: var(--aqua); --a: 0.35; --enter: 1200ms; --drift: 13s; --phase: -6s; }

/* Glows are dark-mode only: on a light page a coloured halo reads as a
   smudge (theme-system.md). The app sets data-glow="off" in light mode. */
#hawk-space[data-glow="off"] .glow {
  display: none;
}
#hawk-space[data-glow="off"] .dot {
  box-shadow: none;
}

@keyframes hawk-space-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hawk-space-orbit {
  to { transform: rotate(360deg); }
}

@keyframes hawk-space-orbit-back {
  to { transform: rotate(-360deg); }
}

@keyframes hawk-space-drift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(4px, -7px); }
  50% { transform: translate(0, -12px); }
  75% { transform: translate(-4px, -6px); }
  100% { transform: translate(0, 0); }
}

@keyframes hawk-space-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* Anyone with "Reduce motion" switched on gets the still background. */
@media (prefers-reduced-motion: reduce) {
  #hawk-space * {
    animation: none !important;
  }
}