/* ===================================================
   Anik Hossen Portfolio - 5-Color Dynamic Theme Engine
   Supports: Orange, Green, Blue, Purple, Cyber Cyan
   Light & Dark Mode + Ultra 3D Glassmorphic Design
   =================================================== */

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

/* ---------------------------------------------------
   1. Theme Color Palettes (CSS Variables Engine)
   --------------------------------------------------- */

/* Default Theme: Orange */
:root, [data-theme="orange"] {
  --brand-primary: #FF6B00;
  --brand-secondary: #FF3D00;
  --brand-light: #FF8533;
  --brand-dark: #D95B00;
  --brand-gradient: linear-gradient(135deg, #FF6B00 0%, #FF3D00 100%);
  --brand-glow: rgba(255, 107, 0, 0.25);
  --brand-badge-bg: rgba(255, 107, 0, 0.08);
  --brand-badge-border: rgba(255, 107, 0, 0.25);
}

/* Green Theme: Emerald Green */
[data-theme="green"] {
  --brand-primary: #10B981;
  --brand-secondary: #059669;
  --brand-light: #34D399;
  --brand-dark: #047857;
  --brand-gradient: linear-gradient(135deg, #10B981 0%, #059669 100%);
  --brand-glow: rgba(16, 185, 129, 0.25);
  --brand-badge-bg: rgba(16, 185, 129, 0.08);
  --brand-badge-border: rgba(16, 185, 129, 0.25);
}

/* Blue Theme: Royal Blue */
[data-theme="blue"] {
  --brand-primary: #2563EB;
  --brand-secondary: #4F46E5;
  --brand-light: #60A5FA;
  --brand-dark: #1D4ED8;
  --brand-gradient: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);
  --brand-glow: rgba(37, 99, 235, 0.25);
  --brand-badge-bg: rgba(37, 99, 235, 0.08);
  --brand-badge-border: rgba(37, 99, 235, 0.25);
}

/* Purple Theme: Neon Purple */
[data-theme="purple"] {
  --brand-primary: #8B5CF6;
  --brand-secondary: #7C3AED;
  --brand-light: #A78BFA;
  --brand-dark: #6D28D9;
  --brand-gradient: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
  --brand-glow: rgba(139, 92, 246, 0.25);
  --brand-badge-bg: rgba(139, 92, 246, 0.08);
  --brand-badge-border: rgba(139, 92, 246, 0.25);
}

/* Cyber Theme: Cyber Cyan */
[data-theme="cyber"] {
  --brand-primary: #06B6D4;
  --brand-secondary: #0284C7;
  --brand-light: #38BDF8;
  --brand-dark: #0369A1;
  --brand-gradient: linear-gradient(135deg, #06B6D4 0%, #0284C7 100%);
  --brand-glow: rgba(6, 182, 212, 0.25);
  --brand-badge-bg: rgba(6, 182, 212, 0.08);
  --brand-badge-border: rgba(6, 182, 212, 0.25);
}

/* ---------------------------------------------------
   2. Typography & Base Styling
   --------------------------------------------------- */
body {
  font-family: 'Inter', 'Hind Siliguri', sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Outfit', 'Hind Siliguri', sans-serif;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
html.dark ::-webkit-scrollbar-track {
  background: #0F172A;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-primary);
}

/* Dynamic Brand Utility Classes */
.text-brand-orange, .text-brand-dynamic {
  color: var(--brand-primary) !important;
}

.bg-brand-orange, .bg-brand-dynamic {
  background-color: var(--brand-primary) !important;
}

.bg-brand-gradient {
  background: var(--brand-gradient) !important;
}

.border-brand-orange, .border-brand-dynamic {
  border-color: var(--brand-primary) !important;
}

.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------
   3. Glassmorphism & 3D Card Styling
   --------------------------------------------------- */
.glass-header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.glass-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 40px -15px var(--brand-glow), 0 8px 12px -4px rgba(0, 0, 0, 0.04);
  border-color: var(--brand-primary);
}

.glass-badge {
  background: var(--brand-badge-bg);
  backdrop-filter: blur(8px);
  color: var(--brand-primary);
  border: 1px solid var(--brand-badge-border);
}

/* Dark Mode Glass Overrides */
html.dark .glass-header {
  background: rgba(15, 23, 42, 0.90);
  border-bottom: 1px solid rgba(51, 65, 85, 0.8);
}

html.dark .glass-card {
  background: rgba(30, 41, 59, 0.88);
  border: 1px solid rgba(51, 65, 85, 0.8);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}

html.dark .glass-card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 20px 40px -15px var(--brand-glow);
}

html.dark .glass-badge {
  background: rgba(255, 255, 255, 0.05);
  color: var(--brand-light);
  border-color: var(--brand-badge-border);
}

/* ---------------------------------------------------
   4. Background Glowing Blobs
   --------------------------------------------------- */
.blob {
  position: absolute;
  filter: blur(80px);
  z-index: 0;
  opacity: 0.22;
  border-radius: 50%;
  pointer-events: none;
}

html.dark .blob {
  opacity: 0.15;
}

.blob-orange {
  background: var(--brand-primary);
}

.blob-amber {
  background: var(--brand-secondary);
}

/* ---------------------------------------------------
   5. Interactive 3D Perspective Tilt
   --------------------------------------------------- */
.card-3d-wrap {
  perspective: 1000px;
}

.card-3d {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
  transform-style: preserve-3d;
}

.card-3d:hover {
  transform: rotateX(4deg) rotateY(-4deg) translateZ(10px);
}

/* Animations */
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

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

@keyframes pulseGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

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

.skill-bar-fill {
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--brand-gradient) !important;
}