/* Custom Styles and Enhancements for Angitha Saju Portfolio */
/* Palette: Teal & Coral - Modern, Vibrant, Fresh */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  /* Palette Constants */
  --color-teal-light: #2dd4bf;
  --color-teal-main: #14b8a6;
  --color-teal-dark: #0f766e;
  --color-coral-light: #ff8a7a;
  --color-coral-main: #ff6f61;
  --color-coral-dark: #e05345;
}

body {
  font-family: var(--font-main);
  scroll-behavior: smooth;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #06181f;
}
.light ::-webkit-scrollbar-track {
  background: #f0fdfa;
}
::-webkit-scrollbar-thumb {
  background: #153e4f;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #14b8a6;
}

/* Vibrant Teal & Coral Gradient Text Utilities */
.text-gradient-teal {
  background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-coral {
  background: linear-gradient(135deg, #ff8a7a 0%, #ff5240 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-primary {
  background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 30%, #ff8a7a 70%, #ff6f61 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glow effects */
.glow-teal {
  box-shadow: 0 0 35px -5px rgba(20, 184, 166, 0.35);
}

.glow-coral {
  box-shadow: 0 0 35px -5px rgba(255, 111, 97, 0.35);
}

.glow-teal-coral {
  box-shadow: 0 0 45px -8px rgba(20, 184, 166, 0.3), 0 0 45px -8px rgba(255, 111, 97, 0.3);
}

.card-hover-effect {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover-effect:hover {
  transform: translateY(-4px);
  border-color: rgba(20, 184, 166, 0.4);
}
.light .card-hover-effect:hover {
  border-color: rgba(20, 184, 166, 0.5);
  box-shadow: 0 12px 24px -6px rgba(20, 184, 166, 0.12), 0 8px 16px -6px rgba(255, 111, 97, 0.08);
}

/* Background Grids & Patterns with Teal / Coral ambient touch */
.bg-grid-pattern {
  background-size: 44px 44px;
  background-image: 
    linear-gradient(to right, rgba(45, 212, 191, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 111, 97, 0.03) 1px, transparent 1px);
}
.light .bg-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(20, 184, 166, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 111, 97, 0.05) 1px, transparent 1px);
}

/* Floating animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
.animate-float {
  animation: float 5s ease-in-out infinite;
}

/* Pulse animation for live status badge */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.15); }
}
.animate-pulse-dot {
  animation: pulse-subtle 2s infinite ease-in-out;
}

/* Portrait Image Teal & Coral Background Lighting */
.portrait-backdrop-mesh {
  background: radial-gradient(circle at 20% 20%, rgba(45, 212, 191, 0.45) 0%, transparent 60%),
              radial-gradient(circle at 80% 80%, rgba(255, 111, 97, 0.5) 0%, transparent 60%),
              linear-gradient(135deg, #09232c 0%, #06181f 50%, #1e1014 100%);
}

.light .portrait-backdrop-mesh {
  background: radial-gradient(circle at 20% 20%, rgba(45, 212, 191, 0.35) 0%, transparent 60%),
              radial-gradient(circle at 80% 80%, rgba(255, 111, 97, 0.35) 0%, transparent 60%),
              linear-gradient(135deg, #f0fdfa 0%, #e6f7f4 50%, #fff5f4 100%);
}

.portrait-duotone-glow {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.22) 0%, rgba(255, 111, 97, 0.25) 100%);
  mix-blend-mode: screen;
}

.light .portrait-duotone-glow {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.12) 0%, rgba(255, 111, 97, 0.12) 100%);
  mix-blend-mode: multiply;
}

/* Tool badge active filter */
.filter-btn.active {
  background: linear-gradient(135deg, #14b8a6 0%, #ff6f61 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Interactive Slider Styling with Teal & Coral */
input[type="range"] {
  accent-color: #ff6f61;
}

/* Resume Clean Print Stylesheet */
@media print {
  header, nav, #roi-calculator, #contact-form-container, footer, .no-print, button {
    display: none !important;
  }
  
  body {
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 11pt;
  }
  
  .print-page {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  
  .print-break-inside {
    break-inside: avoid;
  }

  .text-gradient-primary, .text-gradient-teal, .text-gradient-coral {
    -webkit-text-fill-color: #111827 !important;
    color: #111827 !important;
  }
}