/* 
  Custom CSS for Sippakorn Wongprom's Premium Portfolio
  Handles fine-tuned UI transitions, glassmorphism borders, and interactive animations.
*/

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

:root {
  --font-display: 'Outfit', 'Sarabun', sans-serif;
}

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

/* Glassmorphism custom styles */
.glass-panel {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
}

.dark .glass-panel {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Floating animation for tech graphics */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(2deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

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

/* Pulse Glow effect */
@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
}

.pulse-glow-violet {
  animation: pulse-glow 8s ease-in-out infinite;
}

/* Custom transitions */
.transition-theme {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover glow for project cards */
.project-card {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

@media (hover: hover) {
  .project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -15px rgba(16, 185, 129, 0.25);
  }
  
  .dark .project-card:hover {
    box-shadow: 0 20px 40px -15px rgba(16, 185, 129, 0.45);
  }
}

/* Dynamic Gradient Background Circles */
.gradient-blob {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
  pointer-events: none;
}

/* Mobile responsive fixes */
@media (max-width: 640px) {
  .gradient-blob {
    width: 250px;
    height: 250px;
    filter: blur(60px);
  }
}

/* Yellow Theme Overrides */
.theme-yellow {
  --color-primary: #fbbf24;
}

/* Force all green, emerald, and teal text colors (including opacity classes) to turn yellow/amber */
.theme-yellow [class*="text-emerald"],
.theme-yellow [class*="text-teal"],
.theme-yellow [class*="text-green"] {
  color: #fbbf24 !important;
}

/* Solid background overrides */
.theme-yellow .bg-emerald-500,
.theme-yellow .bg-emerald-600,
.theme-yellow .bg-teal-500,
.theme-yellow .bg-emerald-550,
.theme-yellow .bg-emerald-100,
.theme-yellow .bg-green-100,
.theme-yellow .bg-teal-100 {
  background-color: #fbbf24 !important;
  color: #000000 !important;
}

/* Low-opacity background overrides (for cards, inputs, decorative elements) */
.theme-yellow .bg-emerald-50,
.theme-yellow .bg-teal-50,
.theme-yellow [class*="bg-emerald-950"],
.theme-yellow [class*="bg-teal-950"],
.theme-yellow [class*="bg-green-950"],
.theme-yellow [class*="bg-emerald-500/"],
.theme-yellow [class*="bg-teal-500/"] {
  background-color: rgba(251, 191, 36, 0.15) !important;
}

/* Border overrides */
.theme-yellow [class*="border-emerald"],
.theme-yellow [class*="border-teal"],
.theme-yellow [class*="border-green"],
.theme-yellow .border-slate-200\/60 {
  border-color: rgba(251, 191, 36, 0.4) !important;
}

/* Gradient overrides */
.theme-yellow .from-emerald-500,
.theme-yellow .from-emerald-600 {
  --tw-gradient-from: #fbbf24 !important;
  --tw-gradient-to: rgb(251 191 36 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.theme-yellow .via-green-400 {
  --tw-gradient-stops: var(--tw-gradient-from), #f59e0b 50%, var(--tw-gradient-to) !important;
}

.theme-yellow .to-teal-400,
.theme-yellow .to-teal-500,
.theme-yellow .dark\:to-teal-300 {
  --tw-gradient-to: #d97706 !important;
}

/* Update glow blobs too */
.theme-yellow .gradient-blob {
  background-color: rgba(251, 191, 36, 0.15) !important;
}

/* Glow/border highlight when locked in yellow theme */
.profile-container.is-locked {
  border: 3px solid #fbbf24 !important;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.6) !important;
}

/* Ensure all link icons and text are yellow in the yellow theme */
.theme-yellow a svg,
.theme-yellow a i,
.theme-yellow a span {
  color: #fbbf24 !important;
}

/* Let hover color inherit properly when user hovers */
.theme-yellow a:hover svg,
.theme-yellow a:hover i {
  color: inherit !important;
}

/* Red/Rose Theme Overrides (For Light Mode contrast) */
.theme-red {
  --color-primary: #f43f5e;
}

/* Force all green, emerald, and teal text colors to turn rose/pink */
.theme-red [class*="text-emerald"],
.theme-red [class*="text-teal"],
.theme-red [class*="text-green"] {
  color: #f43f5e !important;
}

/* Solid background overrides */
.theme-red .bg-emerald-500,
.theme-red .bg-emerald-600,
.theme-red .bg-teal-500,
.theme-red .bg-emerald-550,
.theme-red .bg-emerald-100,
.theme-red .bg-green-100,
.theme-red .bg-teal-100 {
  background-color: #f43f5e !important;
  color: #ffffff !important;
}

/* Low-opacity background overrides */
.theme-red .bg-emerald-50,
.theme-red .bg-teal-50,
.theme-red [class*="bg-emerald-950"],
.theme-red [class*="bg-teal-950"],
.theme-red [class*="bg-green-950"],
.theme-red [class*="bg-emerald-500/"],
.theme-red [class*="bg-teal-500/"] {
  background-color: rgba(244, 63, 94, 0.15) !important;
}

/* Border overrides */
.theme-red [class*="border-emerald"],
.theme-red [class*="border-teal"],
.theme-red [class*="border-green"],
.theme-red .border-slate-200\/60 {
  border-color: rgba(244, 63, 94, 0.4) !important;
}

/* Gradient overrides (Rose to Pink) */
.theme-red .from-emerald-500,
.theme-red .from-emerald-600 {
  --tw-gradient-from: #f43f5e !important;
  --tw-gradient-to: rgb(244 63 94 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.theme-red .via-green-400 {
  --tw-gradient-stops: var(--tw-gradient-from), #ec4899 50%, var(--tw-gradient-to) !important;
}

.theme-red .to-teal-400,
.theme-red .to-teal-500,
.theme-red .dark\:to-teal-300 {
  --tw-gradient-to: #db2777 !important;
}

/* Update glow blobs too */
.theme-red .gradient-blob {
  background-color: rgba(244, 63, 94, 0.15) !important;
}

/* Glow/border highlight when locked in red theme */
.theme-red .profile-container.is-locked {
  border: 3px solid #f43f5e !important;
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.6) !important;
}

/* Ensure all link icons and text are rose in the red theme */
.theme-red a svg,
.theme-red a i,
.theme-red a span {
  color: #f43f5e !important;
}

.theme-red a:hover svg,
.theme-red a:hover i {
  color: inherit !important;
}

/* Safe area padding for mobile bottom bar */
.safe-bottom {
  padding-bottom: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

/* Bottom active link highlight class */
.mobile-bottom-link.active {
  color: #10b981 !important; /* Emerald-500 */
}
.dark .mobile-bottom-link.active {
  color: #34d399 !important; /* Emerald-400 */
}

/* Yellow theme override for active state */
.theme-yellow .mobile-bottom-link.active {
  color: #fbbf24 !important;
}

/* Red theme override for active state */
.theme-red .mobile-bottom-link.active {
  color: #f43f5e !important;
}

/* Sidebar link glow active state */
.sidebar-link.active {
  color: #10b981 !important; /* Emerald-500 */
  background: rgba(16, 185, 129, 0.1);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.25);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.dark .sidebar-link.active {
  color: #34d399 !important; /* Emerald-400 */
  background: rgba(52, 211, 153, 0.15);
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.35);
  border: 1px solid rgba(52, 211, 153, 0.3);
}

/* Yellow theme override for active sidebar link */
.theme-yellow .sidebar-link.active {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.15) !important;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.4) !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
}

/* Red theme override for active sidebar link */
.theme-red .sidebar-link.active {
  color: #f43f5e !important;
  background: rgba(244, 63, 94, 0.15) !important;
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.4) !important;
  border: 1px solid rgba(244, 63, 94, 0.4) !important;
}