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

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;

  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --card-border: 214.3 31.8% 91.4%;

  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;

  --primary: 251 65% 54%;
  --primary-foreground: 210 40% 98%;

  --secondary: 243 100% 69%;
  --secondary-foreground: 222.2 47.4% 11.2%;

  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;

  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;

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

  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 251 65% 54%;

  --radius: 1rem;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;

  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --card-border: 240 3.7% 15.9%;

  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;

  --primary: 251 65% 54%;
  --primary-foreground: 210 40% 98%;

  --secondary: 243 100% 69%;
  --secondary-foreground: 210 40% 98%;

  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;

  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;

  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 251 65% 54%;
}

* {
  border-color: hsl(var(--border));
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes gradient-x {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.animate-gradient-x {
  animation: gradient-x 15s ease infinite;
  background-size: 200% 200%;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-delayed { animation: float 6s ease-in-out 3s infinite; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fade-up 0.6s ease both; }

@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* ── Reusable components (mirrors Tailwind utility combos from the React app) ── */
.glass-card {
  background-color: rgb(255 255 255 / 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 0.2);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08);
}
.dark .glass-card {
  background-color: rgb(0 0 0 / 0.4);
  border-color: rgb(255 255 255 / 0.1);
}

.text-gradient {
  background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-primary-secondary {
  background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)));
}
.bg-primary-secondary-tr {
  background-image: linear-gradient(to top right, hsl(var(--primary)), hsl(var(--secondary)));
}

.btn-gradient {
  background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)));
  color: white;
  font-weight: 700;
  border: none;
  border-radius: 9999px;
  box-shadow: 0 10px 25px -5px hsl(var(--primary) / 0.35);
  transition: all 0.2s ease;
}
.btn-gradient:hover {
  box-shadow: 0 15px 30px -5px hsl(var(--primary) / 0.45);
  transform: translateY(-2px);
}

.card-surface {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--card-border));
  border-radius: 1.5rem;
}

.prose h2 { font-size: 1.375rem; font-weight: 700; margin: 1.75rem 0 0.75rem; }
.prose p, .prose li { color: hsl(var(--muted-foreground)); line-height: 1.75; margin: 0.5rem 0; }
.prose ul { padding-left: 1.25rem; list-style: disc; }
.prose strong { color: hsl(var(--foreground)); }

/* Line clamping */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Embla-style screenshot carousel (simple CSS scroll-snap, JS auto-advances) */
.embla { overflow: hidden; }
.embla__container {
  display: flex;
  gap: 2rem;
  padding: 2rem 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.embla__container::-webkit-scrollbar { display: none; }
.embla__slide { flex: 0 0 280px; scroll-snap-align: center; }

/* Modal / dialog */
.dialog-overlay {
  position: fixed; inset: 0; background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.dialog-content {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-radius: 1.25rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Mobile menu collapse animation */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-menu.open { max-height: 500px; }

::selection { background: hsl(var(--primary) / 0.25); }