/* ANIMATIONS & GSAP ENHANCEMENTS */

/* Entrance animation triggers for caption text */
.slider-title,
.slider-subtitle {
  opacity: 0;
  transform: translateY(30px);
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s ease;
}

.slider-subtitle {
  transition-delay: 0.2s;
}

.carousel-item.active .slider-title,
.carousel-item.active .slider-subtitle {
  opacity: 1;
  transform: translateY(0);
}

/* Card scroll reveal baseline style: ensure it is visible by default if JS doesn't trigger */
.reveal-on-scroll {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease;
}

/* When GSAP is active, it will dynamically apply styles, but CSS will keep them visible as fallback */
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================================
   PREMIUM SCROLL & INTERACTION ANIMATIONS
   Added on top of the existing design — no colours, fonts, layout,
   content or functionality changed. Works with assets/js/animations.js.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. ACCESSIBILITY — respect reduced motion preference
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   1. HERO — continuous, very slow "Ken Burns" zoom on the background.
   Overrides only the transform/transition of .carousel-bg-image so the
   existing markup, image, overlay and captions stay untouched.
   --------------------------------------------------------------------- */
.carousel-bg-image {
  transform: scale(1.05);
  transition: none; /* replaced by the smoother keyframe animation below */
}

@keyframes heroKenBurns {
  0%   { transform: scale(1.05); }
  45%  { transform: scale(1); }
  100% { transform: scale(1.07); }
}

.carousel-item.active .carousel-bg-image {
  animation: heroKenBurns 18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ---------------------------------------------------------------------
   2. ROOM / ACCOMMODATION CARDS — subtle lift + image zoom on hover
   (image zoom is new here; the card itself did not have a hover state)
   --------------------------------------------------------------------- */
.accommodation-card {
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.accommodation-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.accommodation-img {
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.accommodation-card:hover .accommodation-img {
  transform: scale(1.06);
}

/* ---------------------------------------------------------------------
   3. AMENITIES CARDS — subtle lift (image zoom already existed)
   --------------------------------------------------------------------- */
.curated-card {
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.curated-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.1);
}

/* ---------------------------------------------------------------------
   4. EXPERIENCES / MOMENTS MADE MEMORABLE — subtle image zoom on hover
   (the event card had no hover state at all before)
   --------------------------------------------------------------------- */
.event-img {
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.event-card:hover .event-img {
  transform: scale(1.06);
}

/* ---------------------------------------------------------------------
   5. BUTTON MICRO-INTERACTIONS — colours/backgrounds untouched,
   only a very small lift/shift added for a premium tactile feel.
   --------------------------------------------------------------------- */
.btn-explore-all,
.btn-explore-events {
  transition: var(--transition-smooth), transform 0.3s ease;
}

.btn-explore-all:hover,
.btn-explore-events:hover {
  transform: translateY(-2px);
}

.offer-link {
  display: inline-block;
  transition: var(--transition-fast), transform 0.3s ease;
}

.offer-link:hover {
  transform: translateX(3px);
}

/* =====================================================================
   ROUND 2 — CINEMATIC HERO, NAV, BUTTON PRESS & IMAGE MICRO-INTERACTIONS
   Layered on top of Round 1. No colours, layout, content or links changed.
   ===================================================================== */

/* Hero: subtle text-shadow for readability */
.slider-title,
.slider-subtitle {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* Hero: overlay gently fades in on load instead of appearing instantly */
@keyframes heroOverlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.carousel-item.active::after {
  animation: heroOverlayFadeIn 1.4s ease both;
}

/* Hero background: reserved for the JS-driven parallax "translate" property
   (kept separate from the transform-based zoom animation so they never conflict) */
.carousel-bg-image {
  will-change: transform;
}

/* Navbar: underline now grows left-to-right instead of from the center */
.navbar-nav .nav-link::after {
  left: 0;
  transform: none;
}

/* Mega dropdown: cards fade/slide in with a light stagger when opened */
@media (min-width: 992px) {
  .mega-card {
    opacity: 0;
    transform: translateY(10px);
    transition: color 0.4s ease, opacity 0.35s ease, transform 0.35s ease;
  }
  .nav-tamara-life:hover .mega-card { opacity: 1; transform: translateY(0); }
  .mega-dropdown-grid .mega-card:nth-child(1) { transition-delay: 0.02s; }
  .mega-dropdown-grid .mega-card:nth-child(2) { transition-delay: 0.06s; }
  .mega-dropdown-grid .mega-card:nth-child(3) { transition-delay: 0.10s; }
  .mega-dropdown-grid .mega-card:nth-child(4) { transition-delay: 0.14s; }
  .mega-dropdown-grid .mega-card:nth-child(5) { transition-delay: 0.18s; }
  .mega-dropdown-grid .mega-card:nth-child(6) { transition-delay: 0.22s; }
  .mega-dropdown-grid .mega-card:nth-child(7) { transition-delay: 0.26s; }
}

/* Universal button "press" feedback — colours untouched, just a tactile scale-down */
.btn-book-now:active,
.btn-view-offers:active,
.btn-explore-all:active,
.btn-explore-events:active,
.accommodation-arrow-btn:active,
.accommodation-navigation button:active,
.floating-enquire-btn:active,
.floating-whatsapp-btn:active,
.floating-call-btn:active,
.booking-enquiry-submit:active,
.floating-nav-btn:active,
.floating-gallery-btn:active,
.floating-events-btn:active,
.btn-acc-prev:active,
.btn-acc-next:active,
.offer-link:active {
  transform: scale(0.96);
}

/* A touch of scale added on top of the existing hover lift (kept subtle) */
.btn-book-now:hover           { transform: translateY(-1px) scale(1.02); }
.booking-enquiry-submit:hover { transform: translateY(-1px) scale(1.02); }

/* Arrow / icon micro-movement on hover */
.accommodation-arrow-btn i { display: inline-block; transition: transform 0.3s ease; }
.accommodation-arrow-btn:hover i { transform: translateX(3px); }

.floating-events-btn i,
.floating-nav-btn i,
.floating-gallery-btn i {
  display: inline-block;
  transition: transform 0.3s ease;
}
.events-next:hover i, .offers-next:hover i, .gallery-next:hover i { transform: translateX(2px); }
.events-prev:hover i, .offers-prev:hover i, .gallery-prev:hover i { transform: translateX(-2px); }

/* Attraction / Property-suite cards: subtle upward lift + title micro-lift
   (desktop/mouse only — see hover:hover guard below) */
.offer-card {
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.5s ease;
}
.offer-card-title {
  transition: transform 0.4s ease;
}
.accommodation-card-title,
.event-card-title {
  transition: transform 0.4s ease;
}
.curated-card-title {
  transition: transform 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
  .offer-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.18);
  }
  .offer-card:hover .offer-card-title { transform: translateY(-3px); }

  .accommodation-card:hover .accommodation-card-title,
  .event-card:hover .event-card-title {
    transform: translateY(-3px);
  }

  /* Amenity tiles: a whisper of rotation added to the existing zoom + lift */
  .curated-card:hover .curated-img { transform: scale(1.08) rotate(0.4deg); }
  .curated-card:hover .curated-card-title { transform: translateY(-3px); }

  /* Guest review cards: existing lift + a touch of scale */
  .guest-review-card:hover { transform: translateY(-4px) scale(1.01); }
}

/* Gallery: soft diagonal overlay fades in on hover, image underneath unchanged */
.gallery-card { position: relative; }
.gallery-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10, 67, 44, 0.18) 0%, rgba(0, 0, 0, 0) 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .gallery-card:hover::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-bg-image { animation: none !important; }
  .mega-card { opacity: 1 !important; transform: none !important; }
}