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

/* Hide scrollbar for horizontal navigation */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 0%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 0%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 0%;
    --primary: 0 84% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 0%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 40%;
    --accent: 0 84% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 0 84% 50%;
    --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% 0%;
    --foreground: 0 0% 100%;
    --card: 0 0% 5%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 5%;
    --popover-foreground: 0 0% 100%;
    --primary: 0 84% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 10%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 10%;
    --muted-foreground: 0 0% 60%;
    --accent: 0 84% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 15%;
    --input: 0 0% 15%;
    --ring: 0 84% 50%;
    --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;
  }
  
  /* RTL Support */
  [dir="rtl"] {
    direction: rtl;
  }
  
  [dir="rtl"] .text-left {
    text-align: right;
  }
  
  [dir="rtl"] .text-right {
    text-align: left;
  }
  
  [dir="rtl"] .ml-auto {
    margin-left: 0;
    margin-right: auto;
  }
  
  [dir="rtl"] .mr-auto {
    margin-right: 0;
    margin-left: auto;
  }
  
  /* RTL spacing adjustments */
  [dir="rtl"] .space-x-2 > * + * {
    margin-left: 0;
    margin-right: 0.5rem;
  }
  
  [dir="rtl"] .space-x-3 > * + * {
    margin-left: 0;
    margin-right: 0.75rem;
  }
  
  [dir="rtl"] .space-x-4 > * + * {
    margin-left: 0;
    margin-right: 1rem;
  }
  
  [dir="rtl"] .space-x-6 > * + * {
    margin-left: 0;
    margin-right: 1.5rem;
  }
  
  [dir="rtl"] .space-x-8 > * + * {
    margin-left: 0;
    margin-right: 2rem;
  }
  
  /* RTL flex direction for icons */
  [dir="rtl"] .flex-row-reverse {
    flex-direction: row;
  }
  
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #dc2626;
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #b91c1c;
  }
  
  /* Smooth animations */
  * {
    transition: all 0.2s ease-in-out;
  }
  
  /* Glass morphism effect */
  .glass {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* Enhanced glass morphism */
  .glassmorphism {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  /* Professional shadow variations */
  .shadow-professional {
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1), 0 4px 25px -5px rgba(0, 0, 0, 0.05);
  }

  .shadow-professional-lg {
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.15), 0 8px 40px -5px rgba(0, 0, 0, 0.1);
  }

  .shadow-professional-xl {
    box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.2), 0 12px 50px -5px rgba(0, 0, 0, 0.15);
  }
  
  /* Gradient text */
  .gradient-text {
    background: linear-gradient(135deg, #dc2626, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* Floating animation */
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }
  
  .float {
    animation: float 3s ease-in-out infinite;
  }
  
  /* Text animations */
  @keyframes slideInUp {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideInLeft {
    0% {
      opacity: 0;
      transform: translateX(-30px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes fadeInScale {
    0% {
      opacity: 0;
      transform: scale(0.9);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes typewriter {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }
  
  @keyframes blink {
    0%, 50% {
      border-color: transparent;
    }
    51%, 100% {
      border-color: #dc2626;
    }
  }
  
  .animate-slide-up {
    animation: slideInUp 0.8s ease-out forwards;
  }
  
  .animate-slide-left {
    animation: slideInLeft 0.8s ease-out forwards;
  }
  
  .animate-fade-scale {
    animation: fadeInScale 1s ease-out forwards;
  }
  
  .animate-delay-200 {
    animation-delay: 0.2s;
  }
  
  .animate-delay-400 {
    animation-delay: 0.4s;
  }
  
  .animate-delay-600 {
    animation-delay: 0.6s;
  }
  
  /* Typewriter effect */
  .typewriter {
    overflow: hidden;
    border-right: 2px solid #dc2626;
    white-space: nowrap;
    animation: typewriter 2s steps(25) forwards, blink 1s infinite;
  }
  
  /* Pulse animation */
  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(220, 38, 38, 0.3); }
    50% { box-shadow: 0 0 30px rgba(220, 38, 38, 0.6); }
  }
  
  .pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
  }
  
  
  /* Service showcase animations */
  @keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(50px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes serviceRotate {
    0%, 20% { opacity: 1; transform: translateY(0); }
    25%, 95% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes progressBar {
    0% { width: 0%; }
    100% { width: 100%; }
  }
  
  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }
  
  .animate-slide-right {
    animation: slideInRight 0.8s ease-out forwards;
  }
  
  .service-rotate {
    animation: serviceRotate 4s ease-in-out infinite;
  }
  
  .service-rotate:nth-child(2) {
    animation-delay: 1.3s;
  }
  
  .service-rotate:nth-child(3) {
    animation-delay: 2.6s;
  }
  
  .progress-animate {
    animation: progressBar 3s ease-out infinite;
  }
  
  .pulse-gentle {
    animation: pulse 2s ease-in-out infinite;
  }

  /* Enhanced professional animations */
  @keyframes morph {
    0%, 100% { border-radius: 1rem; }
    50% { border-radius: 2rem; }
  }

  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  @keyframes bounceIn {
    0% {
      opacity: 0;
      transform: scale(0.3) translateY(50px);
    }
    50% {
      opacity: 1;
      transform: scale(1.05) translateY(-10px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @keyframes glow {
    0%, 100% {
      box-shadow: 0 0 20px rgba(220, 38, 38, 0.3);
      filter: brightness(1);
    }
    50% {
      box-shadow: 0 0 40px rgba(220, 38, 38, 0.6);
      filter: brightness(1.1);
    }
  }

  .animate-morph {
    animation: morph 6s ease-in-out infinite;
  }

  .animate-bounce-in {
    animation: bounceIn 0.8s ease-out forwards;
  }

  .animate-glow {
    animation: glow 3s ease-in-out infinite;
  }

  .shimmer-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent
    );
    animation: shimmer 2s infinite;
  }

  /* Enhanced hover effects */
  .hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  .hover-glow:hover {
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.4);
  }

  /* Professional gradient backgrounds */
  .bg-gradient-professional {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  .bg-gradient-warm {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  }

  .bg-gradient-cool {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }

  .bg-gradient-sunset {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  }

  /* Card swapping animations */
  @keyframes cardSwapIn {
    0% {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes cardSwapOut {
    0% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translateY(-20px) scale(0.95);
    }
  }

  @keyframes gentlePulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    }
    50% {
      transform: scale(1.05);
      box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
    }
  }

  .animate-card-swap-in {
    animation: cardSwapIn 0.8s ease-out forwards;
  }

  .animate-card-swap-out {
    animation: cardSwapOut 0.8s ease-in forwards;
  }

  .animate-gentle-pulse {
    animation: gentlePulse 2s ease-in-out infinite;
  }
  
  /* Mobile-specific improvements */
  @media (max-width: 768px) {
    .mobile-padding {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .mobile-text {
      font-size: 1.5rem;
      line-height: 1.4;
    }

    .mobile-card {
      margin-bottom: 1rem;
    }

    /* Ensure text is readable on mobile */
    body {
      font-size: 16px;
      line-height: 1.6;
    }

    /* Improve button touch targets */
    button, .button, a[role="button"] {
      min-height: 44px;
      min-width: 44px;
      padding: 12px 16px;
    }

    /* Better spacing for mobile */
    .container, .max-w-7xl, .max-w-5xl {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    /* Stack grid items vertically on mobile */
    .grid {
      gap: 1rem;
    }

    /* Make hero text more readable on mobile */
    h1 {
      font-size: 2rem;
      line-height: 1.2;
    }

    h2 {
      font-size: 1.75rem;
      line-height: 1.3;
    }

    /* Improve form inputs on mobile */
    input, textarea, select {
      font-size: 16px; /* Prevents zoom on iOS */
      padding: 12px;
    }

    /* Better video responsiveness */
    video {
      width: 100%;
      height: auto;
    }

    /* Mobile touch optimizations */
    .touch-manipulation {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    /* Ensure fixed bottom elements don't overlap with mobile browser UI */
    [class*="fixed bottom-"] {
      padding-bottom: env(safe-area-inset-bottom);
    }

    /* Better scrolling on mobile */
    .overflow-y-auto {
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
  }
  
  /* iPad specific optimizations */
  @media (min-width: 768px) and (max-width: 1024px) {
    .tablet-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .tablet-spacing {
      padding: 2rem;
    }

    /* Better text sizing for tablets */
    h1 {
      font-size: 2.5rem;
    }

    h2 {
      font-size: 2rem;
    }

    /* Improved button sizing for tablets */
    button, .button {
      padding: 14px 20px;
      font-size: 16px;
    }

    /* Better grid layouts for tablets */
    .grid-cols-4 {
      grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-3 {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Navigation improvements for tablets */
    .nav-item {
      padding: 12px 16px;
    }
  }
  
  /* Touch-friendly buttons */
  @media (hover: none) and (pointer: coarse) {
    button, .button {
      min-height: 44px;
      min-width: 44px;
    }
  }

  /* Mobile navigation improvements */
  @media (max-width: 768px) {
    /* Hide desktop navigation on mobile */
    .desktop-nav {
      display: none;
    }

    /* Show mobile menu */
    .mobile-nav {
      display: block;
    }

    /* Better mobile menu styling */
    .mobile-menu {
      position: relative;
      width: 100%;
      background: white;
      border-top: 1px solid #e5e7eb;
      max-height: 70vh;
      overflow-y: auto;
    }

    /* Mobile menu items */
    .mobile-menu-item {
      display: block;
      width: 100%;
      padding: 16px 20px;
      border-bottom: 1px solid #f3f4f6;
      font-size: 16px;
      text-align: left;
    }

    .mobile-menu-item:hover {
      background-color: #f9fafb;
    }

    /* Mobile dropdown styling */
    .mobile-dropdown {
      background-color: #f9fafb;
      padding-left: 40px;
    }

    /* Prevent text overlap in mobile menu */
    @media (max-width: 768px) {
      .mobile-menu a,
      .mobile-menu button {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.5;
        display: block;
        width: 100%;
        box-sizing: border-box;
      }

      /* Completely hide NavigationMenu on mobile - ULTRA AGGRESSIVE */
      [data-radix-navigation-menu],
      [data-radix-navigation-menu-content],
      [data-radix-navigation-menu-viewport],
      [data-radix-navigation-menu-indicator],
      [data-radix-navigation-menu-list],
      [data-radix-navigation-menu-item],
      [data-radix-navigation-menu-trigger] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: fixed !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        max-width: 0 !important;
        max-height: 0 !important;
      }

      /* Hide desktop navigation completely */
      nav > div > div:has([data-radix-navigation-menu]),
      nav [data-radix-navigation-menu] {
        display: none !important;
      }

      /* Hide ALL desktop dropdowns on mobile - AGGRESSIVE */
      nav .group > div.absolute,
      nav .group:hover > div,
      nav div[class*="absolute"][class*="top-full"],
      nav div[class*="group-hover"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: fixed !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
      }

      /* Hide desktop nav container on mobile */
      nav > div > div.hidden.md\\:flex,
      nav > div > div:has(.group) {
        display: none !important;
      }

      /* Prevent any hover effects on mobile */
      @media (hover: none) and (pointer: coarse) {
        nav .group:hover > div,
        nav .group > div {
          display: none !important;
        }
      }

      /* Ensure mobile menu is on top and isolated */
      .mobile-menu-container {
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99999 !important;
        background: white !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
        isolation: isolate !important;
      }

      /* KILL ALL OLD SERVICES - ONLY 6 AI SERVICES ALLOWED */
      .mobile-menu-container a[href*="emails-requests"],
      .mobile-menu-container a[href*="customer-support"],
      .mobile-menu-container a[href*="phone-calls"],
      .mobile-menu-container a[href*="document-processing"],
      .mobile-menu-container a[href*="data-analysis"],
      .mobile-menu-container a[href*="engineering-intelligence"],
      .mobile-menu-container a[href*="engineering-consultancy"],
      .mobile-menu-container a[href*="procurement-intelligence"],
      .mobile-menu-container a[href*="video-intelligence"],
      .mobile-menu-container a[href*="operational-automation"],
      .mobile-menu-container a[href*="industry-solutions"],
      .mobile-menu-container a[href*="control-transparency"] {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
      }

      /* KILL ANY DESKTOP DROPDOWN THAT APPEARS ON MOBILE - NUCLEAR OPTION */
      nav > div > div.hidden.md\\:flex .group > div,
      nav > div > div.hidden.md\\:flex div[class*="absolute"],
      nav > div > div.hidden.md\\:flex div[class*="shadow-lg"],
      nav > div > div.hidden.md\\:flex ul[class*="grid"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: fixed !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        max-width: 0 !important;
        max-height: 0 !important;
        z-index: -9999 !important;
      }
    }
  }

  /* Tablet-specific navigation */
  @media (min-width: 768px) and (max-width: 1024px) {
    .tablet-nav {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .tablet-nav-item {
      padding: 8px 12px;
      font-size: 14px;
    }
  }

  /* 3D Flip Card Animations */
  .perspective-1000 {
    perspective: 1000px;
  }

  .transform-style-preserve-3d {
    transform-style: preserve-3d;
  }

  .backface-hidden {
    backface-visibility: hidden;
  }

  .rotate-y-180 {
    transform: rotateY(180deg);
  }
}