@import "tailwindcss";

@theme {
  --font-sans: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --color-bg: #07111b;
  --color-surface: #102433;
  --color-surface-2: #142b3b;
  --color-fg: #e8f6f1;
  --color-muted: #8ea8af;
  --color-accent: #73e6d1;
  --color-accent-fg: #07111b;
  --color-line: #1d3a4a;
  --color-civil: #8fb9ff;
  --color-amber: #f4b860;
  --color-coral: #ff7d78;
  --color-shell: #0b1722;

  --radius: 0.85rem;
}

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  html {
    background: var(--color-bg);
    color: var(--color-fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    min-height: 100vh;
    background:
      radial-gradient(1200px 500px at 80% -10%, color-mix(in oklab, var(--color-accent) 12%, transparent), transparent 55%),
      var(--color-bg);
  }

  h1,
  h2,
  h3 {
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@keyframes sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes landing-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes landing-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1); }
}

.radar-sweep {
  transform-origin: 200px 200px;
  animation: sweep 9s linear infinite;
}

.landing-page {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--color-accent) 4%, transparent), transparent 36rem),
    var(--color-bg);
}

.landing-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid color-mix(in oklab, var(--color-accent) 55%, var(--color-line));
  border-radius: 0.75rem;
  color: var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 8%, var(--color-surface));
}

.landing-fade-up {
  animation: landing-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-fade-up-delay {
  animation-delay: 120ms;
}

.landing-live-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-accent) 12%, transparent);
  animation: landing-pulse 2.6s ease-in-out infinite;
}

.landing-visual {
  background:
    linear-gradient(145deg, color-mix(in oklab, var(--color-accent) 5%, transparent), transparent 42%),
    var(--color-surface);
}

.landing-radar {
  position: relative;
  width: min(100%, 26rem);
  aspect-ratio: 1;
  border: 1px solid color-mix(in oklab, var(--color-accent) 24%, var(--color-line));
  border-radius: 9999px;
  background:
    radial-gradient(circle at center, color-mix(in oklab, var(--color-accent) 11%, transparent), transparent 34%),
    linear-gradient(color-mix(in oklab, var(--color-accent) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--color-accent) 8%, transparent) 1px, transparent 1px),
    var(--color-bg);
  background-size: auto, 12.5% 12.5%, 12.5% 12.5%, auto;
  overflow: hidden;
}

.landing-radar-ring,
.landing-radar-cross,
.landing-sweep {
  position: absolute;
  pointer-events: none;
}

.landing-radar-ring {
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in oklab, var(--color-accent) 18%, transparent);
  border-radius: 9999px;
}

.landing-radar-ring-one { width: 35%; }
.landing-radar-ring-two { width: 62%; }
.landing-radar-ring-three { width: 84%; }

.landing-radar-cross {
  top: 50%;
  left: 8%;
  right: 8%;
  height: 1px;
  background: color-mix(in oklab, var(--color-accent) 14%, transparent);
}

.landing-radar-cross-x { transform: translateY(-50%); }
.landing-radar-cross-y { transform: translateY(-50%) rotate(90deg); }

.landing-sweep {
  top: 50%;
  left: 50%;
  width: 50%;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  box-shadow: 0 0 18px color-mix(in oklab, var(--color-accent) 70%, transparent);
  animation: sweep 7s linear infinite;
}

.landing-radar-center {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in oklab, var(--color-accent) 55%, var(--color-line));
  border-radius: 9999px;
  color: var(--color-accent);
  background: var(--color-bg);
}

.landing-point {
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--color-accent) 13%, transparent), 0 0 15px color-mix(in oklab, var(--color-accent) 55%, transparent);
}

.landing-point-one { top: 24%; left: 61%; }
.landing-point-two { top: 39%; left: 27%; }
.landing-point-three { top: 66%; left: 70%; }
.landing-point-four { top: 74%; left: 42%; }

.landing-radar-label {
  position: absolute;
  color: color-mix(in oklab, var(--color-muted) 85%, transparent);
  font: 0.6rem/1 var(--font-mono);
  letter-spacing: 0.12em;
}

.landing-radar-label-top { top: 6%; left: 50%; transform: translateX(-50%); }
.landing-radar-label-right { top: 50%; right: 6%; transform: translateY(-50%); }
.landing-radar-label-bottom { bottom: 6%; left: 50%; transform: translateX(-50%); }
.landing-radar-label-left { top: 50%; left: 6%; transform: translateY(-50%); }

.landing-float-card,
.landing-card,
.landing-cta {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-fg) 3%, transparent), 0 18px 40px color-mix(in oklab, #000 18%, transparent);
}

.landing-card {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.landing-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--color-accent) 45%, var(--color-line));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-accent) 8%, transparent), 0 18px 40px color-mix(in oklab, #000 24%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .landing-card:hover { transform: none; }
}