/* Limão Stays — shared styles
   Tailwind utilities are loaded via Play CDN in each page.
   This file holds: design tokens, base typography, gradients,
   custom utilities (glass, gold-line, btn-glow, img-zoom, reveal),
   keyframe animations and the grain overlay. */

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

:root {
  --background: 30 10% 5%;
  --foreground: 36 25% 88%;

  --card: 28 12% 8%;
  --card-foreground: 36 25% 88%;

  --primary: 38 55% 58%;
  --primary-foreground: 30 20% 8%;

  --secondary: 25 18% 12%;
  --secondary-foreground: 36 25% 88%;

  --muted: 28 10% 14%;
  --muted-foreground: 36 12% 62%;

  --accent: 140 22% 22%;
  --accent-foreground: 36 25% 92%;

  --border: 30 10% 16%;
  --input: 30 10% 14%;
  --ring: 38 55% 58%;

  --gold: 38 55% 58%;
  --gold-soft: 38 45% 70%;
  --coffee: 25 30% 14%;
  --coffee-deep: 25 25% 8%;
  --forest: 140 25% 18%;
  --forest-deep: 145 30% 10%;

  --gradient-hero: linear-gradient(180deg, hsl(30 10% 5% / 0.2) 0%, hsl(30 10% 5% / 0.55) 55%, hsl(30 10% 4%) 100%);
  --gradient-gold: linear-gradient(135deg, hsl(38 55% 58%) 0%, hsl(35 65% 48%) 100%);
  --gradient-card: linear-gradient(160deg, hsl(28 14% 10% / 0.9) 0%, hsl(25 18% 7% / 0.85) 100%);

  --transition-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse at top, hsl(25 30% 10%) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, hsl(140 20% 6%) 0%, transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* grain overlay */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* font helpers */
.font-serif { font-family: 'Cormorant Garamond', serif; }
.font-sans  { font-family: 'Inter', system-ui, sans-serif; }

/* color helpers */
.text-gold { color: hsl(var(--gold)); }
.text-gold-soft { color: hsl(var(--gold-soft)); }
.bg-coffee { background-color: hsl(var(--coffee)); }
.bg-coffee-deep { background-color: hsl(var(--coffee-deep)); }
.bg-coffee-deep\/40 { background-color: hsl(var(--coffee-deep) / 0.4); }
.bg-coffee-deep\/30 { background-color: hsl(var(--coffee-deep) / 0.3); }
.bg-coffee-deep\/50 { background-color: hsl(var(--coffee-deep) / 0.5); }
.bg-coffee-deep\/60 { background-color: hsl(var(--coffee-deep) / 0.6); }
.bg-coffee-deep\/80 { background-color: hsl(var(--coffee-deep) / 0.8); }
.bg-coffee-deep\/85 { background-color: hsl(var(--coffee-deep) / 0.85); }
.from-coffee-deep { --tw-gradient-from: hsl(var(--coffee-deep)) var(--tw-gradient-from-position); --tw-gradient-to: hsl(var(--coffee-deep) / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-coffee-deep\/80 { --tw-gradient-to: hsl(var(--coffee-deep) / 0)  var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--coffee-deep) / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.via-coffee-deep\/40 { --tw-gradient-to: hsl(var(--coffee-deep) / 0)  var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--coffee-deep) / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.via-coffee-deep\/85 { --tw-gradient-to: hsl(var(--coffee-deep) / 0)  var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--coffee-deep) / 0.85) var(--tw-gradient-via-position), var(--tw-gradient-to); }

/* gradient bgs */
.bg-gradient-hero { background-image: var(--gradient-hero); }
.bg-gradient-gold { background-image: var(--gradient-gold); }
.bg-gradient-card { background-image: var(--gradient-card); }

/* glass */
.glass {
  background: hsl(28 14% 10% / 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid hsl(38 30% 60% / 0.12);
}
.glass-strong {
  background: hsl(28 14% 8% / 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid hsl(38 30% 60% / 0.1);
}

/* gold thin line */
.gold-line {
  background: linear-gradient(90deg, transparent, hsl(var(--gold) / 0.6), transparent);
  height: 1px;
}

/* button glow */
.btn-glow {
  transition: all 0.5s var(--transition-smooth);
  box-shadow: 0 0 0 hsl(var(--gold) / 0);
}
.btn-glow:hover {
  box-shadow: 0 0 40px hsl(var(--gold) / 0.45);
}

/* image hover zoom */
.img-zoom { overflow: hidden; }
.img-zoom img {
  transition: transform 1.4s var(--transition-smooth), filter 0.6s ease;
  width: 100%; height: 100%; object-fit: cover;
}
.img-zoom:hover img {
  transform: scale(1.08);
  filter: brightness(1.05);
}

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--transition-smooth), transform 0.9s var(--transition-smooth);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.tracking-luxe { letter-spacing: 0.32em; }

/* keyframes */
@keyframes ken-burns {
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.12) translate(-1%,-1%); }
}
.animate-ken-burns { animation: ken-burns 18s ease-out both; }

@keyframes fade-in {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.8s cubic-bezier(0.22,1,0.36,1) both; }

@keyframes fade-up-slow {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-up-slow { animation: fade-up-slow 1.4s cubic-bezier(0.22,1,0.36,1) both; }

/* nav underline link */
.nav-link {
  position: relative;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: hsl(var(--foreground) / 0.7);
  transition: color 300ms;
}
.nav-link:hover { color: hsl(var(--gold)); }
.nav-link.active { color: hsl(var(--gold)); }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -0.5rem;
  height: 1px; width: 0;
  background: hsl(var(--gold));
  transition: width 500ms var(--transition-smooth);
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* hide scrollbar but keep scroll */
.scrollbar-thin::-webkit-scrollbar { height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: hsl(var(--gold) / 0.3); border-radius: 3px; }