/* ==========================================================================
   Divine Men's Saloon — Motion
   Subtle, purposeful animation. Everything is disabled for users who
   prefer reduced motion.
   ========================================================================== */

@keyframes rise {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hero-zoom {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(143, 191, 138, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(143, 191, 138, 0);
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Hero entrance ---------------------------------------------------------- */
.hero__img {
  animation: hero-zoom 2.4s var(--ease) both;
  will-change: transform;
}

.anim-rise {
  animation: rise 900ms var(--ease) both;
}

.anim-rise[data-delay='1'] { animation-delay: 120ms; }
.anim-rise[data-delay='2'] { animation-delay: 220ms; }
.anim-rise[data-delay='3'] { animation-delay: 340ms; }
.anim-rise[data-delay='4'] { animation-delay: 460ms; }
.anim-rise[data-delay='5'] { animation-delay: 620ms; }

.status-dot--open {
  animation: pulse 2.4s ease-in-out infinite;
}

/* Scroll reveal (only hidden once JavaScript has loaded) ----------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Gallery filtering ------------------------------------------------------- */
.gallery__item.is-entering {
  animation: pop-in 450ms var(--ease) both;
}

/* Lightbox ------------------------------------------------------------------ */
.lightbox[open] {
  animation: fade-in 250ms var(--ease) both;
}

.lightbox__img {
  transition: opacity 250ms var(--ease);
}

.lightbox__img.is-loading {
  opacity: 0.2;
}

/* Mobile navigation links stagger in -------------------------------------------- */
@media (max-width: 1024.98px) {
  .site-nav.is-open .site-nav__list li {
    animation: rise 500ms var(--ease) both;
  }

  .site-nav.is-open .site-nav__list li:nth-child(2) { animation-delay: 40ms; }
  .site-nav.is-open .site-nav__list li:nth-child(3) { animation-delay: 80ms; }
  .site-nav.is-open .site-nav__list li:nth-child(4) { animation-delay: 120ms; }
  .site-nav.is-open .site-nav__list li:nth-child(5) { animation-delay: 160ms; }
  .site-nav.is-open .site-nav__list li:nth-child(6) { animation-delay: 200ms; }
}

/* Reduced motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero__img {
    animation: none;
  }

  .status-dot--open {
    animation: none;
  }
}