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

/* Fade-in Entrance */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Shimmer Highlight Effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

/* Smooth Image Scale on Hover */
.zoom-on-hover {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.zoom-on-hover:hover {
  transform: scale(1.04);
}

/* Subtle Glow Pulse */
@keyframes goldPulse {
  0% {
    box-shadow: 0 0 5px rgba(217, 164, 65, 0.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(217, 164, 65, 0.5);
  }
  100% {
    box-shadow: 0 0 5px rgba(217, 164, 65, 0.2);
  }
}

.pulse-gold {
  animation: goldPulse 3s infinite ease-in-out;
}

/* ==========================================================================
   PAGE-LOAD & PAGE-TRANSITION MOTION
   Everything here is scoped inside `no-preference` so it can never desync
   from prefers-reduced-motion — when the user asks for reduced motion, none
   of these rules apply at all, and content simply renders in its resting
   state instantly (see js/page-transitions.js, which independently skips
   adding these classes under reduced motion too).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Cross-page fade, driven by js/page-transitions.js */
  body {
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.page-transition-enter {
    opacity: 0;
    transform: translateY(10px);
  }
  body.page-transition-leave {
    opacity: 0;
    transform: translateY(-8px) scale(0.995);
  }

  /* Hero photo settles in on every page load */
  @keyframes heroSettle {
    from { transform: scale(1.07); }
    to { transform: scale(1); }
  }
  .hero-bg-layer.active {
    animation: heroSettle 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* Hero copy rises in after the photo, eyebrow → title → subtitle */
  @keyframes riseIn {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .hero-content > *:nth-child(1),
  .hero-bottom-block > *:nth-child(1) {
    animation: riseIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
  }
  .hero-content > *:nth-child(2),
  .hero-bottom-block > *:nth-child(2) {
    animation: riseIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
  }
  .hero-content > *:nth-child(3),
  .hero-bottom-block > *:nth-child(3) {
    animation: riseIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
  }

  /* Right-panel content lands after the headline. Capped at the first six
     direct children so long lists (e.g. menu.html's category sections)
     don't turn into a slow relay. */
  .right-panel > .page-view > *:nth-child(1) { animation: riseIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.26s both; }
  .right-panel > .page-view > *:nth-child(2) { animation: riseIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both; }
  .right-panel > .page-view > *:nth-child(3) { animation: riseIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both; }
  .right-panel > .page-view > *:nth-child(4) { animation: riseIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
  .right-panel > .page-view > *:nth-child(5) { animation: riseIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.58s both; }
  .right-panel > .page-view > *:nth-child(6) { animation: riseIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.66s both; }

  /* Venue detail pages' Interior/Food slideshow cross-slide (moved in from
     each page's local <style> block — it was duplicated verbatim). */
  .venue-card-image .auto-slider {
    animation: venueSlide 18s infinite cubic-bezier(0.77, 0, 0.175, 1);
  }
  @keyframes venueSlide {
    0%, 25%        { transform: translateX(0); }
    33.33%, 58.33% { transform: translateX(-25%); }
    66.66%, 91.66% { transform: translateX(-50%); }
    100%           { transform: translateX(-75%); }
  }
}