/* Landing Page Styles - Compatible with CDN Tailwind */

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

/* CSS Variables for Landing Page */
:root {
  --landing-background: 222 47% 6%;
  --landing-foreground: 45 30% 96%;

  --landing-card: 222 40% 10%;
  --landing-card-foreground: 45 30% 96%;

  --landing-popover: 222 40% 10%;
  --landing-popover-foreground: 45 30% 96%;

  --landing-primary: 38 92% 55%;
  --landing-primary-foreground: 222 47% 6%;

  --landing-secondary: 222 30% 16%;
  --landing-secondary-foreground: 45 30% 96%;

  --landing-muted: 222 30% 16%;
  --landing-muted-foreground: 220 15% 55%;

  --landing-accent: 38 92% 55%;
  --landing-accent-foreground: 222 47% 6%;

  --landing-destructive: 0 84.2% 60.2%;
  --landing-destructive-foreground: 210 40% 98%;

  --landing-border: 222 30% 18%;
  --landing-input: 222 30% 18%;
  --landing-ring: 38 92% 55%;

  --landing-radius: 0.75rem;

  /* Custom tokens */
  --landing-glow-primary: 0 0 60px hsl(38 92% 55% / 0.3);
  --landing-glow-soft: 0 0 40px hsl(38 92% 55% / 0.15);
  --landing-gradient-hero: linear-gradient(135deg, hsl(222 47% 8%) 0%, hsl(222 47% 6%) 50%, hsl(240 30% 8%) 100%);
  --landing-gradient-card: linear-gradient(145deg, hsl(222 40% 12%) 0%, hsl(222 40% 8%) 100%);
  --landing-gradient-text: linear-gradient(135deg, hsl(45 30% 96%) 0%, hsl(38 92% 75%) 100%);
  --landing-gradient-accent: linear-gradient(135deg, hsl(38 92% 55%) 0%, hsl(28 90% 50%) 100%);
}

/* Landing page specific styles - scoped to landing page route */
body:has([data-landing-page]) {
  background: var(--landing-gradient-hero) !important;
  color: hsl(var(--landing-foreground));
  font-family: 'DM Sans', system-ui, sans-serif;
  min-height: 100vh;
}

/* Landing page component styles */
[data-landing-page] {
  --background: var(--landing-background);
  --foreground: var(--landing-foreground);
  --card: var(--landing-card);
  --card-foreground: var(--landing-card-foreground);
  --popover: var(--landing-popover);
  --popover-foreground: var(--landing-popover-foreground);
  --primary: var(--landing-primary);
  --primary-foreground: var(--landing-primary-foreground);
  --secondary: var(--landing-secondary);
  --secondary-foreground: var(--landing-secondary-foreground);
  --muted: var(--landing-muted);
  --muted-foreground: var(--landing-muted-foreground);
  --accent: var(--landing-accent);
  --accent-foreground: var(--landing-accent-foreground);
  --destructive: var(--landing-destructive);
  --destructive-foreground: var(--landing-destructive-foreground);
  --border: var(--landing-border);
  --input: var(--landing-input);
  --ring: var(--landing-ring);
  --radius: var(--landing-radius);
}

[data-landing-page] * {
  border-color: hsl(var(--landing-border));
}

[data-landing-page] h1,
[data-landing-page] h2,
[data-landing-page] h3,
[data-landing-page] h4,
[data-landing-page] h5,
[data-landing-page] h6 {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Utility Classes */
[data-landing-page] .text-gradient {
  background: var(--landing-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-landing-page] .card-glow {
  box-shadow: var(--landing-glow-soft);
  transition: box-shadow 0.3s ease;
}

[data-landing-page] .card-glow:hover {
  box-shadow: var(--landing-glow-primary);
}

[data-landing-page] .btn-glow {
  box-shadow: 0 0 30px hsl(38 92% 55% / 0.4);
  transition: all 0.3s ease;
}

[data-landing-page] .btn-glow:hover {
  box-shadow: 0 0 50px hsl(38 92% 55% / 0.6);
  transform: translateY(-2px);
}

[data-landing-page] .glass {
  background: hsl(222 40% 10% / 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid hsl(222 30% 20% / 0.5);
}

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

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 30px hsl(38 92% 55% / 0.3); }
  50% { box-shadow: 0 0 50px hsl(38 92% 55% / 0.5); }
}

[data-landing-page] .animate-float {
  animation: float 6s ease-in-out infinite;
}

[data-landing-page] .animate-fade-up {
  animation: fadeUp 0.6s ease-out forwards;
}

[data-landing-page] .animate-fade-up-delay-1 {
  animation: fadeUp 0.6s ease-out 0.1s forwards;
  opacity: 0;
}

[data-landing-page] .animate-fade-up-delay-2 {
  animation: fadeUp 0.6s ease-out 0.2s forwards;
  opacity: 0;
}

[data-landing-page] .animate-fade-up-delay-3 {
  animation: fadeUp 0.6s ease-out 0.3s forwards;
  opacity: 0;
}

[data-landing-page] .animate-pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}