/* ==========================================================================
   Culture by BVH Hospitality — Custom styles
   Loaded AFTER the Tailwind CDN script + inline config.
   Defines CSS custom properties (design tokens) and small utility classes
   that mirror the original Tailwind v4 "@utility" / "@theme" definitions.
   ========================================================================== */

:root {
  --radius: 0.75rem;

  /* Warm palette */
  --background: oklch(0.985 0.012 85);
  --foreground: oklch(0.22 0.04 50);
  --card: oklch(0.98 0.015 85);
  --card-foreground: oklch(0.22 0.04 50);
  --popover: oklch(0.98 0.015 85);
  --popover-foreground: oklch(0.22 0.04 50);

  --primary: oklch(0.32 0.06 55);
  --primary-foreground: oklch(0.97 0.02 85);
  --secondary: oklch(0.93 0.03 80);
  --secondary-foreground: oklch(0.28 0.05 50);
  --muted: oklch(0.95 0.02 85);
  --muted-foreground: oklch(0.45 0.04 60);
  --accent: oklch(0.72 0.13 75);
  --accent-foreground: oklch(0.22 0.04 50);

  --destructive: oklch(0.58 0.22 27);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.88 0.02 80);
  --input: oklch(0.9 0.02 80);
  --ring: oklch(0.72 0.13 75);

  --gold: oklch(0.74 0.14 78);
  --gold-soft: oklch(0.86 0.08 82);
  --cream: oklch(0.97 0.022 88);
  --beige: oklch(0.91 0.035 82);
  --brown: oklch(0.28 0.05 50);

  --font-display: "Playfair Display", ui-serif, Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  --shadow-luxe: 0 30px 80px -30px color-mix(in oklab, var(--brown) 35%, transparent);
  --shadow-soft: 0 10px 40px -20px color-mix(in oklab, var(--brown) 25%, transparent);
  --gradient-gold: linear-gradient(135deg, oklch(0.78 0.13 78), oklch(0.65 0.14 60));
  --gradient-warm: linear-gradient(180deg, var(--cream), var(--beige));
}

* {
  border-color: var(--border);
}
html {
  scroll-behavior: smooth;
}
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* Shadows as plain utility classes (referenced as shadow-luxe / shadow-soft) */
.shadow-luxe {
  box-shadow: var(--shadow-luxe);
}
.shadow-soft {
  box-shadow: var(--shadow-soft);
}

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

.glass {
  background: color-mix(in oklab, var(--cream) 60%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in oklab, var(--gold) 25%, transparent);
}

.glass-dark {
  background: color-mix(in oklab, var(--brown) 35%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
}

/* Keyframes */
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes ken-burns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1%, -2%); }
}

.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}
.animate-fade-up {
  animation: fade-up 0.8s ease-out both;
}
.animate-fade-in {
  animation: fade-in 0.8s ease-out both;
}
.animate-scale-in {
  animation: scale-in 0.6s ease-out both;
}
.animate-ken-burns {
  animation: ken-burns 18s ease-in-out infinite alternate;
}

/* Scroll reveal (JS toggles .revealed) */
[data-reveal] {
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  opacity: 0;
  transform: translateY(24px);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* FAQ accordion animated height */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease-out, opacity 0.3s ease-out;
}
.faq-panel.open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.faq-panel > div {
  overflow: hidden;
}

/* Simple fade for mobile nav */
.mobile-nav {
  display: none;
}
.mobile-nav.open {
  display: block;
}