:root {
  --radius: 0.875rem;
  --background: oklch(0.97 0.005 80);
  --foreground: oklch(0.18 0.02 80);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.02 80);
  --primary: oklch(0.60 0.15 75);
  --primary-foreground: oklch(0.12 0.02 80);
  --secondary: oklch(0.92 0.01 80);
  --secondary-foreground: oklch(0.18 0.02 80);
  --accent: oklch(0.30 0.07 255);
  --accent-foreground: oklch(0.95 0.01 250);
  --muted: oklch(0.90 0.01 80);
  --muted-foreground: oklch(0.45 0.02 80);
  --border: oklch(0.85 0.01 80);
  --ring: oklch(0.60 0.15 75);

  --gradient-primary: linear-gradient(135deg, oklch(0.70 0.13 75), oklch(0.55 0.15 75));
  --gradient-accent: linear-gradient(135deg, oklch(0.40 0.08 255), oklch(0.25 0.06 255));
  --gradient-hero: linear-gradient(135deg, oklch(0.94 0.01 80), oklch(0.88 0.02 80));
  --shadow-primary: 0 20px 50px -12px color-mix(in oklab, var(--primary) 35%, transparent);
  --shadow-accent: 0 20px 50px -12px color-mix(in oklab, var(--accent) 35%, transparent);
  --shadow-elegant: 0 10px 40px -10px oklch(0.15 0.02 80 / 0.12);
}

.dark {
  --background: oklch(0.18 0.03 260);
  --foreground: oklch(0.94 0.01 80);
  --card: oklch(0.24 0.04 260);
  --card-foreground: oklch(0.94 0.01 80);
  --primary: oklch(0.76 0.14 75);
  --primary-foreground: oklch(0.10 0.02 80);
  --secondary: oklch(0.30 0.05 260);
  --secondary-foreground: oklch(0.94 0.01 80);
  --accent: oklch(0.55 0.09 255);
  --accent-foreground: oklch(0.10 0.02 80);
  --muted: oklch(0.32 0.04 260);
  --muted-foreground: oklch(0.65 0.02 250);
  --border: oklch(0.34 0.05 260);
  --ring: oklch(0.76 0.14 75);

  --shadow-primary: 0 20px 50px -12px color-mix(in oklab, var(--primary) 45%, transparent);
  --shadow-accent: 0 20px 50px -12px color-mix(in oklab, var(--accent) 45%, transparent);
  --shadow-elegant: 0 10px 40px -10px oklch(0 0 0 / 0.35);
}

* {
  border-color: var(--border);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Poppins', 'Inter', sans-serif;
}

/* Animations */
@keyframes intro-slide {
  0% { opacity: 0; transform: translateX(80px) scale(1.05); filter: blur(8px); }
  30% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  70% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

@keyframes intro-slide-out {
  0% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateX(-80px) scale(1.02); filter: blur(4px); }
}

@keyframes shine {
  0% { transform: translateX(-100%) skewX(-20deg); }
  100% { transform: translateX(200%) skewX(-20deg); }
}

@keyframes float-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 40%, transparent); }
  50% { box-shadow: 0 0 0 20px color-mix(in oklab, var(--accent) 0%, transparent); }
}

@keyframes bg-pan {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Intro slides */
.intro-slide {
  opacity: 0;
  transform: translateX(60px) scale(1.05);
  filter: blur(10px);
  pointer-events: none;
}

.intro-slide.intro-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
  animation: intro-float 0.8s ease-out both;
}

.intro-slide.intro-hidden {
  opacity: 0;
  transform: translateX(-60px) scale(0.98);
  filter: blur(8px);
  pointer-events: none;
}

@keyframes intro-float {
  0% { opacity: 0; transform: translateX(60px) scale(1.05); filter: blur(10px); }
  100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

/* Utility Classes */
.text-gradient-primary {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-accent {
  background: var(--gradient-accent);
}

.bg-gradient-hero {
  background: var(--gradient-hero);
}

.shadow-primary {
  box-shadow: var(--shadow-primary);
}

.shadow-accent {
  box-shadow: var(--shadow-accent);
}

.shadow-elegant {
  box-shadow: var(--shadow-elegant);
}

.animate-float-up {
  animation: float-up 0.7s ease-out both;
}

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

.animate-shine {
  position: relative;
  overflow: hidden;
}

.animate-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, white 40%, transparent), transparent);
  animation: shine 2.5s ease-in-out infinite;
}

/* Tailwind Custom Config */
.bg-background {
  background-color: var(--background);
}

.text-foreground {
  color: var(--foreground);
}

.bg-card {
  background-color: var(--card);
}

.text-card-foreground {
  color: var(--card-foreground);
}

.text-muted-foreground {
  color: var(--muted-foreground);
}

.border-border {
  border-color: var(--border);
}

.text-primary-foreground {
  color: var(--primary-foreground);
}

.text-accent-foreground {
  color: var(--accent-foreground);
}

/* Gallery styles */
.gallery-thumb.active {
  border-color: var(--accent) !important;
  transform: scale(1.03);
}

.gallery-dot.active {
  width: 28px !important;
  background: var(--accent) !important;
}

.intro-dot.active {
  width: 48px !important;
  background: white !important;
}

.intro-slide.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.intro-slide.inactive {
  opacity: 0 !important;
  pointer-events: none !important;
}