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

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

/* Modal scroll lock (used by React modals like VideoModal) */
html {
  scrollbar-gutter: stable;
}

html[data-modal-open="true"],
html[data-modal-open="true"] body {
  overflow: hidden;
}

/* Lenis Smooth Scroll */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* Noise Overlay */
.bg-noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Smooth Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 5px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

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

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Text Selection */
::selection {
  background-color: rgba(254, 108, 0, 0.2);
  color: #FE6C00;
}

/* ============================================
   ZOOM-AWARE RESPONSIVE DESIGN
   ============================================ */

/* CSS Custom Properties for zoom-aware scaling */
:root {
  --zoom-factor: 1;
  --base-font-size: 16px;
  --fluid-scale: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
}

/* Detect zoom level and adjust base font size */
/* This helps maintain proper scaling at different zoom levels */
@media (min-resolution: 144dpi) {
  :root {
    --zoom-factor: 1.5;
    --base-font-size: 10.67px; /* 16px / 1.5 */
  }
}

/* Fluid Typography Utilities */
.text-fluid-xs {
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
}

.text-fluid-sm {
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
}

.text-fluid-base {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

.text-fluid-lg {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
}

.text-fluid-xl {
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
}

.text-fluid-2xl {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
}

.text-fluid-3xl {
  font-size: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem);
}

.text-fluid-4xl {
  font-size: clamp(2.25rem, 1.8rem + 2.25vw, 3rem);
}

.text-fluid-5xl {
  font-size: clamp(3rem, 2.4rem + 3vw, 4rem);
}

.text-fluid-6xl {
  font-size: clamp(3.75rem, 3rem + 3.75vw, 4.5rem);
}

.text-fluid-7xl {
  font-size: clamp(4.5rem, 3.6rem + 4.5vw, 5.5rem);
}

/* Fluid Spacing Utilities */
.spacing-fluid-xs {
  padding: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
}

.spacing-fluid-sm {
  padding: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
}

.spacing-fluid-md {
  padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}

.spacing-fluid-lg {
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
}

.spacing-fluid-xl {
  padding: clamp(2rem, 1.6rem + 2vw, 3rem);
}

/* Container Queries Support (for zoom-aware layouts) */
/* Note: Container queries require the parent to have container-type: inline-size */
.container-responsive {
  container-type: inline-size;
  container-name: responsive-container;
}

@container responsive-container (min-width: 640px) {
  .container-sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container responsive-container (min-width: 768px) {
  .container-md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .container-md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container responsive-container (min-width: 1024px) {
  .container-lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Zoom-aware breakpoints using actual viewport dimensions */
/* These account for zoomed viewports (e.g., 1920px at 150% = 1280px effective) */
@media (max-width: 1279px) {
  /* Effective viewport at 150% zoom on 1920px */
  .zoom-aware\:text-sm {
    font-size: 0.875rem;
  }
  
  .zoom-aware\:text-base {
    font-size: 1rem;
  }
  
  .zoom-aware\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .zoom-aware\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (max-width: 1023px) {
  .zoom-aware\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) and (max-width: 1535px) {
  /* 1920px at 150% zoom = 1280px effective */
  .zoom-aware\:max-w-6xl {
    max-width: 72rem;
  }
}


/* Prevent layout shift on zoom */
* {
  box-sizing: border-box;
}

/* Smooth scaling for images and media */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Zoom-aware gap utilities */
.gap-fluid {
  gap: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
}

.gap-fluid-md {
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}

.gap-fluid-lg {
  gap: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
}

.gap-fluid-xl {
  gap: clamp(2rem, 1.6rem + 2vw, 3rem);
}

/* Hero light-mode CTA button (custom) */
.btn-container {
  position: relative;
  width: 200px;
  height: 60px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-back {
  width: 100%;
  height: 100%;
  border: 4px solid rgba(0, 82, 204, 0.65); /* brand.blue */
  border-radius: 25px;
  background: rgba(0, 206, 194, 0.35); /* brand.teal */
  box-shadow:
    0 24px 24px rgba(0, 0, 0, 0.15),
    0 2px 0 rgba(11, 18, 32, 0.35); /* brand.navy */
  transition: all 0.3s ease;
}

.btn-front {
  position: absolute;
  width: 98%;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0.96) 55%, rgba(51, 117, 214, 0.22) 100%); /* white → brand.lightBlue */
  border-radius: 22px;
  border: none;
  transform: translateY(-6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  color: #0052CC; /* brand.blue */
  box-shadow:
    0 8px 18px rgba(0, 206, 194, 0.30), /* brand.teal */
    inset 0 -2px 2px rgba(0, 82, 204, 0.35); /* brand.blue */
  transition: all 0.1s ease;
  overflow: hidden;
  animation: glow-up 2s infinite ease-in-out;
}

@keyframes glow-up {
  50% {
    transform: translateY(-8px);
    box-shadow:
      0 10px 28px rgba(0, 206, 194, 0.45), /* brand.teal */
      0 0 0 1px rgba(0, 82, 204, 0.20), /* brand.blue */
      inset 0 -2px 2px rgba(0, 82, 204, 0.35);
  }
}

.btn-front p {
  position: absolute;
  transition: all 0.3s ease;
  margin: 0;
}

.btn-front svg {
  position: absolute;
  left: 100%;
  transition: all 0.3s ease;
}

.btn-container:hover .btn-back {
  background: rgba(0, 82, 204, 0.06); /* brand.blue */
  transform: translateY(4px);
  box-shadow:
    0 12px 12px rgba(0, 0, 0, 0.15),
    0 2px 0 rgba(11, 18, 32, 0.35); /* brand.navy */
}

.btn-container:hover .btn-front {
  transform: translateY(-8px);
  box-shadow:
    0 10px 26px rgba(0, 206, 194, 0.25),
    inset 0 -2px 2px rgba(0, 82, 204, 0.35);
  animation: none;
}

.btn-container:hover .btn-front p {
  transform: translateX(-12px);
}

.btn-container:hover .btn-front svg {
  left: 80%;
}

.btn-container:active .btn-front {
  transform: translateY(2px);
  box-shadow:
    0 0 60px rgba(0, 206, 194, 0.55), /* brand.teal */
    inset 0 -2px 2px rgba(0, 82, 204, 0.35);
}

/* SEO-friendly H1: short class names for crawler detection */
.hero-title {
  @apply text-4xl md:text-6xl font-extrabold text-brand-navy dark:text-white leading-[1.1] mb-6 tracking-tight;
}
.hero-title-span {
  @apply text-transparent bg-clip-text bg-gradient-to-r from-brand-blue via-brand-lightBlue to-brand-teal;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}



@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}