@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --font-title: 'Kanit', sans-serif;
  --font-body: 'Prompt', sans-serif;
  --primary: 14, 165, 233; /* sky-500 */
  --primary-hover: 2, 132, 199; /* sky-600 */
  --accent: 59, 130, 246; /* blue-500 */
  
  /* Light Theme Variables */
  --bg-main: 248, 250, 252; /* slate-50 */
  --bg-card: 255, 255, 255;
  --bg-nav: 255, 255, 255, 0.7;
  --text-main: 15, 23, 42; /* slate-900 */
  --text-muted: 71, 85, 105; /* slate-600 */
  --border-color: 226, 232, 240; /* slate-200 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.dark {
  /* Dark Theme Variables */
  --bg-main: 15, 23, 42; /* slate-900 */
  --bg-card: 30, 41, 59; /* slate-800 */
  --bg-nav: 15, 23, 42, 0.7;
  --text-main: 243, 244, 246; /* slate-100 */
  --text-muted: 156, 163, 175; /* slate-400 */
  --border-color: 51, 65, 85; /* slate-700 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

* {
  font-family: var(--font-body);
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(var(--bg-main), 1);
}
::-webkit-scrollbar-thumb {
  background: rgb(var(--primary));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--primary-hover));
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(var(--bg-card), 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--border-color), 0.5);
}

.glass-nav {
  background: rgba(var(--bg-nav));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(var(--border-color), 0.3);
}

/* Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

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

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

/* Scroll reveal initial states */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger reveals */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Timeline connector styling */
.timeline-dot::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: rgb(var(--primary));
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(var(--primary), 0.3);
}

/* Dark/Light mode overrides */
body {
  background-color: rgba(var(--bg-main), 1);
  color: rgba(var(--text-main), 1);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Loading Spinner */
.spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(farthest-side, rgb(var(--primary)) 94%, #0000) top/9px 9px no-repeat,
    conic-gradient(#0000 30%, rgb(var(--primary)));
  -webkit-mask: radial-gradient(farthest-side, #0000 40px, #000 41px);
  mask: radial-gradient(farthest-side, #0000 40px, #000 41px);
  animation: spinner-c74ag5 1s infinite linear;
}

@keyframes spinner-c74ag5 {
  100% {
    transform: rotate(1turn);
  }
}