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

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

html {
  background-color: #fafaf9;
  color-scheme: light;
}

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;
}

/* Hexagon background animations */
@keyframes hex-drift {
  from { transform: translateX(-5vw); }
  to { transform: translateX(105vw); }
}

@keyframes hex-bob {
  0%, 100% { transform: translateY(var(--bob)); }
  50% { transform: translateY(calc(var(--bob) * -1)); }
}

/* 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);
}

/* Cereal aside — hover to reveal */
@keyframes cereal-wobble {
  0%,
  100% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(6deg);
  }
  45% {
    transform: rotate(-4deg);
  }
  60% {
    transform: rotate(2deg);
  }
  80% {
    transform: rotate(-1deg);
  }
}

.cereal-wobble {
  transform-origin: bottom center;
}

.group:hover .cereal-wobble {
  animation: cereal-wobble 0.8s ease-in-out;
}

.cereal-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition:
    grid-template-rows 0.5s ease-out,
    color 0.2s ease;
}

.group:hover .cereal-reveal {
  grid-template-rows: 1fr;
}

.cereal-reveal > * {
  overflow: hidden;
}

.cereal-text {
  opacity: 0;
  transition:
    opacity 0.4s ease-out,
    color 0.2s ease;
}

.group:hover .cereal-text {
  opacity: 1;
  transition-delay: 0.2s, 0s;
}

/* Aurora gradient animation for pricing hero */
@keyframes aurora-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.1); }
  66% { transform: translate(-20px, 15px) scale(0.9); }
}

@keyframes aurora-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-40px, 20px) scale(1.15); }
  66% { transform: translate(25px, -30px) scale(0.95); }
}

@keyframes aurora-3 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(20px, 25px) scale(1.1) rotate(3deg); }
}

@keyframes aurora-4 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  40% { transform: translate(-35px, -15px) scale(1.2) rotate(-2deg); }
  70% { transform: translate(15px, 20px) scale(0.9) rotate(1deg); }
}

@keyframes aurora-5 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30% { transform: translate(25px, 30px) scale(1.15); }
  60% { transform: translate(-30px, -10px) scale(0.95); }
}

/* Hide scrollbar for pill groups on mobile */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}