@import "tailwindcss";
@import "basecoat-css";


@theme {
  /* Logo gradient colors */
  --color-logo-gold: #ecc644;
  --color-logo-light: #fbf28e;
  --color-logo-solid: #fff1d7;
  
  /* Main colors */
  --color-cream: #FBF8F4;
  --color-dark-brown: #321D1D;
  --color-brown-1: #D3A574;
  --color-brown-2: #A46C32;
  --color-green: #183534;
  --color-black: #222222;
  
  /* Fonts */
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* Enable smooth scrolling globally */
html {
  scroll-behavior: smooth;
}

/* Ensure smooth scrolling works on all browsers */
* {
  scroll-behavior: smooth;
}

.gallery-stacked {
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-expanded {
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Custom hover effects for expanded state */
.gallery-expanded:hover {
  transform: scale(1.05) !important;
  z-index: 100 !important;
}

/* ===== ANIMATIONS ===== */

/* Fade in up animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Scale in animation */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide in from left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in from right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Float animation for subtle movement */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Pulse glow animation */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(236, 198, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(236, 198, 68, 0);
  }
}

/* Animation utility classes */
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

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

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

.animate-slide-left {
  animation: slideInLeft 0.8s ease-out forwards;
}

.animate-slide-right {
  animation: slideInRight 0.8s ease-out forwards;
}

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

.animate-pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* 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; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Initially hidden for animation */
.animate-on-scroll {
  opacity: 0;
}

.animate-on-scroll.animated {
  opacity: 1;
}

/* ===== HOVER EFFECTS ===== */

/* Image zoom on hover */
.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform 0.5s ease-out;
}

.img-zoom:hover img {
  transform: scale(1.1);
}

/* Card lift effect */
.card-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(50, 29, 29, 0.15);
}

/* Button hover with scale */
.btn-scale {
  transition: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}

.btn-scale:hover {
  transform: scale(1.05);
}

.btn-scale:active {
  transform: scale(0.98);
}

/* Underline animation for links */
.link-underline {
  position: relative;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-logo-gold);
  transition: width 0.3s ease;
}

.link-underline:hover::after {
  width: 100%;
}

/* Category card overlay effect */
.category-card {
  cursor: pointer;
}

.category-card .overlay {
  transition: background-color 0.4s ease;
}

.category-card:hover .overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.category-card h3 {
  transition: transform 0.3s ease, letter-spacing 0.3s ease;
}

.category-card:hover h3 {
  transform: scale(1.1);
  letter-spacing: 2px;
}

/* Menu item hover */
.menu-item {
  transition: background-color 0.3s ease, padding-left 0.3s ease;
}

.menu-item:hover {
  background-color: rgba(236, 198, 68, 0.08);
  padding-left: 16px;
}

/* Service card effect */
.service-card {
  overflow: hidden;
}

.service-card img {
  transition: transform 0.6s ease;
}

.service-card:hover img {
  transform: scale(1.1);
}

.service-card .label {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.service-card:hover .label {
  transform: translateY(-4px);
  background-color: var(--color-logo-gold);
}

.service-card:hover .label span {
  color: white;
}

/* FAQ item hover */
.faq-item {
  transition: background-color 0.3s ease;
}

.faq-item:hover {
  background-color: rgba(236, 198, 68, 0.05);
}

/* Testimonial card */
.testimonial-card {
  transition: transform 0.3s ease;
}

.testimonial-card:hover {
  transform: scale(1.02);
}

/* Footer link hover */
.footer-link {
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-link:hover {
  padding-left: 8px;
}

/* Number counter animation */
.number-stat {
  transition: transform 0.3s ease, color 0.3s ease;
}

.number-stat:hover {
  transform: scale(1.05);
}

/* CTA section animation */
.cta-glow {
  position: relative;
}

.cta-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, var(--color-logo-gold), var(--color-brown-1), var(--color-logo-gold));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cta-glow:hover::before {
  opacity: 1;
}

/* Navigation mobile menu */
.mobile-menu {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.mobile-menu.open {
  transform: translateX(0);
}

/* Hamburger animation */
.hamburger span {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}