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

/* Professional Portfolio Design System for Kalpesh Rana
Primary: Blue (trust/security) | Accents: Gold/Orange (warmth/expertise)
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Base Colors */
    --background: 0 0% 100%;
    --foreground: 215 25% 27%;
    
    /* Card System */
    --card: 0 0% 100%;
    --card-foreground: 215 25% 27%;
    --card-border: 220 13% 91%;
    
    /* Popover System */
    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 27%;
    
    /* Primary System (Dark Slate Blue from logo) */
    --primary: 215 25% 27%;
    --primary-light: 215 25% 40%;
    --primary-dark: 215 28% 17%;
    --primary-foreground: 0 0% 100%;
    
    /* Secondary System (Golden Yellow from logo) */
    --secondary: 45 93% 47%;
    --secondary-light: 45 100% 60%;
    --secondary-dark: 45 90% 35%;
    --secondary-foreground: 215 25% 27%;
    
    /* Accent Gold System (matching logo) */
    --accent-gold: 45 93% 47%;
    --accent-gold-light: 45 100% 60%;
    --accent-gold-dark: 45 90% 35%;
    --accent-foreground: 215 25% 27%;
    
    /* Muted System */
    --muted: 210 17% 95%;
    --muted-dark: 215 16% 47%;
    --muted-foreground: 215 16% 47%;
    
    /* Status Colors */
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --success: 142 76% 36%;
    --success-foreground: 0 0% 100%;
    
    /* Interface Elements */
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 45 93% 47%;

    --radius: 0.75rem;
    
    /* Professional Gradients - Logo Theme */
    --gradient-primary: linear-gradient(135deg, hsl(215 25% 27%) 0%, hsl(215 25% 40%) 100%);
    --gradient-secondary: linear-gradient(135deg, hsl(45 93% 47%) 0%, hsl(45 100% 60%) 100%);
    --gradient-accent: linear-gradient(135deg, hsl(45 93% 47%) 0%, hsl(45 100% 60%) 100%);
    --gradient-hero: linear-gradient(135deg, hsl(215 28% 17%) 0%, hsl(215 25% 27%) 50%, hsl(45 93% 47%) 100%);
    
    /* Shadows */
    --shadow-soft: 0 2px 8px hsla(215 25% 27%, 0.08);
    --shadow-medium: 0 4px 16px hsla(215 25% 27%, 0.12);
    --shadow-large: 0 8px 32px hsla(215 25% 27%, 0.16);
    --shadow-accent: 0 4px 20px hsla(45 93% 47%, 0.25);
    
    /* Animation Variables */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease-out;

    --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: 215 28% 17%;
    --foreground: 0 0% 98%;

    --card: 215 25% 27%;
    --card-foreground: 0 0% 98%;

    --popover: 215 25% 27%;
    --popover-foreground: 0 0% 98%;

    --primary: 45 93% 47%;
    --primary-foreground: 215 25% 27%;

    --secondary: 215 20% 35%;
    --secondary-foreground: 0 0% 98%;

    --muted: 215 20% 35%;
    --muted-foreground: 215 15% 70%;

    --accent: 45 93% 47%;
    --accent-foreground: 215 25% 27%;

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

    --border: 215 20% 35%;
    --input: 215 20% 35%;
    --ring: 45 93% 47%;
    --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;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }
  
  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
  
  /* Typography */
  .heading-xl {
    @apply text-5xl md:text-6xl font-bold leading-tight tracking-tight;
  }
  
  .heading-lg {
    @apply text-3xl md:text-4xl font-bold leading-tight;
  }
  
  .heading-md {
    @apply text-xl md:text-2xl font-semibold leading-snug;
  }
  
  .text-gradient {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* Interactive Elements */
  .btn-gradient {
    background: var(--gradient-accent);
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-accent);
  }
  
  .btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px hsla(var(--accent-gold), 0.35);
  }
  
  .btn-gradient-outline {
    background: transparent;
    border: 2px solid;
    border-image: var(--gradient-accent) 1;
    color: white;
    transition: var(--transition-smooth);
  }
  
  .btn-gradient-outline:hover {
    background: var(--gradient-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
  }
  
  .card-hover {
    transition: var(--transition-smooth);
  }
  
  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-large);
  }
  
  /* Enhanced Tech Badge Styling */
  .tech-badge {
    @apply px-3 py-1 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-accent-gold transition-all duration-300 hover:bg-white/20 hover:scale-105;
  }

  /* Galaxy Background Animations */
  .stars-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle 4s infinite ease-in-out;
  }

  .star:nth-child(2n) {
    background: #3B82F6;
  }

  .star:nth-child(3n) {
    background: #F59E0B;
  }

  .star:nth-child(4n) {
    background: #10B981;
  }

  @keyframes twinkle {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
  }

  /* Floating Tech Icons */
  .floating-icons {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .floating-icon {
    position: absolute;
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(90deg); }
    50% { transform: translateY(-10px) rotate(180deg); }
    75% { transform: translateY(-30px) rotate(270deg); }
  }

  /* Network Visualization */
  .network-visualization {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

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

  @keyframes pulse-slow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
  }

  /* Orbital Rings */
  .orbital-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .orbital-ring {
    position: absolute;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 50%;
    animation: orbit 20s linear infinite;
  }

  .orbital-ring-1 {
    width: 300px;
    height: 300px;
    top: -150px;
    left: -150px;
    border-color: rgba(59, 130, 246, 0.3);
  }

  .orbital-ring-2 {
    width: 500px;
    height: 500px;
    top: -250px;
    left: -250px;
    border-color: rgba(245, 158, 11, 0.2);
    animation-duration: 30s;
    animation-direction: reverse;
  }

  .orbital-ring-3 {
    width: 700px;
    height: 700px;
    top: -350px;
    left: -350px;
    border-color: rgba(16, 185, 129, 0.15);
    animation-duration: 40s;
  }

  @keyframes orbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Enhanced Animations */
  .fade-up {
    animation: fade-up 0.6s ease-out forwards;
  }
  
  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

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

  @keyframes glow {
    from { text-shadow: 0 0 5px rgba(245, 158, 11, 0.5); }
    to { text-shadow: 0 0 20px rgba(245, 158, 11, 0.8), 0 0 30px rgba(245, 158, 11, 0.4); }
  }

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

  @keyframes glow-intense {
    from { 
      text-shadow: 0 0 10px rgba(245, 158, 11, 0.6), 0 0 20px rgba(245, 158, 11, 0.4); 
      filter: brightness(1);
    }
    to { 
      text-shadow: 0 0 25px rgba(245, 158, 11, 0.9), 0 0 40px rgba(245, 158, 11, 0.6), 0 0 60px rgba(245, 158, 11, 0.3); 
      filter: brightness(1.2);
    }
  }

  .text-gradient-animated {
    background: linear-gradient(90deg, #E6B800, #FFFFFF, #E6B800);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite;
  }

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

  .animate-gradient-x {
    background-size: 200% 100%;
    animation: gradient-x 3s ease infinite;
  }

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

  .animate-spin-slow {
    animation: spin 8s linear infinite;
  }

  .animate-spin-reverse {
    animation: spin 6s linear infinite reverse;
  }

  .animate-spin-reverse-slow {
    animation: spin 10s linear infinite reverse;
  }

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

  @keyframes pulse-glow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.05); }
  }

  .animate-bounce-glow {
    animation: bounce-glow 2s infinite;
  }

  @keyframes bounce-glow {
    0%, 20%, 53%, 80%, 100% {
      transform: translate3d(0, 0, 0);
      filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.5));
    }
    40%, 43% {
      transform: translate3d(0, -30px, 0);
      filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.8));
    }
  }

  /* Gradient Conic for Rainbow Ring */
  .bg-gradient-conic {
    background: conic-gradient(from 0deg, #3B82F6, #8B5CF6, #EC4899, #EF4444, #F97316, #EAB308, #22C55E, #3B82F6);
  }

  /* Blob Animation */
  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  @keyframes blob {
    0%, 100% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
  }

  .animate-bounce-slow {
    animation: bounce-slow 3s infinite;
  }

  @keyframes bounce-slow {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  /* Particle System */
  .particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
  }

  .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    animation: particle-float 15s infinite ease-in-out;
  }

  .particle:nth-child(2n) {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.8) 0%, transparent 70%);
    animation-duration: 20s;
  }

  .particle:nth-child(3n) {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.8) 0%, transparent 70%);
    animation-duration: 25s;
  }

  @keyframes particle-float {
    0%, 100% { 
      transform: translate(0, 0) scale(1);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    50% { 
      transform: translate(100px, -100px) scale(1.5);
      opacity: 0.8;
    }
    90% {
      opacity: 1;
    }
  }

  /* Image Protection - Prevent downloading/saving */
  @keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
  }
  
  img[draggable="false"] {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
  }
}

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}