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

:root {
  /* Light Theme (Default) */
  --background: 210 40% 98%;
  /* Off-white */
  --foreground: 222 47% 5%;
  /* Dark text */

  --card: 0 0% 100%;
  --card-foreground: 222 47% 5%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 5%;

  --primary: 195 100% 40%;
  /* Darker Cyan/Blue for visibility on light */
  --primary-foreground: 210 40% 98%;

  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222 47% 5%;

  --muted: 210 40% 96.1%;
  --muted-foreground: 215 16% 47%;

  --accent: 195 100% 40%;
  --accent-foreground: 222 47% 5%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 195 100% 40%;

  --radius: 0.75rem;

  /* Custom design tokens - Light Mode adjustments */
  --glow-primary: 195 100% 40%;
  --glow-secondary: 200 100% 50%;

  --gradient-start: 195 50% 98%;
  --gradient-mid: 200 50% 95%;
  --gradient-end: 210 50% 90%;

  --glass-bg: 0 0% 100%;
  --glass-border: 214.3 31.8% 91.4%;

  --neon-blue: 195 100% 40%;
  --neon-cyan: 180 100% 35%;
  --neon-purple: 280 100% 50%;
}

.dark {
  /* Dark Theme (Original) */
  --background: 222 47% 5%;
  --foreground: 210 40% 98%;

  --card: 222 47% 8%;
  --card-foreground: 210 40% 98%;

  --popover: 222 47% 8%;
  --popover-foreground: 210 40% 98%;

  --primary: 195 100% 50%;
  --primary-foreground: 222 47% 5%;

  --secondary: 217 33% 17%;
  --secondary-foreground: 210 40% 98%;

  --muted: 217 33% 12%;
  --muted-foreground: 215 20% 65%;

  --accent: 195 100% 50%;
  --accent-foreground: 222 47% 5%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;

  --border: 217 33% 17%;
  --input: 217 33% 17%;
  --ring: 195 100% 50%;

  /* Custom design tokens */
  --glow-primary: 195 100% 50%;
  --glow-secondary: 200 100% 60%;

  --gradient-start: 222 47% 5%;
  --gradient-mid: 222 47% 8%;
  --gradient-end: 220 50% 3%;

  --glass-bg: 222 47% 10%;
  --glass-border: 217 33% 20%;

  --neon-blue: 195 100% 50%;
  --neon-cyan: 180 100% 50%;
  --neon-purple: 280 100% 60%;
}

* {
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: linear-gradient(180deg,
      hsl(var(--gradient-start)) 0%,
      hsl(var(--gradient-mid)) 50%,
      hsl(var(--gradient-end)) 100%);
  background-attachment: fixed;
  color: hsl(var(--foreground));
}

/* Glassmorphism utilities */
.glass {
  background-color: hsla(var(--card), 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid hsla(var(--glass-border), 0.3);
}

.glass-card {
  background-color: hsla(var(--card), 0.3);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid hsla(var(--glass-border), 0.2);
  border-radius: 1rem;
  box-shadow:
    0 0 0 1px hsla(var(--glow-primary), 0.05),
    0 4px 24px -4px hsla(var(--glow-primary), 0.1),
    inset 0 1px 0 hsla(var(--foreground), 0.05);
}

.glass-card-hover {
  background-color: hsla(var(--card), 0.3);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid hsla(var(--glass-border), 0.2);
  border-radius: 1rem;
  box-shadow:
    0 0 0 1px hsla(var(--glow-primary), 0.05),
    0 4px 24px -4px hsla(var(--glow-primary), 0.1),
    inset 0 1px 0 hsla(var(--foreground), 0.05);
  transition: all 0.5s;
}

.glass-card-hover:hover {
  border-color: hsla(var(--primary), 0.3);
  box-shadow:
    0 0 0 1px hsla(var(--glow-primary), 0.2),
    0 8px 40px -8px hsla(var(--glow-primary), 0.25),
    inset 0 1px 0 hsla(var(--foreground), 0.1);
  transform: translateY(-4px);
}

/* Glow effects */
.glow-text {
  text-shadow: 0 0 40px hsla(var(--glow-primary), 0.5);
}

.glow-box {
  box-shadow: 0 0 60px -10px hsla(var(--glow-primary), 0.4);
}

.glow-border {
  box-shadow:
    0 0 0 1px hsla(var(--glow-primary), 0.3),
    0 0 30px -5px hsla(var(--glow-primary), 0.3);
}

/* Gradient text */
.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(135deg,
      hsl(var(--neon-cyan)) 0%,
      hsl(var(--neon-blue)) 50%,
      hsl(var(--neon-cyan)) 100%);
}

/* Background patterns */
.noise-overlay {
  position: relative;
}

.noise-overlay::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;
  z-index: 0;
}

/* Radial glow backgrounds */
.radial-glow {
  position: relative;
}

.radial-glow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  background: radial-gradient(ellipse at center,
      hsla(var(--glow-primary), 0.15) 0%,
      transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* Floating animation */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

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

@keyframes float-slow {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}

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

/* Pulse glow */
@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 20px hsla(var(--glow-primary), 0.3);
  }

  50% {
    box-shadow: 0 0 40px hsla(var(--glow-primary), 0.5);
  }
}

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

/* Gradient border animation */
@keyframes gradient-rotate {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.gradient-border {
  position: relative;
  background: hsl(var(--card));
  border-radius: var(--radius);
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius) + 1px);
  background: linear-gradient(90deg,
      hsla(var(--neon-cyan), 0.5),
      hsla(var(--neon-blue), 0.5),
      hsla(var(--neon-purple), 0.3),
      hsla(var(--neon-blue), 0.5),
      hsla(var(--neon-cyan), 0.5));
  background-size: 300% 100%;
  animation: gradient-rotate 8s linear infinite;
  z-index: -1;
}

/* Fade in animations */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Stagger delays */
.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

.delay-400 {
  animation-delay: 400ms;
}

.delay-500 {
  animation-delay: 500ms;
}

/* Grid pattern */
.grid-pattern {
  background-image:
    linear-gradient(hsla(var(--border), 0.3) 1px, transparent 1px),
    linear-gradient(90deg, hsla(var(--border), 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Counter animation */
@keyframes count-up {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

/* Icon pulse */
@keyframes icon-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

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

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

::-webkit-scrollbar-track {
  background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}

/* Animation utilities for Scroll Observer */
.reveal-hidden {
  opacity: 0;
  transform: translateY(2.5rem);
  /* translate-y-10 is roughly 2.5rem */
  transition: all 1s ease-out;
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-hidden-right {
  opacity: 0;
  transform: translateX(2.5rem);
  transition: all 1s ease-out;
}

.reveal-visible-right {
  opacity: 1;
  transform: translateX(0);
}

.reveal-hidden-left {
  opacity: 0;
  transform: translateX(-2.5rem);
  transition: all 1s ease-out;
}

.reveal-visible-left {
  opacity: 1;
  transform: translateX(0);
}