/* Motion — scroll reveal, hero entrance, micro-interactions */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(1.75rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

  to {
    opacity: 1;
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero.reveal {
  opacity: 1;
  transform: none;
}

.hero__content {
  animation: fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.stats-bar__item {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.stats-bar.is-visible .stats-bar__item,
.stats-bar.reveal.is-visible .stats-bar__item {
  opacity: 1;
  transform: translateY(0);
}

.stats-bar.reveal.is-visible .stats-bar__item:nth-child(1) {
  transition-delay: 0.05s;
}

.stats-bar.reveal.is-visible .stats-bar__item:nth-child(2) {
  transition-delay: 0.12s;
}

.stats-bar.reveal.is-visible .stats-bar__item:nth-child(3) {
  transition-delay: 0.19s;
}

.stats-bar.reveal.is-visible .stats-bar__item:nth-child(4) {
  transition-delay: 0.26s;
}

.highlights.reveal.is-visible .highlights__card {
  animation: fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.highlights.reveal.is-visible .highlights__card:nth-child(1) {
  animation-delay: 0.08s;
}

.highlights.reveal.is-visible .highlights__card:nth-child(2) {
  animation-delay: 0.16s;
}

.highlights.reveal.is-visible .highlights__card:nth-child(3) {
  animation-delay: 0.24s;
}

.offers.reveal.is-visible .offers__card {
  animation: scale-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.offers.reveal.is-visible .offers__card:nth-child(1) {
  animation-delay: 0.1s;
}

.offers.reveal.is-visible .offers__card:nth-child(2) {
  animation-delay: 0.2s;
}

.site-header__menu a {
  position: relative;
  transition: color 0.25s ease;
}

.site-header__menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 1px;
  background: var(--color-champagne, #c9b896);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.site-header__menu a:hover::after,
.site-header__menu a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-header {
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    backdrop-filter 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible,
  .hero__content,
  .stats-bar__item,
  .highlights__card,
  .offers__card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Extended motion — 3D cards, gallery tilt, home dividers, float, nav shimmer
   -------------------------------------------------------------------------- */

@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes divider-gradient-flow {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

@keyframes nav-link-shimmer {
  0% {
    transform: translateX(-120%) skewX(-12deg);
    opacity: 0;
  }

  35% {
    opacity: 0.55;
  }

  65% {
    opacity: 0.35;
  }

  100% {
    transform: translateX(220%) skewX(-12deg);
    opacity: 0;
  }
}

@keyframes experience-scroll-hint {
  0%,
  100% {
    transform: translateX(0);
  }

  45% {
    transform: translateX(-14px);
  }
}

@keyframes card-3d-rise {
  from {
    opacity: 0;
    transform: perspective(900px) translateY(1.25rem) rotateX(10deg) scale(0.98);
  }

  to {
    opacity: 1;
    transform: perspective(900px) translateY(0) rotateX(0) scale(1);
  }
}

.card-3d {
  perspective: 900px;
}

/* Container stays opaque; .reveal opacity must not blank nested media */
.card-3d.reveal,
.reveal.card-3d {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Hide children while the card itself is waiting for IntersectionObserver */
.card-3d.reveal:not(.is-visible) > * {
  opacity: 0;
  transform: perspective(900px) translateY(1.25rem) rotateX(10deg);
  transform-style: preserve-3d;
}

.card-3d > * {
  transform-style: preserve-3d;
  transition:
    box-shadow 0.45s var(--ease-luxury, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.45s var(--ease-luxury, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity 0.45s var(--ease-luxury, cubic-bezier(0.22, 1, 0.36, 1));
}

.card-3d:not(.reveal) > *,
.card-3d.reveal.is-visible > *,
.reveal.is-visible .card-3d.reveal > * {
  opacity: 1;
  transform: none;
}

.card-3d.reveal.is-visible > *,
.reveal.is-visible .card-3d.reveal > * {
  animation: card-3d-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Non-reveal card blocks: keep photos/icons visible (no child fade trap) */
.card-3d:not(.reveal) img,
.card-3d:not(.reveal) svg,
.card-3d:not(.reveal) .amenities__icon {
  opacity: 1;
}

.card-3d.reveal.is-visible > *:nth-child(1),
.reveal.is-visible .card-3d.reveal > *:nth-child(1) {
  animation-delay: 0.06s;
}

.card-3d.reveal.is-visible > *:nth-child(2),
.reveal.is-visible .card-3d.reveal > *:nth-child(2) {
  animation-delay: 0.14s;
}

.card-3d.reveal.is-visible > *:nth-child(3),
.reveal.is-visible .card-3d.reveal > *:nth-child(3) {
  animation-delay: 0.22s;
}

.card-3d.reveal.is-visible > *:nth-child(4),
.reveal.is-visible .card-3d.reveal > *:nth-child(4) {
  animation-delay: 0.3s;
}

.card-3d.reveal.is-visible > *:nth-child(5),
.reveal.is-visible .card-3d.reveal > *:nth-child(5) {
  animation-delay: 0.38s;
}

.card-3d.reveal.is-visible > *:nth-child(6),
.reveal.is-visible .card-3d.reveal > *:nth-child(6) {
  animation-delay: 0.46s;
}

.card-3d > *:hover {
  transform: perspective(900px) translateY(-4px) rotateX(2deg);
  box-shadow: var(--shadow-md);
}

.gallery-tilt {
  perspective: 720px;
}

.gallery-tilt__item,
.gallery-tilt > * {
  transform-style: preserve-3d;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease;
  will-change: transform;
}

.gallery-tilt:hover .gallery-tilt__item,
.gallery-tilt:hover > * {
  transform: rotateY(-4deg) rotateX(3deg) translateZ(8px);
}

.gallery-tilt__item:hover,
.gallery-tilt > *:hover {
  transform: rotateY(-6deg) rotateX(4deg) translateZ(14px);
  box-shadow: var(--shadow-lg);
}

.page-home > section:not(.hero) {
  position: relative;
}

.page-home > section:not(.hero)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(88%, 42rem);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-champagne, #c9b896) 18%,
    var(--color-gold-muted, rgba(201, 184, 150, 0.35)) 50%,
    var(--color-champagne, #c9b896) 82%,
    transparent
  );
  background-size: 200% 100%;
  animation: divider-gradient-flow 5.5s linear infinite;
  opacity: 0.85;
  pointer-events: none;
}

.whatsapp-float {
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.whatsapp-float:hover {
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.35);
}

.site-header--nav-shimmer .site-header__menu a {
  overflow: hidden;
}

.site-header--nav-shimmer .site-header__menu a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 65%
  );
  transform: translateX(-120%) skewX(-12deg);
  pointer-events: none;
  animation: nav-link-shimmer 4.2s ease-in-out infinite;
}

.site-header--nav-shimmer .site-header__menu a:nth-child(2)::before {
  animation-delay: 0.35s;
}

.site-header--nav-shimmer .site-header__menu a:nth-child(3)::before {
  animation-delay: 0.7s;
}

.site-header--nav-shimmer .site-header__menu a:nth-child(4)::before {
  animation-delay: 1.05s;
}

.experiences__carousel,
.experience-cards {
  position: relative;
}

.experiences__carousel::after,
.experience-cards::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--space-lg, 1.5rem);
  width: 3.5rem;
  background: linear-gradient(90deg, transparent, var(--color-bg, #fafafa));
  pointer-events: none;
  opacity: 0.9;
  z-index: 1;
}

.experiences__track.scroll-hint,
.experience-cards__track.scroll-hint {
  animation: experience-scroll-hint 2.8s cubic-bezier(0.22, 1, 0.36, 1) 1.2s 2;
}

@media (prefers-reduced-motion: reduce) {
  .card-3d > *,
  .card-3d.reveal.is-visible > *,
  .reveal.is-visible .card-3d.reveal > *,
  .gallery-tilt__item,
  .gallery-tilt > *,
  .whatsapp-float,
  .page-home > section:not(.hero)::before,
  .site-header--nav-shimmer .site-header__menu a::before,
  .experiences__track.scroll-hint,
  .experience-cards__track.scroll-hint {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .experiences__carousel::after,
  .experience-cards::after {
    display: none;
  }
}