@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

@custom-variant dark (&:is(.dark *));

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-ring-offset-background: var(--background);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-glass: var(--glass);
  --color-glass-border: var(--glass-border);
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

:root {
  --radius: 0.75rem;
  --background: oklch(0.985 0.002 250);
  --foreground: oklch(0.15 0.03 255);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0.03 255);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0.03 255);
  --primary: oklch(0.52 0.16 245);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.96 0.01 255);
  --secondary-foreground: oklch(0.25 0.03 255);
  --muted: oklch(0.96 0.005 255);
  --muted-foreground: oklch(0.52 0.03 255);
  --accent: oklch(0.68 0.14 170);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.92 0.01 255);
  --input: oklch(0.92 0.01 255);
  --ring: oklch(0.52 0.16 245);
  --success: oklch(0.68 0.18 160);
  --success-foreground: oklch(1 0 0);
  --glass: oklch(1 0 0 / 60%);
  --glass-border: oklch(1 0 0 / 30%);
  --chart-1: oklch(0.52 0.16 245);
  --chart-2: oklch(0.68 0.14 170);
  --chart-3: oklch(0.68 0.18 160);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.984 0.003 247.858);
  --sidebar-foreground: oklch(0.15 0.03 255);
  --sidebar-primary: oklch(0.52 0.16 245);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.96 0.01 255);
  --sidebar-accent-foreground: oklch(0.25 0.03 255);
  --sidebar-border: oklch(0.92 0.01 255);
  --sidebar-ring: oklch(0.52 0.16 245);
}

@layer base {
  * {
    border-color: var(--color-border);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-body);
    position: relative;
    min-height: 100vh;
  }

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

@layer components {
  .glass-card {
    background: var(--color-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px oklch(0.15 0.03 260 / 8%);
  }

  .glass-card-hover {
    background: var(--color-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px oklch(0.15 0.03 260 / 8%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .glass-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px oklch(0.55 0.24 264 / 15%);
  }

  .gradient-text {
    background: linear-gradient(135deg, oklch(0.55 0.24 264), oklch(0.6 0.2 300));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .gradient-bg {
    background: linear-gradient(135deg, oklch(0.55 0.24 264), oklch(0.6 0.2 300));
  }

  .gradient-bg-dark {
    background: linear-gradient(135deg, oklch(0.18 0.04 264), oklch(0.22 0.06 300));
  }

  .btn-glow {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
  }

  .btn-glow:hover {
    transform: scale(1.03);
    box-shadow: 0 0 30px oklch(0.55 0.24 264 / 40%);
  }

  .section-padding {
    padding: 5rem 1.5rem;
  }

  @media (min-width: 768px) {
    .section-padding {
      padding: 7rem 2rem;
    }
  }

  .nav-glass {
    background: oklch(1 0 0 / 80%);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-glass-border);
  }

  .pagination-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 3rem;
    padding: 1rem 1.25rem;
    border: 1px solid oklch(0.92 0.01 255);
    background: oklch(1 0 0 / 72%);
    border-radius: 1.5rem;
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 32px oklch(0.15 0.03 255 / 8%);
  }

  .pagination-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
  }

  .pagination-summary-label {
    color: var(--color-muted-foreground);
  }

  .pagination-summary-value {
    font-weight: 700;
    color: var(--color-foreground);
  }

  .pagination-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .pagination-link,
  .pagination-ellipsis {
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.9rem;
    border: 1px solid oklch(0.92 0.01 255);
    background: oklch(1 0 0);
    color: var(--color-foreground);
    font-size: 0.875rem;
    font-weight: 600;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .pagination-link:hover {
    transform: translateY(-1px);
    border-color: oklch(0.52 0.16 245 / 40%);
    color: var(--color-primary);
    background: oklch(0.52 0.16 245 / 6%);
  }

  .pagination-link-active {
    border-color: transparent;
    background: linear-gradient(135deg, oklch(0.52 0.16 245), oklch(0.68 0.14 170));
    color: white;
    box-shadow: 0 10px 24px oklch(0.52 0.16 245 / 22%);
  }

  .pagination-link-disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .site-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle at top left, oklch(0.52 0.16 245 / 10%), transparent 35%),
      radial-gradient(circle at top right, oklch(0.68 0.14 170 / 12%), transparent 30%),
      radial-gradient(circle at bottom center, oklch(0.68 0.18 160 / 8%), transparent 36%),
      linear-gradient(180deg, oklch(0.99 0.002 250), oklch(0.985 0.002 250));
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

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

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
}

/* Vanilla Reveal Animations */
.reveal {
  opacity: 0;
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up { transform: translateY(30px); }
.reveal-scale { transform: scale(0.95); }
.reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.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; }
.reveal-delay-5 { transition-delay: 0.5s; }

@keyframes floatCards {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes floatCards2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

  body::before {
    content: "";
    position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.65), transparent 90%);
}