/* ==========================================================================
   BAHE Safaris - motion
   Entrances, parallax and hover movement. Loaded after site.css.
   Visitors who ask their device to reduce motion get a still page.
   ========================================================================== */

:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* 1. Scroll entrances (only with JavaScript on, so content never stays hidden)
   -------------------------------------------------------------------------- */
.motion-ready .reveal {
  opacity: 0; transform: translateY(26px); filter: blur(2px);
  transition: opacity .65s var(--ease-out), transform .8s var(--ease-out), filter .65s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready .reveal[data-reveal="zoom"] { transform: translateY(30px) scale(.94); }
.motion-ready .reveal[data-reveal="right"] { transform: translateX(60px); }
.motion-ready .reveal[data-reveal="left"] { transform: translateX(-60px); }
.motion-ready .reveal[data-reveal="fade"] { transform: none; filter: none; }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; filter: none; }

/* 2. Heroes: content arrives line by line on page load
   -------------------------------------------------------------------------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(34px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
.hero-inner .eyebrow, .hero-inner h1, .hero-inner .lead, .hero-inner .lead + .d-flex,
.hero-inner .trip-finder, .hero-inner .hero-trust,
.page-hero .breadcrumbs, .page-hero .eyebrow, .page-hero h1, .page-hero .lead, .page-hero .fact-strip {
  animation: rise-in 1.1s var(--ease-out) both;
}
.hero-inner h1, .page-hero h1 { animation-delay: .12s; }
.hero-inner .lead, .page-hero .lead { animation-delay: .28s; }
.hero-inner .lead + .d-flex, .page-hero .fact-strip { animation-delay: .42s; }
.hero-inner .trip-finder { animation-delay: .58s; }
.hero-inner .hero-trust { animation-delay: .74s; }

/* Opening zoom, then a slow continuous drift; parallax uses `translate` so the two never fight */
@keyframes drift {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06) translateX(-1.2%); }
}
.hero .hero-media img {
  animation: slow-zoom 4s var(--ease-out) both, drift 38s ease-in-out 4s infinite;
  translate: 0 var(--parallax, 0); will-change: transform, translate;
}
.page-hero .hero-media img { scale: 1.08; translate: 0 var(--parallax, 0); will-change: translate; }
.split-band .band-media img, .cta-band img.bg { scale: 1.12; translate: 0 var(--parallax, 0); will-change: translate; }

/* Eyebrow rule draws itself */
.eyebrow::before { transform-origin: left; animation: draw-line 1s var(--ease-out) .3s both; }
@keyframes draw-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 3. Route line and "How it works"
   -------------------------------------------------------------------------- */
.motion-ready .route-line::before { transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease-out); }
.motion-ready .route-line.is-visible::before { transform: scaleX(1); }
.motion-ready .route-stop::before {
  transform: scale(0);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) calc(var(--reveal-delay, 0ms) + .3s);
}
.motion-ready .route-stop.is-visible::before { transform: scale(1); }
.route-stop.home::before { animation: pulse-home 2.6s ease-out 2s infinite; }
@keyframes pulse-home {
  0% { box-shadow: 0 0 0 0 rgba(240, 197, 139, .6); }
  70% { box-shadow: 0 0 0 14px rgba(240, 197, 139, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 197, 139, 0); }
}

.motion-ready .steps::before { transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out) .2s; }
.motion-ready .steps:has(li.is-visible)::before { transform: scaleX(1); }
.step-icon { transition: transform .35s var(--ease-out), box-shadow .35s; }
.steps li:hover .step-icon { transform: translateY(-6px) rotate(-6deg); box-shadow: var(--bh-shadow-lg); }

/* 4. Cards
   -------------------------------------------------------------------------- */
.card-tour { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.card-tour:hover { transform: translateY(-8px); }
.card-media img { transition: transform 1.2s var(--ease-out); }
.card-tour:hover .card-media img,
.card-destination:hover .card-media img,
.card-post:hover .card-media img { transform: scale(1.08); }

.card-style { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.card-style:hover { transform: translateY(-6px); box-shadow: var(--bh-shadow-lg); }
.card-style .inner { transition: transform .5s var(--ease-out); }
.card-style:hover .inner { transform: translateY(-6px); }
.card-style .style-icon { display: inline-block; transition: transform .5s var(--ease-out); }
.card-style:hover .style-icon { transform: rotate(-10deg) scale(1.15); }

/* 5. Buttons: a soft light sweep on the main calls to action
   -------------------------------------------------------------------------- */
.btn-clay, .btn-forest { position: relative; overflow: hidden; }
.btn-clay::after, .btn-forest::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-20deg); transition: left .8s var(--ease-out); pointer-events: none;
}
.btn-clay:hover::after, .btn-forest:hover::after { left: 140%; }
.btn { transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease-out), box-shadow .25s; }
.btn-clay:hover, .btn-forest:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(30, 27, 22, .55); }

/* 6. Gallery and month planner
   -------------------------------------------------------------------------- */
.gallery-tile img { transition: transform 1.2s var(--ease-out), filter .6s; }
.gallery-tile:hover img { transform: scale(1.07); filter: saturate(1.15); }
.gallery-tile .play { transition: transform .4s var(--ease-out); }
.gallery-tile:hover .play { transform: scale(1.12); }

@keyframes panel-swap { from { opacity: .35; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.month-panel.is-swapping .panel-body > * { animation: panel-swap .6s var(--ease-out) both; }
.month-panel.is-swapping .panel-body > *:nth-child(2) { animation-delay: .06s; }
.month-panel.is-swapping .panel-body > *:nth-child(3) { animation-delay: .12s; }
.month-panel.is-swapping .panel-body > *:nth-child(4) { animation-delay: .18s; }
.month-picker button { transition: transform .25s var(--ease-out), background-color .25s, color .25s, border-color .25s; }
.month-picker button:hover { transform: translateY(-3px); }

/* 7. Small touches
   -------------------------------------------------------------------------- */
@keyframes nudge {
  0%, 92%, 100% { transform: none; }
  94% { transform: rotate(-12deg) scale(1.08); }
  96% { transform: rotate(10deg) scale(1.08); }
  98% { transform: rotate(-6deg); }
}
.whatsapp-float { animation: nudge 7s ease-in-out 3s infinite; }

@media (min-width: 1200px) {
  .site-header .dropdown:hover > .mega-menu { animation: menu-in .35s var(--ease-out) both; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 8. Respect "reduce motion"
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero-media img, .band-media img, .cta-band img.bg { translate: none !important; scale: 1 !important; }
  .motion-ready .route-line::before, .motion-ready .steps::before, .motion-ready .route-stop::before { transform: none !important; }
}