/* =========================================================
  Trackly — minimal custom CSS on top of Tailwind
  Goal: tiny, purposeful, performance-friendly.
========================================================= */

/* 1) Better base rendering */
:root {
  color-scheme: light;
}

html:focus-within {
  scroll-behavior: smooth;
}

/* 2) Subtle futuristic background (clean, not glowy)
   - Lightweight: just a couple of gradients
   - Works in dark mode too if you add later
*/
body {
  background-image:
    radial-gradient(1200px 600px at 10% 0%, rgba(15, 23, 42, 0.06), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(15, 23, 42, 0.05), transparent 55%),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.02), transparent 25%);
  background-attachment: fixed;
}

/* 3) Scroll lock when modal is open */
body.modal-open {
  overflow: hidden;
}

/* 4) Scroll-spy active link hook
   JS will toggle .is-active on .nav-link elements
*/
.nav-link.is-active {
  color: rgb(15 23 42);              /* slate-900 */
  background: rgb(241 245 249);      /* slate-100 */
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

/* 5) Micro-interactions that feel premium (but subtle) */
.nav-link,
button,
a {
  transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

button:active,
a:active {
  transform: translateY(0.5px);
}

/* 6) Improve “focus visible” clarity without ugly outlines */
:focus-visible {
  outline: none; /* Tailwind rings handle most, but keep this safe */
}

/* 7) Modal animation (tiny and fast)
   JS will show/hide via .hidden on overlay; we add a mild scale on the dialog
*/
#modalOverlay:not(.hidden) #modal {
  animation: modalIn 140ms ease-out;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 8) FAQ panel transition helper
   We’ll animate height via JS (set style.height = scrollHeight)
*/
.faq-panel {
  overflow: hidden;
  will-change: height;
}

/* 9) Compact mode hook (saved to localStorage)
   JS will set: document.documentElement.dataset.compact = "true"
*/
:root[data-compact="true"] #demo .rounded-3xl,
:root[data-compact="true"] #demo .rounded-2xl {
  /* Slightly tighter feel in compact mode */
  border-radius: 18px;
}

:root[data-compact="true"] #demo .p-6 {
  padding: 1.125rem; /* ~18px */
}

:root[data-compact="true"] #demo .space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.75rem; /* reduce vertical spacing */
}

/* 10) Respect Reduced Motion (accessibility + Lighthouse)
   If user prefers reduced motion: remove animations/transitions.
*/
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}