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

  /* Critical styles are inlined in HTML head for performance */
  /* This file contains non-critical styles loaded asynchronously */

@layer base {
  :root {
    --background: 240 15% 6%;
    --foreground: 220 15% 95%;

    --card: 245 20% 8%;
    --card-foreground: 220 15% 95%;

    --popover: 245 20% 8%;
    --popover-foreground: 220 15% 95%;

    --primary: 215 85% 35%;
    --primary-foreground: 220 15% 95%;

    --secondary: 45 95% 70%;
    --secondary-foreground: 240 15% 6%;

    --muted: 245 15% 15%;
    --muted-foreground: 220 10% 70%;

    --accent: 210 70% 45%;
    --accent-foreground: 220 15% 95%;

    --success: 142 76% 55%;
    --success-foreground: 240 15% 6%;

    --destructive: 0 85% 60%;
    --destructive-foreground: 220 15% 95%;

    --border: 245 15% 18%;
    --input: 245 15% 18%;
    --ring: 215 85% 35%;

    --radius: 0.75rem;

    /* Dashboard-inspired gradients with navy blue theme */
    --gradient-primary: linear-gradient(135deg, hsl(215 85% 35%) 0%, hsl(210 70% 45%) 100%);
    --gradient-hero: linear-gradient(135deg, hsl(240 15% 6%) 0%, hsl(220 25% 10%) 30%, hsl(215 30% 15%) 70%, hsl(210 20% 12%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(245 20% 8%) 0%, hsl(220 25% 12%) 50%, hsl(215 15% 10%) 100%);
    --gradient-iyurek: linear-gradient(135deg, hsl(240 15% 4%) 0%, hsl(220 25% 7%) 25%, hsl(215 30% 12%) 50%, hsl(210 25% 9%) 75%, hsl(245 20% 5%) 100%);
    
    /* Stress Meter Pro Section Colors */
    --stress-bg: 210 40% 3%;
    --stress-card: 215 35% 8%;
    --stress-border: 210 30% 15%;
    --stress-accent: 200 85% 60%;
    --gradient-stress: linear-gradient(135deg, hsl(210 40% 3%) 0%, hsl(215 35% 6%) 50%, hsl(200 30% 8%) 100%);
    
    /* Enhanced shadows with navy blue and gold accents */
    --shadow-premium: 0 25px 50px -12px hsl(215 85% 35% / 0.3), 0 0 40px hsl(45 95% 70% / 0.2);
    --shadow-card: 0 15px 35px -10px hsl(245 20% 8% / 0.8), 0 5px 15px hsl(215 85% 35% / 0.1);
    --shadow-gold: 0 15px 35px -10px hsl(45 95% 70% / 0.4), 0 5px 20px hsl(45 95% 70% / 0.3);
    --shadow-stress: 0 20px 40px -15px hsl(200 85% 60% / 0.2), inset 0 1px 2px hsl(210 30% 15% / 0.3);
    
    /* Animation timing */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }

  /* iyurek logo decorative elements */
  .iyurek-logo-decoration {
    background-image: url('/iyurek-logo-new.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.08;
    pointer-events: none;
  }

  .iyurek-logo-decoration-faded {
    background-image: url('/iyurek-logo-new.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.03;
    pointer-events: none;
  }

  /* Large partially visible logos */
  .iyurek-logo-huge {
    background-image: url('/iyurek-logo-new.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.02;
    pointer-events: none;
  }

  .iyurek-logo-massive {
    background-image: url('/iyurek-logo-new.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.015;
    pointer-events: none;
  }

  /* Subtle accent elements - clean and minimal */
  .circuit-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 80%, hsl(var(--primary) / 0.02) 1px, transparent 1px),
                radial-gradient(circle at 80% 20%, hsl(var(--secondary) / 0.015) 1px, transparent 1px);
    background-size: 200px 200px, 300px 300px;
    pointer-events: none;
  }

  .circuit-pattern-dense::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 70%, hsl(var(--primary) / 0.025) 1px, transparent 1px),
                radial-gradient(circle at 70% 30%, hsl(var(--accent) / 0.02) 1px, transparent 1px);
    background-size: 250px 250px, 350px 350px;
    pointer-events: none;
  }

  /* Section Separators */
  .section-separator {
    position: relative;
  }

  .section-separator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.6), transparent);
    border-radius: 2px;
  }

  .section-separator::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: hsl(var(--secondary) / 0.8);
    border-radius: 1px;
  }

  /* Section Backgrounds */
  .section-primary {
    background: linear-gradient(135deg, hsl(var(--background)) 0%, hsl(var(--muted) / 0.1) 50%, hsl(var(--background)) 100%);
  }

  .section-secondary {
    background: linear-gradient(135deg, hsl(var(--muted) / 0.2) 0%, hsl(var(--background)) 50%, hsl(var(--muted) / 0.3) 100%);
  }

  .section-accent {
    background: linear-gradient(135deg, hsl(var(--accent) / 0.05) 0%, hsl(var(--background)) 50%, hsl(var(--primary) / 0.05) 100%);
  }

  .section-subtle {
    background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--muted) / 0.1) 50%, hsl(var(--background)) 100%);
  }

  /* Side Indicators */
  .section-indicator-left::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, hsl(var(--primary) / 0.8), transparent);
    border-radius: 0 3px 3px 0;
  }

  .section-indicator-right::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, hsl(var(--secondary) / 0.8), transparent);
    border-radius: 3px 0 0 3px;
  }
}

/* Scrolling banner animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-scroll {
  animation: scroll 15s linear infinite;
}

/* Mobile-optimized faster scrolling */
@media (max-width: 768px) {
  .animate-scroll {
    animation: scroll 5s linear infinite;
  }
}

/* Optimized gradient text animation - reduced complexity */
@keyframes gradient-shift-optimized {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-gradient-shift {
  animation: gradient-shift-optimized 6s ease-in-out infinite;
  will-change: background-position;
}

.bg-300\% {
  background-size: 300% 300%;
}

/* Fade in animation */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 1s ease-out;
}

/* Optimized bounce animation - GPU accelerated */
@keyframes bounce-gentle-optimized {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -8px, 0);
  }
}

.animate-bounce-gentle {
  animation: bounce-gentle-optimized 4s ease-in-out infinite;
  will-change: transform;
}

/* Optimized float animation - GPU accelerated */
@keyframes float-optimized {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -5px, 0);
  }
}

.animate-float {
  animation: float-optimized 4s ease-in-out infinite;
  will-change: transform;
}

.animate-float-delayed {
  animation: float-optimized 4s ease-in-out infinite;
  animation-delay: 1.5s;
  will-change: transform;
}

/* Optimized pulse animation */
@keyframes pulse-gentle-optimized {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}

.animate-pulse-gentle {
  animation: pulse-gentle-optimized 3s ease-in-out infinite;
  will-change: opacity;
}

/* Optimized slide animation - GPU accelerated */
@keyframes slide-in-right-optimized {
  0% {
    opacity: 0;
    transform: translate3d(20px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate-slide-in-right {
  animation: slide-in-right-optimized 0.6s ease-out;
  will-change: transform, opacity;
}

/* Fade in up animation */
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out;
}

/* Shimmer animation */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
  
  /* Earth-like rotation animations for neural network */
  @keyframes rotate-earth-1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  @keyframes rotate-earth-2 {
    0% { transform: rotate(0deg) scaleX(0.8); }
    100% { transform: rotate(360deg) scaleX(0.8); }
  }
  
  @keyframes rotate-earth-3 {
    0% { transform: rotate(0deg) scaleX(1.2); }
    100% { transform: rotate(360deg) scaleX(1.2); }
  }
  
  @keyframes rotate-earth-vertical {
    0% { transform: rotate(0deg) scaleY(0.6); }
    100% { transform: rotate(360deg) scaleY(0.6); }
  }
  
  /* Orbital planet-like movements */
  @keyframes orbit-planet-1 {
    0% { 
      left: 50%; 
      top: 50%; 
      transform: translate(-50%, -50%) rotate(0deg) translateX(150px) rotate(0deg); 
    }
    100% { 
      left: 50%; 
      top: 50%; 
      transform: translate(-50%, -50%) rotate(360deg) translateX(150px) rotate(-360deg); 
    }
  }
  
  @keyframes orbit-planet-2 {
    0% { 
      left: 50%; 
      top: 50%; 
      transform: translate(-50%, -50%) rotate(0deg) translateX(200px) rotate(0deg); 
    }
    100% { 
      left: 50%; 
      top: 50%; 
      transform: translate(-50%, -50%) rotate(360deg) translateX(200px) rotate(-360deg); 
    }
  }
  
  @keyframes orbit-planet-3 {
    0% { 
      left: 50%; 
      top: 50%; 
      transform: translate(-50%, -50%) rotate(0deg) translateX(100px) rotate(0deg); 
    }
    100% { 
      left: 50%; 
      top: 50%; 
      transform: translate(-50%, -50%) rotate(360deg) translateX(100px) rotate(-360deg); 
    }
  }
  
  @keyframes orbit-planet-4 {
    0% { 
      left: 50%; 
      top: 50%; 
      transform: translate(-50%, -50%) rotate(0deg) translateX(250px) rotate(0deg); 
    }
    100% { 
      left: 50%; 
      top: 50%; 
      transform: translate(-50%, -50%) rotate(360deg) translateX(250px) rotate(-360deg); 
    }
  }
}

/* Performance-optimized animations using only transform and opacity */

/* CSS Containment for layout isolation */
.contain-layout {
  contain: layout;
}

.contain-style {
  contain: style;
}

.contain-paint {
  contain: paint;
}

.contain-strict {
  contain: strict;
}

/* Optimized fade animation - GPU accelerated */
@keyframes fade-in-optimized {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate-fade-in-optimized {
  animation: fade-in-optimized 0.6s ease-out;
  will-change: transform, opacity;
}

/* Performance-optimized scrolling banner */
@keyframes scroll-optimized {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.animate-scroll {
  animation: scroll-optimized 20s linear infinite;
  will-change: transform;
}

/* Mobile-optimized scrolling */
@media (max-width: 768px) {
  .animate-scroll {
    animation: scroll-optimized 8s linear infinite;
  }
}

/* Simplified shimmer effect */
@keyframes shimmer-optimized {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  background-size: 200% 100%;
  animation: shimmer-optimized 3s infinite;
  will-change: background-position;
}

/* Add reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Performance-optimized section containment */
section {
  contain: layout style;
}

/* Optimize heavy elements */
.circuit-pattern,
.circuit-pattern-dense {
  contain: paint;
  will-change: auto;
}
.animate-matrix-drop-6 { animation: matrix-drop-6 4.8s linear infinite 2.5s; }

.animate-matrix-dot-1 { animation: matrix-dot-1 3s linear infinite; }
.animate-matrix-dot-2 { animation: matrix-dot-2 3.5s linear infinite 0.8s; }
.animate-matrix-dot-3 { animation: matrix-dot-3 4s linear infinite 1.2s; }
.animate-matrix-dot-4 { animation: matrix-dot-4 3.2s linear infinite 1.8s; }
.animate-matrix-dot-5 { animation: matrix-dot-5 3.8s linear infinite 2.2s; }
.animate-matrix-dot-6 { animation: matrix-dot-6 3.3s linear infinite 2.8s; }

/* Lightspeed Matrix Animations */
.animate-matrix-lightspeed-1 { animation: matrix-drop-1 0.3s linear infinite; }
.animate-matrix-lightspeed-2 { animation: matrix-drop-2 0.4s linear infinite 0.1s; }
.animate-matrix-lightspeed-3 { animation: matrix-drop-3 0.5s linear infinite 0.2s; }
.animate-matrix-lightspeed-4 { animation: matrix-drop-4 0.35s linear infinite 0.15s; }
.animate-matrix-lightspeed-5 { animation: matrix-drop-5 0.45s linear infinite 0.25s; }
.animate-matrix-lightspeed-6 { animation: matrix-drop-6 0.38s linear infinite 0.3s; }