@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body,
#root {
  height: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

html.dark {
  background-color: #0a0e1a;
  color-scheme: dark;
}

/* Smooth theme transitions (scoped to avoid map performance issues) */
body,
div,
aside,
section,
header,
nav,
button,
input,
select,
label,
span,
p,
h1,
h2,
h3 {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

/* Fade-in animation for homepage sections */
.fade-in-section {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.fade-in-visible {
  opacity: 1;
  transform: translateY(0);
}