/* ==========================================================================
   ANIMATIONS & TRANSITIONS
   ========================================================================== */

/* Keyframes */
@keyframes slowZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

@keyframes pulse-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  50% {
    transform: scale(1.15);
    opacity: 0.8;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
}

@keyframes goldShimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes emberFlicker {
  0%, 100% {
    opacity: 0.9;
    filter: drop-shadow(0 0 10px rgba(230, 92, 0, 0.4));
  }
  50% {
    opacity: 0.7;
    filter: drop-shadow(0 0 20px rgba(255, 122, 24, 0.7));
  }
}

/* Gold Text Shimmer class */
.shimmer-text {
  background: linear-gradient(
    90deg,
    #c89d56 0%,
    #ffffff 25%,
    #f3d89f 50%,
    #c89d56 75%,
    #916b28 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 6s linear infinite;
}

/* Scroll Reveal Classes (Driven by IntersectionObserver in JS) */
.reveal-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.15s;
}
.reveal-delay-2 {
  transition-delay: 0.3s;
}
.reveal-delay-3 {
  transition-delay: 0.45s;
}
.reveal-delay-4 {
  transition-delay: 0.6s;
}

/* ==========================================================================
   TOP LAYER / DIALOG ANIMATIONS (MODERN WEB GUIDANCE)
   ========================================================================== */
dialog.food-modal[open] {
  opacity: 1;
  transform: scale(1) translateY(0);

  @starting-style {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }
}

dialog.food-modal {
  opacity: 0;
  transform: scale(0.92) translateY(20px);
  transition-property: opacity, transform, display, overlay;
  transition-duration: 0.35s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-behavior: allow-discrete;
}

dialog.food-modal::backdrop {
  background-color: rgba(0, 0, 0, 0);
  transition: display 0.35s allow-discrete, overlay 0.35s allow-discrete, background-color 0.35s ease-out;
}

dialog.food-modal[open]::backdrop {
  background-color: rgba(0, 0, 0, 0.85);

  @starting-style {
    background-color: rgba(0, 0, 0, 0);
  }
}

/* Accessibility: Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-item {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-bg-img {
    animation: none !important;
  }
}