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

/* CSS Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  line-height: 1.2;
}

/* CSS Custom Properties - Design Tokens */
:root {
  /* Colors - HSL values from React Tailwind config */
  --background: 45 30% 97%;
  --foreground: 160 30% 10%;

  --card: 45 25% 95%;
  --card-foreground: 160 30% 10%;

  --popover: 45 30% 97%;
  --popover-foreground: 160 30% 10%;

  --primary: 158 45% 22%;
  --primary-foreground: 45 30% 97%;

  --secondary: 42 80% 55%;
  --secondary-foreground: 160 30% 10%;

  --muted: 45 20% 90%;
  --muted-foreground: 160 15% 40%;

  --accent: 158 35% 35%;
  --accent-foreground: 45 30% 97%;

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

  --border: 158 20% 80%;
  --input: 158 20% 85%;
  --ring: 158 45% 22%;

  --radius: 0.75rem;

  /* Custom Gradients */
  --gradient-hero: linear-gradient(135deg, hsl(158 45% 18%) 0%, hsl(158 35% 28%) 50%, hsl(42 60% 45%) 100%);
  --gradient-gold: linear-gradient(135deg, hsl(42 80% 55%) 0%, hsl(35 90% 60%) 100%);
  --gradient-emerald: linear-gradient(180deg, hsl(158 45% 22%) 0%, hsl(158 35% 35%) 100%);
  --gradient-card: linear-gradient(145deg, hsl(45 30% 97%) 0%, hsl(45 25% 93%) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);

  /* Shadows */
  --shadow-soft: 0 4px 20px -5px hsl(158 45% 22% / 0.15);
  --shadow-elevated: 0 20px 40px -15px hsl(158 45% 22% / 0.25);
  --shadow-glow: 0 0 60px hsl(42 80% 55% / 0.3);
  --shadow-card: 0 10px 30px -10px hsl(158 45% 22% / 0.12);

  /* Fonts */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Outfit', sans-serif;
}

/* Utility Classes for Gradients */
.bg-gradient-hero {
  background: var(--gradient-hero);
}

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

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

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

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

/* Utility Classes for Shadows */
.shadow-soft {
  box-shadow: var(--shadow-soft);
}

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

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

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

/* Glass Effect */
.glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Keyframe Animations */
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-right {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce-soft {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}

@keyframes pulse-soft {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes gradient-shift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }

  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* Animation Utility Classes */
.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

.animate-fade-in-down {
  animation: fade-in-down 0.8s ease-out forwards;
}

.animate-fade-in-left {
  animation: fade-in-left 0.8s ease-out forwards;
}

.animate-fade-in-right {
  animation: fade-in-right 0.8s ease-out forwards;
}

.animate-scale-in {
  animation: scale-in 0.6s ease-out forwards;
}

.animate-slide-up {
  animation: slide-up 0.6s ease-out forwards;
}

.animate-bounce-soft {
  animation: bounce-soft 2s ease-in-out infinite;
}

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

.animate-float-delayed {
  animation: float 6s ease-in-out infinite;
  animation-delay: 2s;
}

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

.animate-pulse-soft {
  animation: pulse-soft 4s ease-in-out infinite;
}

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

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

.animate-shimmer {
  animation: shimmer 2s ease-in-out infinite;
}

/* Scroll Reveal Classes */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* Staggered Animation Delays */
.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

.delay-400 {
  animation-delay: 0.4s;
}

.delay-500 {
  animation-delay: 0.5s;
}

.delay-600 {
  animation-delay: 0.6s;
}

/* Button Ripple Effect */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, hsl(var(--secondary) / 0.4) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
}

.btn-ripple:active::after {
  animation: ripple 0.6s ease-out;
}

/* Clip Path Utilities */
.clip-wave {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.clip-wave-bottom {
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
}

.clip-diagonal {
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
}

/* Navbar Specific Styles */
.navbar-scrolled,
.navbar-always-scrolled {
  background-color: hsl(var(--background) / 0.95) !important;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-soft);
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* Custom Button Variants */
.btn-hero {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  border: none;
  transition: all 0.3s ease;
}

.btn-hero:hover {
  background: hsl(var(--secondary));
  box-shadow: var(--shadow-elevated);
  transform: translateY(-4px) scale(1.05);
}

.btn-whatsapp {
  background: #25D366;
  color: white;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  border: none;
  transition: all 0.3s ease;
}

.btn-whatsapp:hover {
  background: #25D366;
  box-shadow: var(--shadow-elevated);
  transform: translateY(-4px) scale(1.05);
  color: white;
}

.btn-call {
  background: #0ea5e9;
  color: white;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  border: none;
  transition: all 0.3s ease;
}

.btn-call:hover {
  background: #0284c7;
  box-shadow: var(--shadow-elevated);
  transform: translateY(-4px) scale(1.05);
  filter: brightness(1.1);
  color: white;
}

.btn-hero-outline {
  border: 2px solid hsl(var(--primary-foreground) / 0.3);
  background: hsl(var(--primary-foreground) / 0.1);
  color: hsl(var(--primary-foreground));
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.btn-hero-outline:hover {
  background: hsl(var(--primary-foreground) / 0.2);
  border-color: hsl(var(--primary-foreground) / 0.5);
  color: hsl(var(--primary-foreground));
}

/* Form Styles */
.form-control:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 0.2rem hsl(var(--primary) / 0.25);
}

.form-select:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 0.2rem hsl(var(--primary) / 0.25);
}

/* Card Hover Effects */
.card-hover {
  transition: all 0.5s ease;
}

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-elevated);
}

/* Icon Hover Effects */
.icon-hover {
  transition: all 0.3s ease;
}

.icon-hover:hover {
  transform: scale(1.1) rotate(12deg);
  color: hsl(var(--secondary));
}

/* Gallery Styles */
.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item:hover .gallery-overlay {
  opacity: 1 !important;
}

.transform-scale-up {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.gallery-item:hover .transform-scale-up {
  transform: scale(1);
}

.lightbox-modal.active {
  display: flex !important;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Force dark header styles for .navbar-always-scrolled */
.navbar-always-scrolled .navbar-brand-text span:first-child {
  color: hsl(var(--foreground)) !important;
}

.navbar-always-scrolled .nav-link-custom {
  color: hsl(var(--foreground));
}

.navbar-always-scrolled .nav-link-custom:hover {
  color: hsl(var(--primary));
}

.navbar-always-scrolled .nav-link-underline {
  background: hsl(var(--primary));
}