/* ═══ Aviation decor ══════════════════════════════════════════════════════════
   Purely decorative layer behind the app: chart grid, radar scope with sweep
   and contacts, an occasional F-16 fly-by, HUD corner brackets on panels.
   Never catches clicks. Off with html[data-decor="off"] (user menu / Account);
   motion stops for people who ask their OS to reduce motion.
   ═══════════════════════════════════════════════════════════════════════════ */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.shell, .login-card { position: relative; z-index: 1; }
.lang-switch { z-index: 2; }

/* chart grid with a slightly stronger line every 5 cells, like a nav chart */
.sky-grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 199px, color-mix(in srgb, var(--gold) 5%, transparent) 199px 200px),
    repeating-linear-gradient(90deg, transparent 0 199px, color-mix(in srgb, var(--gold) 5%, transparent) 199px 200px),
    repeating-linear-gradient(0deg, transparent 0 39px, color-mix(in srgb, var(--gold) 2.2%, transparent) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in srgb, var(--gold) 2.2%, transparent) 39px 40px);
  mask-image: radial-gradient(ellipse at 70% 60%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 90%);
}

/* radar scope, bottom right */
.radar {
  position: absolute; right: -170px; bottom: -170px; width: 640px; aspect-ratio: 1; border-radius: 50%;
  opacity: 0.55;
  background:
    linear-gradient(color-mix(in srgb, var(--gold) 14%, transparent), color-mix(in srgb, var(--gold) 14%, transparent)) center / 1px 100% no-repeat,
    linear-gradient(color-mix(in srgb, var(--gold) 14%, transparent), color-mix(in srgb, var(--gold) 14%, transparent)) center / 100% 1px no-repeat,
    repeating-radial-gradient(circle, transparent 0 79px, color-mix(in srgb, var(--gold) 16%, transparent) 79px 80px);
  mask-image: radial-gradient(circle, #000 60%, transparent 71%);
}
.radar .sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--gold) 22%, transparent), transparent 14%, transparent);
  animation: sweep 7s linear infinite;
}
.radar .blip {
  position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; margin: -3px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 10px var(--orange);
  opacity: 0; animation: blip 7s linear infinite; animation-delay: var(--d);
}
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes blip { 0% { opacity: 0.9; } 60% { opacity: 0.15; } 100% { opacity: 0; } }

/* F-16 fly-by: crosses the screen now and then, leaving a fading contrail */
.flyby {
  position: absolute; left: -12%; top: 78%; width: 140px; height: 112px;
  animation: flyby 46s linear infinite; animation-delay: 6s; opacity: 0;
}
.flyby .jet {
  position: absolute; inset: 0; transform: rotate(62deg);
  background: color-mix(in srgb, var(--gold) 30%, transparent);
  -webkit-mask: url(../assets/f16.svg) center / contain no-repeat; mask: url(../assets/f16.svg) center / contain no-repeat;
}
.flyby .jet::after {                                 /* afterburner glow at the nozzle */
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 22px; translate: -50% 0;
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--orange) 80%, transparent), transparent 70%);
}
.flyby::before {                                    /* contrail behind the jet */
  content: ""; position: absolute; right: 70%; top: 50%; width: 46vw; height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 10%, transparent));
  transform-origin: right center; transform: rotate(-28deg) translateY(-1px);
}
@keyframes flyby {
  0% { opacity: 0; transform: translate(0, 0); }
  2% { opacity: 1; }
  24% { opacity: 1; transform: translate(130vw, -70vh); }
  25%, 100% { opacity: 0; transform: translate(130vw, -70vh); }
}

/* HUD brackets on the bottom-left corner of every panel */
.panel::before {
  content: ""; position: absolute; left: 6px; bottom: 6px; width: 10px; height: 10px; pointer-events: none;
  border-left: 1px solid var(--gold-a35); border-bottom: 1px solid var(--gold-a35);
}

/* Zulu clock in the top bar */
.zulu { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.5px; color: var(--text); }
.zulu small { color: var(--gold); font-weight: 700; margin-left: 2px; }

/* login: the radar is centred behind the card */
.login .radar { right: auto; bottom: auto; left: 50%; top: 50%; width: 900px; translate: -50% -50%; opacity: 0.45; }
.login .flyby { top: 70%; animation-delay: 1.5s; animation-duration: 24s; }

@media (max-width: 900px) { .zulu { display: none; } .radar { width: 420px; } }

/* switched off / reduced motion */
:root[data-decor="off"] .sky, :root[data-decor="off"] .panel::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .radar .sweep, .radar .blip, .flyby { animation: none; }
  .flyby { display: none; }
}