:root {
  color-scheme: light;
  --page-bg: #eef2ff;
  --overlay-start: rgba(99, 102, 241, 0.16);
  --overlay-end: rgba(14, 165, 233, 0.16);
  --ring-primary: rgba(99, 102, 241, 0.95);
  --ring-secondary: rgba(14, 165, 233, 0.95);
  --ring-tertiary: rgba(129, 140, 248, 0.45);
  --ring-shadow: rgba(99, 102, 241, 0.28);
  --dot-shadow: rgba(129, 140, 248, 0.18);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--page-bg);
  color: #0f172a;
  min-height: 100vh;
}

body.flutter-active {
  background: #0f172a;
}

#landing {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--overlay-start), var(--overlay-end));
  backdrop-filter: blur(12px);
  transition: opacity 260ms ease, visibility 260ms ease;
  z-index: 999;
}

#landing.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader {
  position: relative;
  width: 72px;
  height: 72px;
  pointer-events: none;
}

.loader::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid transparent;
  border-top-color: var(--ring-primary);
  border-right-color: var(--ring-secondary);
  border-bottom-color: var(--ring-tertiary);
  animation: spin 960ms cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  filter: drop-shadow(0 12px 24px var(--ring-shadow));
}

.loader::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(129, 140, 248, 0.55), rgba(129, 140, 248, 0.08) 55%, rgba(129, 140, 248, 0) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.loader__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #0ea5e9);
  box-shadow: 0 0 0 6px var(--dot-shadow);
  transform: translate(-50%, -50%) rotate(0deg) translateY(-30px);
  animation: orbit 960ms cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbit {
  to {
    transform: translate(-50%, -50%) rotate(360deg) translateY(-30px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader::before,
  .loader__dot {
    animation: none;
  }
}