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

:root {
  /* Typography scale */
  --heading-1: clamp(2.25rem, 5vw, 3.75rem);  /* 36px to 60px */
  --heading-2: clamp(1.875rem, 4vw, 3rem);     /* 30px to 48px */
  --heading-3: clamp(1.5rem, 3vw, 2.25rem);    /* 24px to 36px */
  --heading-4: clamp(1.25rem, 2.5vw, 1.5rem);  /* 20px to 24px */
  --body-lg: 1.125rem;                          /* 18px */
  --body: 1rem;                                 /* 16px */
  --body-sm: 0.875rem;                          /* 14px */
  --caption: 0.75rem;                           /* 12px */

  /* Section spacing */
  --section-y: clamp(4rem, 8vw, 8rem);
  --section-y-sm: clamp(3rem, 6vw, 5rem);
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 226 63% 33%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 217 91% 60%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --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: 226 63% 33%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;
    --card: 222 47% 11%;
    --card-foreground: 210 40% 98%;
    --popover: 222 47% 11%;
    --popover-foreground: 210 40% 98%;
    --primary: 217 91% 60%;
    --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 91% 60%;
    --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: 217 91% 60%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground overflow-x-hidden;
  }
}

@layer components {
  .glass-card {
    @apply rounded-2xl border border-white/10 bg-white/5 backdrop-blur-lg shadow-xl;
  }

  .gradient-text {
    @apply bg-gradient-to-r from-electric-blue to-growth-green bg-clip-text text-transparent;
  }

  .skill-bar {
    @apply h-2 rounded-full bg-dark-navy/10;
  }

  .skill-bar-fill {
    @apply h-full rounded-full bg-gradient-to-r from-tech-blue to-electric-blue transition-all duration-1000 ease-out;
  }

  .live-pulse {
    @apply relative;
  }

  .live-pulse::before {
    content: "";
    @apply absolute -left-3 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full bg-growth-green;
    animation: pulse-dot 2s ease-in-out infinite;
  }

  /* Hero — glass cards (dark bg context) */
  .glass-card-hero {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Hero — dashboard glow */
  .dashboard-glow {
    animation: glow-pulse 4s ease-in-out infinite;
  }

  /* Hero — orbit rings (dashed circles around dashboard) */
  .orbit-ring {
    position: absolute;
    border: 1.5px dashed rgba(59, 130, 246, 0.15);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: width 0.6s ease, height 0.6s ease;
  }
  .orbit-ring-1 {
    width: 520px;
    height: 520px;
  }
  .orbit-ring-2 {
    width: 700px;
    height: 700px;
  }

  /* Hero — orbiting agent cards */
  .orbit-card-1 {
    animation: orbit-cw 30s linear infinite;
    transition: opacity 0.6s ease;
  }
  .orbit-card-2 {
    animation: orbit-cw 30s linear infinite;
    animation-delay: -10s;
    transition: opacity 0.6s ease;
  }
  .orbit-card-3 {
    animation: orbit-cw-outer 40s linear infinite reverse;
    transition: opacity 0.6s ease;
  }
  .orbit-card-4 {
    animation: orbit-cw-outer 40s linear infinite reverse;
    animation-delay: -20s;
    transition: opacity 0.6s ease;
  }

  /* When chat is focused, orbit cards drift outward + fade slightly */
  .orbit-expanded .orbit-card-1 {
    animation-name: orbit-cw-expanded;
    opacity: 0.5;
  }
  .orbit-expanded .orbit-card-2 {
    animation-name: orbit-cw-expanded;
    opacity: 0.5;
  }
  .orbit-expanded .orbit-card-3 {
    animation-name: orbit-cw-outer-expanded;
    opacity: 0.5;
  }
  .orbit-expanded .orbit-card-4 {
    animation-name: orbit-cw-outer-expanded;
    opacity: 0.5;
  }

  /* Orbit rings expand when chat is focused */
  .orbit-expanded .orbit-ring-1 {
    width: 620px;
    height: 620px;
  }
  .orbit-expanded .orbit-ring-2 {
    width: 820px;
    height: 820px;
  }

  /* Hero — audio waveform bars */
  .waveform-bar {
    display: inline-block;
    width: 3px;
    background: linear-gradient(to top, #3b82f6, #10b981);
    margin: 0 1.5px;
    border-radius: 2px;
    animation: wave 1.2s ease-in-out infinite;
  }
}

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

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

  .section-padding {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
  }

  .section-padding-sm {
    padding-top: var(--section-y-sm);
    padding-bottom: var(--section-y-sm);
  }

  .heading-1 {
    font-size: var(--heading-1);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .heading-2 {
    font-size: var(--heading-2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  .heading-3 {
    font-size: var(--heading-3);
    font-weight: 600;
    line-height: 1.2;
  }

  .heading-4 {
    font-size: var(--heading-4);
    font-weight: 600;
    line-height: 1.3;
  }
}

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

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-50%) scale(1.5);
  }
}

/* Hero — orbit keyframes (inner ring, 260px radius) */
@keyframes orbit-cw {
  from {
    transform: rotate(0deg) translateX(260px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(260px) rotate(-360deg);
  }
}

/* Hero — orbit keyframes (outer ring, 350px radius) */
@keyframes orbit-cw-outer {
  from {
    transform: rotate(0deg) translateX(350px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(350px) rotate(-360deg);
  }
}

/* Hero — expanded orbit keyframes (chat focused — wider radius) */
@keyframes orbit-cw-expanded {
  from { transform: rotate(0deg) translateX(310px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(310px) rotate(-360deg); }
}

@keyframes orbit-cw-outer-expanded {
  from { transform: rotate(0deg) translateX(410px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(410px) rotate(-360deg); }
}

/* Hero — dashboard glow pulse */
@keyframes glow-pulse {
  0%,
  100% {
    box-shadow:
      0 0 30px rgba(59, 130, 246, 0.15),
      0 0 60px rgba(59, 130, 246, 0.05);
  }
  50% {
    box-shadow:
      0 0 40px rgba(59, 130, 246, 0.25),
      0 0 80px rgba(59, 130, 246, 0.1);
  }
}

/* Hero — audio waveform animation */
@keyframes wave {
  0%,
  100% {
    height: 8px;
  }
  50% {
    height: 22px;
  }
}

/* Hero — badge pulse (status labels on orbiting cards) */
@keyframes badge-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

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

@keyframes marquee-reverse {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.animate-marquee {
  animation: marquee 40s linear infinite;
}

.animate-marquee-reverse {
  animation: marquee-reverse 45s linear infinite;
}