@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  /* Premium Dark Construction Theme - Enhanced */
  --background: oklch(0.1849 0.0721 275.69);
  --foreground: oklch(0.9735 0.0379 162.93);
  --card: oklch(0.1 0.01 270);
  --card-foreground: oklch(0.98 0 0);
  --popover: oklch(0.4732 0.0715 201.04);
  --popover-foreground: oklch(0.98 0 0);
  --primary: oklch(0.7467 0.1307 230.69);
  --primary-foreground: oklch(0.06 0.008 270);
  --secondary: oklch(0.55 0.18 280);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.18 0.01 270);
  --muted-foreground: oklch(0.9467 0.0501 168.22);
  --accent: oklch(0.65 0.22 180);
  --accent-foreground: oklch(0.06 0.008 270);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.2 0.015 270);
  --input: oklch(0.12 0.008 270);
  --ring: oklch(0.72 0.2 38);
  --chart-1: oklch(0.72 0.2 38);
  --chart-2: oklch(0.65 0.22 180);
  --chart-3: oklch(0.55 0.18 280);
  --chart-4: oklch(0.7 0.18 150);
  --chart-5: oklch(0.65 0.2 30);
  --radius: 0.25rem;
  --sidebar: oklch(0.08 0.008 270);
  --sidebar-foreground: oklch(0.98 0 0);
  --sidebar-primary: oklch(0.72 0.2 38);
  --sidebar-primary-foreground: oklch(0.06 0.008 270);
  --sidebar-accent: oklch(0.15 0.01 270);
  --sidebar-accent-foreground: oklch(0.98 0 0);
  --sidebar-border: oklch(0.2 0.015 270);
  --sidebar-ring: oklch(0.72 0.2 38);

  /* Extended Premium Colors */
  --gold: oklch(0.7215 0.0505 227.28);
  --copper: oklch(0.5996 0.0446 233.96);
  --emerald: oklch(0.65 0.22 160);
  --sapphire: oklch(0.55 0.22 260);
  --ruby: oklch(0.6871 0.0495 234.78);
}

.dark {
  --background: oklch(0.8812 0.0105 261.79);
  --foreground: oklch(0.2184 0.0395 252.73);
  --card: oklch(0.5371 0.0582 238.12);
  --card-foreground: oklch(0.8832 0.0099 252.82);
  --popover: oklch(0.4732 0.0715 201.04);
  --popover-foreground: oklch(0.98 0 0);
  --primary: oklch(0.75 0.18 45);
  --primary-foreground: oklch(0.08 0.005 250);
  --secondary: oklch(0.18 0.005 250);
  --secondary-foreground: oklch(0.9 0 0);
  --muted: oklch(0.2 0.005 250);
  --muted-foreground: oklch(0.6 0 0);
  --accent: oklch(0.75 0.18 45);
  --accent-foreground: oklch(0.08 0.005 250);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.22 0.01 250);
  --input: oklch(0.15 0.005 250);
  --ring: oklch(0.75 0.18 45);
  --chart-1: oklch(0.75 0.18 45);
  --chart-2: oklch(0.6 0.15 200);
  --chart-3: oklch(0.5 0.1 280);
  --chart-4: oklch(0.7 0.15 150);
  --chart-5: oklch(0.65 0.2 30);
  --sidebar: oklch(0.1 0.005 250);
  --sidebar-foreground: oklch(0.98 0 0);
  --sidebar-primary: oklch(0.75 0.18 45);
  --sidebar-primary-foreground: oklch(0.08 0.005 250);
  --sidebar-accent: oklch(0.18 0.005 250);
  --sidebar-accent-foreground: oklch(0.98 0 0);
  --sidebar-border: oklch(0.22 0.01 250);
  --sidebar-ring: oklch(0.75 0.18 45);
}

@theme inline {
  --font-sans: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  --font-mono: 'Space Grotesk', 'Space Grotesk Fallback', monospace;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
    /* Browser compatibility: box-sizing */
    box-sizing: border-box;
  }
  html {
    /* Fallback for browsers that don't support oklch */
    background-color: #0a0a14;
    color: #f5f5f5;
    /* Smooth scrolling with fallback */
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    @apply bg-background text-foreground;
    /* Fallback styles for older browsers */
    min-height: 100vh;
    min-height: 100dvh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  /* Focus styles for accessibility */
  :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
}

/* ========================================
   BROWSER COMPATIBILITY FALLBACKS
   ======================================== */

/* Fallback for browsers without oklch support */
@supports not (color: oklch(0.5 0.1 180)) {
  :root {
    --background: #0a0a14;
    --foreground: #f5f5f5;
    --card: #111117;
    --card-foreground: #fafafa;
    --popover: #1a1a24;
    --popover-foreground: #fafafa;
    --primary: #3b82f6;
    --primary-foreground: #0a0a14;
    --secondary: #8b5cf6;
    --secondary-foreground: #fafafa;
    --muted: #1e1e28;
    --muted-foreground: #a1a1aa;
    --accent: #10b981;
    --accent-foreground: #0a0a14;
    --destructive: #ef4444;
    --destructive-foreground: #fafafa;
    --border: #27272a;
    --input: #18181b;
    --ring: #3b82f6;
  }
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(20px)) {
  .glass {
    background: rgba(10, 10, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .glass-dark {
    background: rgba(5, 5, 10, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
}

/* Webkit prefix for backdrop-filter */
.glass {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.glass-dark {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* Gradient text fallbacks with vendor prefixes */
.gradient-text,
.gradient-text-premium,
.gradient-text-multicolor {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Fallback for browsers without gradient text support */
@supports not (-webkit-background-clip: text) {
  .gradient-text,
  .gradient-text-premium,
  .gradient-text-multicolor {
    background: none;
    color: #3b82f6;
  }
}

/* Animation fallbacks for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Flexbox fallbacks */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.items-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.justify-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.justify-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

/* Grid fallbacks for IE11 */
@supports not (display: grid) {
  .grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

/* Transform vendor prefixes */
.transform {
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

/* Transition vendor prefixes */
.transition-all {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Fix for Yandex Browser, Telegram Browser, Dzen */
/* These browsers sometimes have issues with modern CSS */

/* Ensure fonts load properly */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Fallback background for hero sections */
section {
  background-color: inherit;
}

/* Ensure images don't overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Button fallback styles */
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

/* Input fallback styles */
input, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
}

/* Custom Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(16, 47, 138, 0.3); }
  50% { box-shadow: 0 0 40px rgba(66, 8, 142, 0.6); }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes count-up {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes border-glow {
  0%, 100% { border-color: rgba(109, 151, 196, 0.3); }
  50% { border-color: rgba(39, 107, 157, 0.8); }
}

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

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

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

.animate-slide-up {
  animation: slide-up 0.8s ease-out forwards;
}

.animate-count-up {
  animation: count-up 0.6s ease-out forwards;
}

.animate-shimmer {
  background: linear-gradient(90deg, transparent, rgba(216, 207, 207, 0.878), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

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

/* Parallax */
.parallax-container {
  perspective: 1000px;
  overflow: hidden;
}

/* Glassmorphism */
.glass {
  background: rgba(5, 56, 86, 0.402);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-dark {
  background: rgba(90, 149, 213, 0.216);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(22, 12, 57, 0.05);
}

/* Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, #2c7490, #5da6d6, #5d32b3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Grid Pattern */
.grid-pattern {
  background-image: 
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Noise Texture */
.noise {
  position: relative;
}

.noise::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
}

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

::-webkit-scrollbar-track {
  background: rgba(4, 87, 78, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(6, 171, 217, 0.82);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(44, 145, 207, 0.8);
}

/* Selection */
::selection {
  background: rgba(68, 241, 250, 0.4);
  color: rgb(224, 224, 224);
}

/* Premium Gradient Backgrounds */
.gradient-mesh {
  background: 
    radial-gradient(at 40% 20%, rgba(59, 103, 142, 0.15) 0px, transparent 50%),
    radial-gradient(at 80% 0%, #5c7bf61a 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(16, 185, 129, 0.1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, rgba(217, 119, 6, 0.08) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(139, 92, 246, 0.08) 0px, transparent 50%);
}

.gradient-aurora {
  background: linear-gradient(
    125deg,
    rgba(6, 59, 217, 0.2) 0%,
    rgba(139, 92, 246, 0.15) 25%,
    rgba(16, 33, 185, 0.15) 50%,
    rgba(6, 20, 217, 0.15) 75%,
    rgba(17, 53, 80, 0.2) 100%
  );
  background-size: 400% 400%;
  animation: aurora 15s ease infinite;
}

@keyframes aurora {
  0%, 100% { background-position: 0% 50%; }
  25% { background-position: 50% 0%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 100%; }
}

/* Morphing Border */
@keyframes morph-border {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
  75% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; }
}

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

/* Glow Effects */
.glow-primary {
  box-shadow: 
    0 0 20px rgba(6, 122, 217, 0.3),
    0 0 40px rgba(6, 217, 171, 0.2),
    0 0 60px rgba(6, 133, 217, 0.1);
}

.glow-secondary {
  box-shadow: 
    0 0 20px rgba(139, 92, 246, 0.3),
    0 0 40px rgba(139, 92, 246, 0.2),
    0 0 60px rgba(139, 92, 246, 0.1);
}

.glow-accent {
  box-shadow: 
    0 0 20px rgba(16, 185, 129, 0.3),
    0 0 40px rgba(16, 185, 129, 0.2),
    0 0 60px rgba(16, 185, 129, 0.1);
}

/* Text Gradient Variations */
.gradient-text-premium {
  background: linear-gradient(135deg, #2468fb, #4487c2, #120987, #236aed, #4981a8);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 5s ease infinite;
}

.gradient-text-multicolor {
  background: linear-gradient(135deg, #6994f1, #002150cb, #10b981, #245fa3);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 8s ease infinite;
}

/* Ripple Effect */
@keyframes ripple {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid currentColor;
  border-radius: inherit;
  animation: ripple 1.5s ease-out infinite;
}

/* Magnetic Button Effect */
.magnetic-btn {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 3D Card Effect */
.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-3d:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) translateZ(20px);
}

/* Scan Line Effect */
.scan-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(217, 119, 6, 0.8), transparent);
  animation: scan 3s linear infinite;
}

@keyframes scan {
  0% { top: 0; opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Holographic Effect */
.holographic {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(217, 119, 6, 0.1) 50%,
    rgba(139, 92, 246, 0.1) 75%,
    rgba(255, 255, 255, 0.1) 100%
  );
  background-size: 400% 400%;
  animation: holographic 10s ease infinite;
}

@keyframes holographic {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

/* Liquid Button */
.liquid-btn {
  position: relative;
  overflow: hidden;
}

.liquid-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.liquid-btn:hover::before {
  width: 300%;
  height: 300%;
}

/* Neon Text */
.neon-text {
  text-shadow: 
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 40px currentColor;
}

/* Animated Underline */
.animated-underline {
  position: relative;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #0be9f5, #82b7e9);
  transition: width 0.4s ease;
}

.animated-underline:hover::after {
  width: 100%;
}

/* Stagger Animation */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* Breathing Animation */
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

.animate-breathe {
  animation: breathe 4s ease-in-out infinite;
}

/* Typewriter Effect */
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typewriter 3s steps(40) forwards;
}

/* Particle Trail */
@keyframes particle-trail {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-20px) scale(0); }
}

/* Premium Card Hover */
.premium-card {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
}

.premium-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.premium-card:hover::before {
  left: 100%;
}