/* styles.css */
:root {
  --brand-primary: #60cdff;
  --brand-secondary: #002991;
  --bg-deep: #050712;
  --bg-ink: #070b14;
}

html,
body {
  height: 100%;
}

body {
  background: radial-gradient(1200px 600px at 50% -10%, rgba(96, 205, 255, 0.12), transparent 55%),
    radial-gradient(900px 500px at 20% 110%, rgba(0, 41, 145, 0.24), transparent 55%),
    radial-gradient(700px 420px at 110% 20%, rgba(96, 205, 255, 0.08), transparent 55%),
    var(--bg-deep);
}

/* Set the baseline line-height for the whole document. */
html {
  line-height: 1;
}

body {
  line-height: inherit;
}

/* apply inheritance to everything (including pseudo-elements) */
*, *::before, *::after {
  line-height: inherit;
}

.text-sm {
    line-height: 1 !important;
}

/* Subtle vignette overlay */
.bg-vignette {
  background: radial-gradient(1200px 600px at 50% 10%, rgba(255, 255, 255, 0.02), transparent 60%),
    radial-gradient(900px 600px at 50% 90%, rgba(0, 0, 0, 0.55), transparent 60%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
}

/* Lightweight grid texture */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(closest-side at 50% 25%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

/* Brand glow text */
.glow-text {
  text-shadow:
    0 0 18px rgba(96, 205, 255, 0.28),
    0 0 40px rgba(96, 205, 255, 0.12);
}

/* Consistent visible focus ring */
.focus-brand:focus {
  outline: none;
}

.focus-brand:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(5, 7, 18, 0.85),
    0 0 0 4px rgba(96, 205, 255, 0.65),
    0 10px 30px rgba(96, 205, 255, 0.12);
}

/* Slow, subtle pulse (performance-friendly) */
@keyframes pulseSlow {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.75;
  }
  50% {
    transform: translateX(-50%) scale(1.06);
    opacity: 1;
  }
}

.animate-pulseSlow {
  animation: pulseSlow 10s ease-in-out infinite;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .animate-pulseSlow {
    animation: none;
  }
}