/* Custom transitions and animations */
:root {
  --primary-50: #faf8f5;
  --primary-100: #f5f0e8;
  --primary-200: #e8dcc8;
  --primary-300: #d9c4a3;
  --primary-400: #c9a87a;
  --primary-500: #b2803a;
  --primary-600: #9a6d2f;
  --primary-700: #7a5625;
  --primary-800: #5a401b;
  --primary-900: #3a2911;
  --accent-600: #e6730f;
  --gradient-warm: linear-gradient(135deg, #b2803a 0%, #e6730f 100%);
}

/* Scroll Animations */
.reveal-content,
.reveal-left,
.reveal-right,
.reveal-top,
.reveal-bottom {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left {
  transform: translateX(-50px);
}
.reveal-right {
  transform: translateX(50px);
}
.reveal-top {
  transform: translateY(-50px);
}
.reveal-bottom {
  transform: translateY(50px);
}

.reveal-active {
  opacity: 1;
  transform: translate(0, 0);
}

/* Animation Delays */
.animation-delay-100 {
  transition-delay: 0.1s;
}
.animation-delay-200 {
  transition-delay: 0.2s;
}
.animation-delay-300 {
  transition-delay: 0.3s;
}

/* Hero Parallax */
.parallax-bg-overlay {
  will-change: transform, opacity;
}

.parallax-video {
  will-change: transform;
}

/* Marquee Effect for Gallery */
.marquee-container-left,
.marquee-container-right {
  position: relative;
  width: 100%;
}

@keyframes marquee-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.marquee-inner-left {
  animation: marquee-left 40s linear infinite;
}

.marquee-inner-right {
  animation: marquee-right 40s linear infinite;
}

.marquee-container-left:hover .marquee-inner-left,
.marquee-container-right:hover .marquee-inner-right {
  animation-play-state: paused;
}

/* Testimonial & Menu Card Animated Border */
.animated-border-card {
  position: relative;
  padding: 2px;
  border-radius: 1.5rem;
  background: white;
  overflow: hidden;
}

.animated-border-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from var(--angle, 0deg),
    #ffaa00,
    #000000,
    #ffffff,
    #000000,
    #ffaa00
  );
  animation: rotate 10s linear infinite;
  z-index: 0;
  opacity: 0.8;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

.card-content {
  position: relative;
  z-index: 10;
  background: white;
  border-radius: calc(1.5rem - 2px);
  height: 100%;
}

/* Scroll Smoothness */
html {
  scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #b2803a;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9a6d2f;
}