/* Motion. Reduced-motion visitors get the final state immediately. */

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

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

@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.hero h1 span,
.hero-copy,
.hero-actions {
  animation: rise 0.9s var(--ease) both;
}

.hero h1 span:nth-child(2) { animation-delay: 0.12s; }
.hero h1 span:nth-child(3) { animation-delay: 0.22s; }
.hero-copy { animation-delay: 0.32s; }
.hero-actions { animation-delay: 0.42s; }

.hero-media img {
  animation: hero-zoom 18s var(--ease) both;
}

@keyframes mesh {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-2.5%, 1.5%, 0) scale(1.08); }
}

@keyframes fade-up {
  from { opacity: 0; translate: 0 36px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes from-left {
  from { opacity: 0; translate: -40px 16px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes from-right {
  from { opacity: 0; translate: 40px 16px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes pop-in {
  from { opacity: 0; scale: 0.9; }
  to { opacity: 1; scale: 1; }
}

@keyframes border-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

body::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 10%, rgba(37, 99, 235, 0.06), transparent 28%),
    radial-gradient(circle at 90% 80%, rgba(15, 23, 42, 0.04), transparent 26%);
  animation: mesh 22s ease-in-out infinite alternate;
}

.btn:hover::after,
.tour-card:hover .tour-media::after,
.post-card:hover .post-media::after,
.dest-card:hover::after,
.cat-card:hover::after,
.featured:hover .featured-media::after {
  transform: translateX(130%);
  transition: transform 0.75s var(--ease);
}

.js .tour-card:not(.is-in),
.js .post-card:not(.is-in),
.js .dest-card:not(.is-in),
.js .cat-card:not(.is-in),
.js .reason-card:not(.is-in) {
  opacity: 0;
}

.js .tour-card.is-in,
.js .post-card.is-in,
.js .dest-card.is-in,
.js .cat-card.is-in,
.js .reason-card.is-in,
.js .faq-item.is-in,
.js .enquiry-card.is-in {
  opacity: 1;
}

.card-grid > .is-in:nth-child(2),
.dest-grid > .is-in:nth-child(2),
.cat-grid > .is-in:nth-child(2),
.post-grid > .is-in:nth-child(2),
.reason-grid > .is-in:nth-child(2) { animation-delay: 0.08s; }

.card-grid > .is-in:nth-child(3),
.dest-grid > .is-in:nth-child(3),
.cat-grid > .is-in:nth-child(3),
.post-grid > .is-in:nth-child(3),
.reason-grid > .is-in:nth-child(3) { animation-delay: 0.16s; }

.card-grid > .is-in:nth-child(4),
.dest-grid > .is-in:nth-child(4),
.cat-grid > .is-in:nth-child(4),
.post-grid > .is-in:nth-child(4),
.reason-grid > .is-in:nth-child(4) { animation-delay: 0.24s; }

.card-grid > .is-in:nth-child(n + 5),
.dest-grid > .is-in:nth-child(n + 5),
.cat-grid > .is-in:nth-child(n + 5) { animation-delay: 0.3s; }

.tour-card,
.post-card,
.dest-card,
.cat-card,
.reason-card,
.enquiry-card,
.carousel,
.filters button {
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), background 0.25s, color 0.25s, border-color 0.25s;
}

.card-grid,
.dest-grid,
.cat-grid,
.post-grid,
.reason-grid {
  perspective: 1200px;
}

.tour-card:hover,
.post-card:hover,
.reason-card:hover,
.dest-card:hover,
.cat-card:hover {
  transform: perspective(900px) rotateX(4deg) translateY(-8px);
  box-shadow: 0 22px 40px rgba(15, 23, 42, 0.12);
}

.reason-card:hover svg {
  transform: rotate(-8deg) scale(1.06);
  transition: transform 0.45s var(--ease);
}

.enquiry-card {
  position: relative;
}

.enquiry-card::before { display: none; }

.filters button:hover {
  transform: translateY(-2px);
  border-color: var(--secondary);
}

.nav .mega-tile {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.float-orb.a { animation: drift 8s ease-in-out infinite; }
.float-orb.b { animation: drift 10s ease-in-out infinite reverse; }

.js .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(24px);
}

.js .reveal.is-in {
  opacity: 1;
}

.js [data-motion]:not(.is-in) { opacity: 0; }

.js [data-motion="up"].is-in { animation: fade-up 0.75s var(--ease) both; }
.js [data-motion="left"].is-in { animation: from-left 0.75s var(--ease) both; }
.js [data-motion="right"].is-in { animation: from-right 0.75s var(--ease) both; }
.js [data-motion="zoom"].is-in { animation: pop-in 0.65s var(--ease) both; }

.reveal.delay-1 { animation-delay: 0.08s; }
.reveal.delay-2 { animation-delay: 0.16s; }
.reveal.delay-3 { animation-delay: 0.24s; }

.faq-panel {
  transition: grid-template-rows 0.35s var(--ease);
}

.tour-card,
.dest-card,
.cat-card,
.post-card {
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.is-leave {
  opacity: 0;
  transform: scale(0.98);
}

.is-filtered-out {
  display: none;
}

.nav {
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}

.to-top {
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.2s;
}

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

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .reveal,
  .js .reveal:not(.is-in),
  .js .tour-card,
  .js .post-card,
  .js .dest-card,
  .js .cat-card,
  .js .reason-card,
  .js [data-motion],
  .js [data-motion]:not(.is-in) {
    opacity: 1;
    transform: none;
    translate: none;
    scale: none;
  }

  .hero-media img,
  .featured-media img {
    transform: none;
  }
}