/* ============================================================
   The Trail Tales — Design Tokens (converted from theme.css)
   Pure vanilla CSS — no build step required.
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Jost:wght@300;400;500;600&display=swap');

/* ---- Custom properties (design tokens) ---- */
:root {
  --radius: 0.35rem;
  --background: oklch(0.15 0.023 20);
  --foreground: oklch(0.96 0.008 60);
  --card: oklch(0.19 0.028 20);
  --card-foreground: oklch(0.96 0.008 60);
  --popover: oklch(0.19 0.028 20);
  --popover-foreground: oklch(0.96 0.008 60);
  --primary: oklch(0.56 0.2 18);
  --primary-foreground: oklch(0.98 0.005 60);
  --secondary: oklch(0.25 0.035 20);
  --secondary-foreground: oklch(0.95 0.008 60);
  --muted: oklch(0.24 0.028 20);
  --muted-foreground: oklch(0.72 0.02 40);
  --accent: oklch(0.3 0.05 20);
  --accent-foreground: oklch(0.97 0.008 60);
  --destructive: oklch(0.6 0.23 25);
  --destructive-foreground: oklch(0.98 0.005 60);
  --border: oklch(0.32 0.03 25 / 0.7);
  --input: oklch(0.3 0.03 25);
  --ring: oklch(0.78 0.1 85);
  --gold: oklch(0.82 0.11 85);
  --gold-foreground: oklch(0.18 0.03 30);
  --header-bg: oklch(0.15 0.023 20 / 0.85);
  --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);
  --gradient-hero: radial-gradient(
    120% 90% at 50% 0%,
    oklch(0.32 0.11 20 / 0.85) 0%,
    oklch(0.15 0.023 20) 62%
  );
  --gradient-gold: linear-gradient(100deg, oklch(0.88 0.09 90), oklch(0.72 0.12 70));
  --shadow-glow: 0 0 60px oklch(0.56 0.2 18 / 0.35);
  --shadow-card: 0 18px 50px -20px oklch(0 0 0 / 0.75);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

/* Hide scrollbar globally while keeping page scrollable */
html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Cormorant Garamond', ui-serif, Georgia, serif;
  font-weight: 300;
  margin-top: 0;
  color: white;
}

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

img { max-width: 100%; display: block; }

/* ---- Utility classes matching Tailwind usage ---- */

/* Hero gradient surface */
.hero-surface {
  background-image: var(--gradient-hero);
}

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

/* Eyebrow text */
.eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* Colors */
.text-gold { color: var(--gold); }
.text-primary { color: var(--primary); }
.text-muted { color: var(--muted-foreground); }
.text-foreground { color: var(--foreground); }
.text-destructive { color: var(--destructive); }

/* Backgrounds */
.bg-card { background-color: var(--card); }
.bg-secondary { background-color: var(--secondary); }
.bg-background { background-color: var(--background); }
.bg-primary { background-color: var(--primary); }
.bg-muted { background-color: var(--muted); }

/* Borders */
.border-border { border-color: var(--border); }
.border-gold { border-color: var(--gold); }
.border-primary { border-color: var(--primary); }

/* Border widths */
.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }

/* Rounded */
.rounded { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: 9999px; }

/* Shadows */
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-card { box-shadow: var(--shadow-card); }

/* ---- Light Mode Overrides ---- */
html.light {
  --background: oklch(0.97 0.005 60);
  --foreground: oklch(0.2 0.015 20);
  --card: oklch(0.99 0.002 60);
  --card-foreground: oklch(0.2 0.015 20);
  --popover: oklch(0.99 0.002 60);
  --popover-foreground: oklch(0.2 0.015 20);
  --secondary: oklch(0.93 0.006 60);
  --secondary-foreground: oklch(0.2 0.015 20);
  --muted: oklch(0.94 0.005 60);
  --muted-foreground: oklch(0.48 0.02 40);
  --accent: oklch(0.91 0.02 20);
  --accent-foreground: oklch(0.2 0.015 20);
  --border: oklch(0.85 0.01 25 / 0.6);
  --input: oklch(0.88 0.01 25);
  --gold: oklch(0.72 0.12 70);
  --header-bg: oklch(0.97 0.005 60 / 0.85);
  --gradient-hero: radial-gradient(
    120% 90% at 50% 0%,
    oklch(0.94 0.015 80) 0%,
    oklch(0.97 0.005 60) 62%
  );
  --shadow-glow: 0 0 40px oklch(0.56 0.2 18 / 0.15);
  --shadow-card: 0 10px 30px -10px oklch(0 0 0 / 0.15);
}

html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6,
html.light .font-display {
  color: oklch(0.2 0.015 20);
}

/* Light mode support for header / general text items */
html.light .btn-ghost:hover {
  background-color: var(--secondary);
}

/* Theme Spray Transition Layout */
.spray-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  pointer-events: none;
  display: none;
  overflow: hidden;
}

.spray-curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: var(--background);
  z-index: 1;
}

.full-screen-spray-mist {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 35% 45%, rgba(212,175,55,0.98) 0%, rgba(212,175,55,0.7) 50%, rgba(255,255,255,0.2) 80%, transparent 100%);
  opacity: 0;
  mix-blend-mode: screen;
  z-index: 3;
}

.spray-hand-bottle-wrapper {
  position: absolute;
  right: -320px;
  top: 50%;
  transform: translateY(-50%);
  transition: right 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
  pointer-events: none;
}

/* Squeeze cap keyframes */
@keyframes squeezeNozzle {
  0% { transform: translateY(0); }
  30% { transform: translateY(6px); }
  70% { transform: translateY(6px); }
  100% { transform: translateY(0); }
}
.squeeze-cap {
  animation: squeezeNozzle 0.5s ease forwards;
  transform-origin: center;
}

/* Squeeze index finger keyframes */
@keyframes squeezeFinger {
  0% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(4px) rotate(-2deg); }
  70% { transform: translateY(4px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.squeeze-finger {
  animation: squeezeFinger 0.5s ease forwards;
  transform-origin: 180px 90px;
}

/* Spray Droplets Animations */
.spray-droplets {
  display: none;
}
.spray-droplets-active {
  display: block;
}

.droplet {
  transform-origin: 86px 26px;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 3px var(--gold));
}

@keyframes flyD1 {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-200px, -50px) scale(2); opacity: 0; }
}
@keyframes flyD2 {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-280px, -10px) scale(1.2); opacity: 0; }
}
@keyframes flyD3 {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-230px, 35px) scale(1.6); opacity: 0; }
}
@keyframes flyD4 {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-340px, -80px) scale(0.9); opacity: 0; }
}
@keyframes flyD5 {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-180px, 60px) scale(1.8); opacity: 0; }
}
@keyframes flyD6 {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-310px, 25px) scale(1.3); opacity: 0; }
}
@keyframes flyD7 {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-260px, -35px) scale(1.5); opacity: 0; }
}
@keyframes flyD8 {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-380px, 10px) scale(1.1); opacity: 0; }
}

.spray-droplets-active .d1 { animation: flyD1 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }
.spray-droplets-active .d2 { animation: flyD2 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }
.spray-droplets-active .d3 { animation: flyD3 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }
.spray-droplets-active .d4 { animation: flyD4 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }
.spray-droplets-active .d5 { animation: flyD5 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }
.spray-droplets-active .d6 { animation: flyD6 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }
.spray-droplets-active .d7 { animation: flyD7 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }
.spray-droplets-active .d8 { animation: flyD8 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }