/*
 * Navrang Mahotsav — premium Indian festival design system.
 * Ported from the original Tailwind v4 `styles.css`. This file only holds
 * the pieces Tailwind's Play CDN can't generate on the fly (custom utility
 * classes, keyframes, fonts, base element styles). Everything else is
 * plain Tailwind utility classes in the page markup, configured via the
 * `tailwind.config` block in partials/header.php.
 */

:root {
  --radius: 0.75rem;

  --background: oklch(0.14 0.045 18);
  --foreground: oklch(0.96 0.02 90);
  --card: oklch(0.19 0.05 18);
  --card-foreground: oklch(0.96 0.02 90);
  --popover: oklch(0.17 0.05 18);
  --popover-foreground: oklch(0.96 0.02 90);

  --primary: oklch(0.82 0.15 85);
  --primary-foreground: oklch(0.18 0.05 30);
  --secondary: oklch(0.38 0.11 18);
  --secondary-foreground: oklch(0.96 0.03 90);
  --muted: oklch(0.23 0.04 20);
  --muted-foreground: oklch(0.76 0.03 80);
  --accent: oklch(0.48 0.1 22);
  --accent-foreground: oklch(0.96 0.03 90);
  --destructive: oklch(0.6 0.22 25);
  --destructive-foreground: oklch(0.98 0.01 90);
  --success: oklch(0.68 0.16 155);
  --success-foreground: oklch(0.17 0.05 160);

  --border: oklch(0.36 0.06 30);
  --input: oklch(0.3 0.05 22);
  --ring: oklch(0.82 0.15 85);

  --gradient-festival: linear-gradient(
    135deg,
    oklch(0.88 0.14 92) 0%,
    oklch(0.78 0.16 78) 50%,
    oklch(0.68 0.14 65) 100%
  );
  --gradient-night: radial-gradient(
      120% 90% at 12% 0%,
      oklch(0.32 0.1 18 / 0.7) 0%,
      transparent 58%
    ),
    radial-gradient(100% 80% at 92% 8%, oklch(0.42 0.12 80 / 0.35) 0%, transparent 55%),
    linear-gradient(180deg, oklch(0.14 0.045 18) 0%, oklch(0.1 0.04 15) 100%);
  --shadow-elegant: 0 20px 60px -25px oklch(0.35 0.1 18 / 0.7);
  --shadow-glow: 0 0 45px -8px oklch(0.82 0.15 85 / 0.5);
  --transition-smooth: 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  background-color: var(--background);
  background-image: var(--gradient-night);
  background-attachment: fixed;
  color: var(--foreground);
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1, h2, h3, .font-display {
  font-family: "Marcellus", "Cinzel", ui-serif, Georgia, serif;
  letter-spacing: 0.01em;
}

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

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

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

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

.pattern-dandiya {
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in oklab, var(--primary) 12%, transparent) 0 2px,
    transparent 2px 14px
  );
}

.pattern-rangoli {
  background-image: radial-gradient(
      circle at 50% 50%,
      color-mix(in oklab, var(--secondary) 16%, transparent) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 0% 0%,
      color-mix(in oklab, var(--primary) 12%, transparent) 0 1px,
      transparent 2px
    );
  background-size: 26px 26px;
}

.border-festival {
  border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
}

.card-elevate {
  transition:
    transform var(--transition-smooth),
    box-shadow var(--transition-smooth),
    border-color var(--transition-smooth);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-in {
  opacity: 1;
  transform: none;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes text-reveal {
  from { opacity: 0; transform: translateY(110%); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  animation: fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-text-reveal {
  animation: text-reveal 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.35; }
  50% { transform: translateY(-26px) rotate(12deg); opacity: 0.75; }
}

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

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 40s linear infinite;
}

/* Button variants (ported from src/components/ui/button.tsx `cva` config) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  height: 2.25rem;
  padding: 0.5rem 1rem;
  border: none;
  text-decoration: none;
}
.btn:disabled { pointer-events: none; opacity: 0.5; cursor: not-allowed; }
.btn-default { background: var(--primary); color: var(--primary-foreground); }
.btn-default:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.btn-outline { border: 1px solid var(--input); background: var(--background); color: var(--foreground); }
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-hero { background-image: var(--gradient-festival); color: var(--primary-foreground); font-weight: 600; box-shadow: var(--shadow-glow); }
.btn-hero:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-festive { border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent); background: color-mix(in oklab, var(--card) 70%, transparent); color: var(--primary); backdrop-filter: blur(6px); }
.btn-festive:hover { background: color-mix(in oklab, var(--primary) 10%, transparent); transform: translateY(-2px); }
.btn-sm { height: 2rem; border-radius: 0.375rem; padding: 0 0.75rem; font-size: 0.75rem; }
.btn-lg { height: 2.75rem; border-radius: 0.5rem; padding: 0 2rem; font-size: 1rem; }
.btn-xl { height: 3.25rem; border-radius: 0.75rem; padding: 0 2.5rem; font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}