/* CRITICAL CSS - Base Resets, Typography, Layout Grid */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800&display=swap');

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;
    --primary: 262 80% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 222 47% 11%;
    --secondary-foreground: 0 0% 100%;
    --accent: 210 40% 96%;
    --accent-foreground: 222 47% 11%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 40%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 262 80% 50%;
    --radius: 1rem;
  }

  .dark {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;
    --primary: 262 80% 65%;
    --primary-foreground: 222 47% 11%;
    --secondary: 217 32% 17%;
    --secondary-foreground: 210 40% 98%;
    --accent: 217 32% 17%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62% 30%;
    --destructive-foreground: 210 40% 98%;
    --muted: 217 32% 17%;
    --muted-foreground: 215 20% 70%;
    --card: 222 47% 11%;
    --card-foreground: 210 40% 98%;
    --popover: 222 47% 11%;
    --popover-foreground: 210 40% 98%;
    --border: 217 32% 25%;
    --input: 217 32% 25%;
    --ring: 262 80% 65%;
  }

  * {
    @apply border-border;
  }
  
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.625;
  }

  :focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply text-balance text-foreground tracking-tight;
    font-family: 'Playfair Display', Georgia, serif;
  }

  h1 { @apply text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6 leading-tight; letter-spacing: -0.02em; }
  h2 { @apply text-2xl sm:text-3xl md:text-4xl font-bold mb-5 mt-10 leading-snug; }
  h3 { @apply text-xl sm:text-2xl md:text-3xl font-semibold mb-4 mt-8 leading-snug; }

  p {
    @apply mb-6 text-base max-w-[65ch] text-muted-foreground leading-relaxed;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .tap-target {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }

  .contain-strict {
    contain: strict;
  }
  .contain-content {
    contain: content;
  }
  .contain-layout-paint {
    contain: layout paint;
  }
  .hardware-accelerated {
    transform: translateZ(0);
    will-change: transform;
  }

  /* No Scrollbar Utility */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
}

@layer components {
  /* Common Container Setup */
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Custom SVG Icon Styles and Animations */
  .icon-health,
  .icon-age,
  .icon-finance,
  .icon-conversion,
  .icon-scientific,
  .icon-investment {
    @apply transition-transform duration-300 ease-in-out origin-center;
  }

  /* Icon Container Interactions */
  .icon-container {
    @apply flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10 text-primary transition-all duration-300;
  }

  .icon-container:hover,
  .group:hover .icon-container {
    @apply bg-primary/20 scale-110 shadow-sm;
  }

  .group:hover .icon-health {
    @apply scale-110 text-rose-500;
    animation: heartbeat 1.5s ease-in-out infinite;
  }
  
  .group:hover .icon-finance {
    @apply scale-110 text-emerald-500;
  }
  
  .group:hover .icon-scientific {
    @apply scale-110 text-blue-500 rotate-12;
  }
  
  .group:hover .icon-age {
    @apply scale-110 text-amber-500;
    animation: tick-tock 2s linear infinite;
  }

  .group:hover .icon-conversion {
    @apply scale-110 text-indigo-500;
    transform: rotate(180deg);
  }

  .group:hover .icon-investment {
    @apply scale-110 text-teal-500 -translate-y-1;
  }

  /* 404 Page Specific Styles */
  .not-found-illustration {
    @apply transition-all duration-700 ease-out;
    animation: float-slow 6s ease-in-out infinite;
  }

  /* Global Ad Container Styles */
  .adsbygoogle {
    @apply flex justify-center items-center w-full;
  }

  .ad-container {
    @apply my-8 relative flex flex-col items-center transition-all duration-300;
    contain: layout;
  }

  .ad-section-break {
    @apply my-12 py-8 bg-muted/10 border-y border-border/50;
  }

  .ad-sidebar {
    @apply sticky top-24 mb-8 min-h-[300px] w-full bg-muted/5 rounded-2xl border border-border/40 p-4 shadow-sm;
  }

  .ad-footer {
    @apply mt-16 mb-8 pt-8 border-t border-border/50 w-full flex justify-center bg-muted/10 pb-8;
  }
}

/* Animations */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  60% { transform: scale(1); }
}

@keyframes tick-tock {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
  @layer components {
    .desktop-only {
      display: none !important;
    }
    
    .mobile-optimized-container {
      @apply px-4 py-6;
      contain: layout paint;
    }

    .ad-container {
      @apply my-6;
      min-height: 250px;
    }
    
    .ad-sidebar {
      @apply relative top-0 min-h-[250px] mb-6 rounded-xl border-x-0 border-y;
    }
  }

  h1 { @apply text-3xl mb-4 mt-6; }
  h2 { @apply text-2xl mb-4 mt-8; }
  h3 { @apply text-xl mb-3 mt-6; }
  p { @apply text-[15px] mb-5; }
}