@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Lora:wght@400;500;600;700&display=swap");

:root {
  --background: 0 0% 99%;
  --foreground: 215 25% 15%;
  --primary: 0 75% 38%;
  --primary-foreground: 0 0% 100%;
  --secondary: 45 96% 58%;
  --secondary-foreground: 215 25% 15%;
  --muted: 220 14% 96%;
  --muted-foreground: 215 14% 45%;
  --accent: 45 96% 58%;
  --accent-foreground: 215 25% 15%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 0 75% 38%;
  --card: 0 0% 100%;
  --card-foreground: 215 25% 15%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --chart-1: 0 75% 38%;
  --chart-2: 45 96% 58%;
  --chart-3: 215 25% 27%;
  --chart-4: 120 40% 45%;
  --chart-5: 280 60% 50%;
  --radius: .75rem;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: ui-sans-serif, system-ui, sans-serif;
}

::selection { background: hsl(var(--primary) / .25); }

/* ---------- Scroll-reveal (mimics Framer Motion whileInView) ---------- */
[data-reveal] {
  opacity: 0;
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-reveal="up"]      { transform: translateY(20px); }
[data-reveal="up-sm"]   { transform: translateY(15px); }
[data-reveal="up-lg"]   { transform: translateY(24px); }
[data-reveal="left"]    { transform: translateX(-10px); }
[data-reveal="right"]   { transform: translateX(20px); }
[data-reveal="right-lg"]{ transform: translateX(30px); }
[data-reveal="scale"]   { transform: scale(.8); }
[data-reveal="scale-sm"]{ transform: scale(.9); }
[data-reveal="scale-90"]{ transform: scale(.85); }
[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* ---------- Mobile nav panel ---------- */
#mobile-menu-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease;
}
#mobile-menu-panel.open {
  max-height: 32rem;
  opacity: 1;
}

/* ---------- Accordion (Read More / officials) ---------- */
.accordion-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .3s ease;
}
.accordion-content.open {
  max-height: 2000px;
  opacity: 1;
}
.accordion-chevron { transition: transform .25s ease; }
.accordion-chevron.rotated { transform: rotate(180deg); }

/* ---------- Timeline ---------- */
.timeline-dot { transition: transform .2s ease; }

/* Fade-up utility for hero (already in view on load) */
.hero-fade {
  animation: heroFadeIn .8s cubic-bezier(.16,1,.3,1) both;
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Subtle floating animation for badges */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.animate-float { animation: floatY 4s ease-in-out infinite; }