/* --- Load Poppins first --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* --- Global font override (works with Tailwind CDN) --- */
html, body {
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Inter, "Noto Sans", "Helvetica Neue", Arial,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Ensure Tailwind's .font-sans uses Poppins even if config isn't set */
.font-sans {
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Inter, "Noto Sans", "Helvetica Neue", Arial, sans-serif !important;
}

/* ===== (optional) keep if you also compile Tailwind locally =====
@tailwind base;
@tailwind components;
@tailwind utilities;
*/

/* ---------- Animations ---------- */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.animate-marquee { display: inline-block; animation: marquee 20s linear infinite; }

@keyframes slideInLeft {
  0% { opacity: 0; transform: translateX(-50px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fly-in { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

.animate-fade-in { animation: fade-in 0.8s ease forwards; }
.animate-slide-up { animation: slide-up 0.8s ease forwards; }
.animate-fly-in { animation: fly-in 0.8s ease forwards; }

.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-500 { animation-delay: 0.5s; }
.delay-700 { animation-delay: 0.7s; }
.delay-900 { animation-delay: 0.9s; }
.delay-\[1100ms\] { animation-delay: 1.1s; }
.delay-\[1300ms\] { animation-delay: 1.3s; }

/* ---------- Scroll-trigger base & variants ---------- */
.animate-on-scroll {
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-left.visible  { animation: slideInLeft 0.8s ease-out forwards; }
.animate-right.visible { animation: slideInRight 0.8s ease-out forwards; }

/* ---------- Hero readability & mobile niceties ---------- */
.slide .bg-cover::before {
  content: "";
  display: block;
}

/* Reduce tap highlight on buttons/links (mobile) */
button, a { -webkit-tap-highlight-color: transparent; }

/* Prevent horizontal scrolling and horizontal pull-to-pan on mobile */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  touch-action: pan-y;          /* only vertical panning */
  overscroll-behavior-x: none;  /* stop sideways overscroll glow/back swipe */
}

/* Make sure nothing accidentally expands the layout */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Images never exceed viewport width */
img {
  max-width: 100%;
  height: auto;
}

#mobileMenu {
  contain: layout paint;   /* isolates layout/paint to the element */
  will-change: transform;  /* keeps GPU transform smooth and isolated */
}