/* ==========================================================================
   Udayalaya — Animations
   Loads after style.css. Pure CSS: keyframes + classes your script.js
   already toggles ('is-visible', 'is-solid', 'is-open'). No JS changes
   needed. Respects prefers-reduced-motion throughout.
   ========================================================================== */

:root {
  --dur-fast: .25s;
  --dur-base: .6s;
  --dur-slow: .9s;
  --curve: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   1. Scroll-reveal variants
   Base .reveal (opacity only) already lives in style.css. These add
   direction/scale variants — opt in by adding the class in your HTML,
   e.g. class="reveal reveal--up reveal-delay-2"
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  .reveal {
    transition: opacity var(--dur-base) var(--curve), transform var(--dur-base) var(--curve);
  }

  .reveal--up {
    transform: translateY(24px);
  }

  .reveal--down {
    transform: translateY(-24px);
  }

  .reveal--left {
    transform: translateX(-28px);
  }

  .reveal--right {
    transform: translateX(28px);
  }

  .reveal--scale {
    transform: scale(.94);
  }

  .reveal.is-visible {
    transform: none;
  }

  /* Stagger helpers — pair with reveal-delay-N on grid children */
  .reveal-delay-1.is-visible { transition-delay: .08s; }
  .reveal-delay-2.is-visible { transition-delay: .16s; }
  .reveal-delay-3.is-visible { transition-delay: .24s; }
  .reveal-delay-4.is-visible { transition-delay: .32s; }

  /* Auto-stagger for known repeating groups — no HTML changes required */
  .room-grid .room-card:nth-child(1) { transition-delay: 0s; }
  .room-grid .room-card:nth-child(2) { transition-delay: .12s; }

  .gallery-grid .gallery-item:nth-child(1) { transition-delay: 0s; }
  .gallery-grid .gallery-item:nth-child(2) { transition-delay: .1s; }
  .gallery-grid .gallery-item:nth-child(3) { transition-delay: .2s; }
  .gallery-grid .gallery-item:nth-child(4) { transition-delay: .3s; }
}

/* --------------------------------------------------------------------------
   2. Hero entrance — plays once automatically on page load, no scroll needed
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  @keyframes heroRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .hero__eyebrow,
  .hero__name,
  .hero__type,
  .hero h1,
  .hero__actions {
    opacity: 0;
    animation: heroRise .8s var(--curve) forwards;
  }

  .hero__eyebrow { animation-delay: .1s; }
  .hero__name    { animation-delay: .2s; }
  .hero__type    { animation-delay: .28s; }
  .hero h1       { animation-delay: .38s; }
  .hero__actions { animation-delay: .55s; }

  @keyframes arrowBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
  }

  .hero__scroll span {
    display: inline-block;
    animation: arrowBounce 1.8s ease-in-out infinite;
  }
}

/* --------------------------------------------------------------------------
   3. Header — smooth state change (background/shadow already transition
   in style.css; this just refines the underline on nav links)
   -------------------------------------------------------------------------- */

.site-nav a {
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right var(--dur-fast) var(--curve);
}

.site-nav a:hover::after {
  right: 0;
}

/* Mobile dropdown — slides open instead of snapping */
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  @keyframes navDrop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .site-nav.is-open {
    animation: navDrop var(--dur-fast) var(--curve);
  }
}

/* --------------------------------------------------------------------------
   4. Buttons — tactile press feedback (hover lift already in style.css)
   -------------------------------------------------------------------------- */

.button {
  transition: transform var(--dur-fast) var(--curve), background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.button:active {
  transform: translateY(0) scale(.97);
}

/* --------------------------------------------------------------------------
   5. Cards & gallery — refine the existing image zoom, add a soft lift
   -------------------------------------------------------------------------- */

.room-card,
.gallery-item {
  transition: box-shadow var(--dur-base) var(--curve);
}

.room-card:hover {
  box-shadow: 0 18px 40px rgba(36, 33, 31, .1);
}

.room-card img,
.gallery-item img {
  transition: transform .6s var(--curve);
}

/* --------------------------------------------------------------------------
   6. Lightbox — fade + scale in each time it opens (re-plays automatically
   because the [hidden] attribute is added/removed by script.js)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes lightboxIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes lightboxImageIn {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
  }

  .lightbox:not([hidden]) {
    animation: lightboxIn var(--dur-fast) ease;
  }

  .lightbox:not([hidden]) img {
    animation: lightboxImageIn var(--dur-base) var(--curve);
  }
}

/* --------------------------------------------------------------------------
   7. Reduced motion — hard override, everything appears instantly
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }
}