/*
 * OLKANCHOI JOURNEYS — animations.css
 * Safari motion language: slow, cinematic, purposeful.
 * Every animation earns its place.
 *
 * Philosophy:
 *   • Ease-in-out and cubic-bezier throughout — no linear motion
 *   • Scroll-triggered reveals feel like the land uncovering itself
 *   • Hover states breathe, not snap
 *   • Entrance sequences mirror a slow dawn across the savanna
 * ──────────────────────────────────────────────────────────────
 */

/* ── SAFARI EASING TOKENS ──────────────────────────────────── */
:root {
  --ease-drift:   cubic-bezier(.16, 1, .3, 1);       /* content drifting into place */
  --ease-settle:  cubic-bezier(.25, .1, .25, 1);      /* settling, landing */
  --ease-breathe: cubic-bezier(.45, 0, .55, 1);       /* organic in-out */
  --ease-stalk:   cubic-bezier(.76, 0, .24, 1);       /* page transitions — deliberate */
  --ease-horizon: cubic-bezier(.12, .8, .32, 1);      /* horizon-rise reveals */
  --dur-slow:     1.4s;
  --dur-mid:      0.9s;
  --dur-fast:     0.45s;
}

/* ── SCROLL REVEAL CLASSES ─────────────────────────────────── */
/* These override and extend the existing .rv / .rl / .rr system */

/* Up-rise: content emerges from below like heat haze */
.rv {
  opacity: 0;
  transform: translateY(52px);
  transition: opacity var(--dur-slow) var(--ease-drift),
              transform var(--dur-slow) var(--ease-drift);
}
.rv.in { opacity: 1; transform: translateY(0); }

/* Horizon-slide: content drifts in from left — like land emerging from morning mist */
.rl {
  opacity: 0;
  transform: translateX(-52px);
  transition: opacity var(--dur-slow) var(--ease-drift),
              transform var(--dur-slow) var(--ease-drift);
}
.rl.in { opacity: 1; transform: translateX(0); }

/* Mirror-slide from right */
.rr {
  opacity: 0;
  transform: translateX(52px);
  transition: opacity var(--dur-slow) var(--ease-drift),
              transform var(--dur-slow) var(--ease-drift);
}
.rr.in { opacity: 1; transform: translateX(0); }

/* Scale-rise: for large feature images — emerge from slightly smaller */
.rs {
  opacity: 0;
  transform: scale(.96);
  transition: opacity 1.6s var(--ease-breathe),
              transform 1.6s var(--ease-breathe);
}
.rs.in { opacity: 1; transform: scale(1); }

/* Clip-reveal: text lines that wipe in like a horizon line */
.rclip {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease-horizon);
}
.rclip.in { clip-path: inset(0 0 0% 0); }

/* Stagger delays */
.d1  { transition-delay: .12s !important; }
.d2  { transition-delay: .26s !important; }
.d3  { transition-delay: .42s !important; }
.d4  { transition-delay: .60s !important; }
.d5  { transition-delay: .80s !important; }
.d6  { transition-delay: 1.0s !important; }

/* ── PARALLAX SECTIONS ─────────────────────────────────────── */
/* Background layers get a natural drift — handled via JS transform */
[data-px] {
  will-change: transform;
  transition: transform .1s linear;
}

/* ── HERO ANIMATIONS ───────────────────────────────────────── */

/* Eye-line tag */
.hero-eye {
  opacity: 0;
  transform: translateY(12px);
  letter-spacing: .44em;
  transition: opacity 1.1s var(--ease-drift) .3s,
              transform 1.1s var(--ease-drift) .3s;
}
.hero-eye.v { opacity: 1; transform: translateY(0); }

/* Headline lines: drift up from below, staggered */
.hl {
  display: block;
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 1.5s var(--ease-drift),
              transform 1.5s var(--ease-drift);
}
.hl.v { opacity: 1; transform: translateY(0); }

/* Sub-headline */
.hero-tag {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s var(--ease-drift) 1.2s,
              transform 1.1s var(--ease-drift) 1.2s;
}
.hero-tag.v { opacity: 1; transform: translateY(0); }

/* CTAs: fade up last */
.hero-ctas {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s var(--ease-drift) 1.9s,
              transform 1s var(--ease-drift) 1.9s;
}
.hero-ctas.v { opacity: 1; transform: translateY(0); }

/* Scroll indicator */
.hero-scroll {
  opacity: 0;
  transition: opacity 1.5s 2.8s;
}
.hero-scroll.v { opacity: 1; }

/* Hero video: slow Ken Burns zoom on load */
.hero-video {
  animation: hero-kb 40s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-kb {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Gold rule that draws across under the eyeline */
.hero-rule {
  display: block;
  width: 0;
  height: 1px;
  background: var(--gold);
  opacity: .35;
  margin-bottom: 1.2rem;
  transition: width 1.8s var(--ease-stalk) .6s;
}
.hero-rule.v { width: 48px; }

/* ── NAVIGATION ────────────────────────────────────────────── */
nav.nav {
  transition: all .7s var(--ease-breathe);
}

/* Links: underline sweeps left-to-right */
.nav-links a::after {
  transition: transform .5s var(--ease-drift);
  transform-origin: right;
  transform: scaleX(0);
}
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── JOURNEY CARDS ─────────────────────────────────────────── */

/* Cards enter staggered — the grid breathes in */
.j-card {
  transition: transform .7s var(--ease-settle);
}
.j-card:hover {
  transform: translateY(-6px);
}

/* Image scale — slow zoom, like approaching wildlife */
.j-card-img img {
  transition: transform 1.2s var(--ease-settle);
}
.j-card:hover .j-card-img img {
  transform: scale(1.08);
}

/* Reveal body content on hover — info rises from below */
.j-desc, .j-meta, .j-link {
  transition: opacity .55s var(--ease-drift),
              transform .55s var(--ease-drift);
}
.j-desc  { transition-delay: 0s;    }
.j-meta  { transition-delay: .05s;  }
.j-link  { transition-delay: .12s;  }

/* ── BRAND GRID & GIFT ITEMS ───────────────────────────────── */

.brand-item img,
.exp-card img,
.gift-item img,
.gallery-item img,
.people-main img,
.dest-card img {
  transition: transform 1.3s var(--ease-settle);
}
.brand-item:hover img,
.exp-card:hover img,
.gift-item:hover img,
.gallery-item:hover img,
.people-main:hover img,
.dest-card:hover img {
  transform: scale(1.05);
}

/* Caption slides up from the bottom on hover */
.brand-caption,
.exp-body,
.gift-label {
  transform: translateY(8px);
  transition: transform .7s var(--ease-drift);
}
.brand-item:hover .brand-caption,
.exp-card:hover .exp-body,
.gift-item:hover .gift-label {
  transform: translateY(0);
}

/* ── STAT NUMBERS ──────────────────────────────────────────── */

/* Numbers count up via JS; the container drifts in */
.stat-n,
.cnum-n {
  display: inline-block;
  transition: opacity .6s var(--ease-drift),
              transform .6s var(--ease-drift);
}

/* ── PROCESS STEPS ─────────────────────────────────────────── */

.p-step {
  transition: border-color .6s var(--ease-settle),
              transform .7s var(--ease-drift);
}
.p-step:hover {
  border-color: rgba(200, 150, 60, .3);
  transform: translateX(6px);
}

/* Step number glows on hover */
.p-num {
  transition: color .5s var(--ease-settle),
              opacity .5s;
}
.p-step:hover .p-num {
  color: var(--gold);
  opacity: 1;
}

/* ── CTA BUTTONS ───────────────────────────────────────────── */

.btn-g, .btn-o, .btn-ol, .btn-f {
  transition: all .5s var(--ease-breathe);
  position: relative;
  overflow: hidden;
}

/* Sheen sweep across button on hover */
.btn-g::before, .btn-o::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-100%);
  transition: transform .7s var(--ease-settle);
}
.btn-g:hover::before, .btn-o:hover::before {
  transform: translateX(100%);
}

.btn-g:hover {
  background: var(--gold-l);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(200,150,60,.25);
}
.btn-o:hover, .btn-ol:hover {
  border-color: rgba(200,150,60,.7);
  transform: translateY(-2px);
}

/* Arrow links */
.arr-link svg {
  transition: transform .4s var(--ease-drift);
}
.arr-link:hover svg {
  transform: translateX(7px);
}

/* ── LAND / CONSERVATION SECTIONS ─────────────────────────── */

/* Quote text: individual words drift on entrance */
.land-quote {
  transition: opacity 1.4s var(--ease-drift),
              transform 1.4s var(--ease-drift);
}

/* Stats counters: numbers count up when entering viewport */
.land-stats .stat-n[data-count],
.consv-nums .cnum-n[data-count] {
  font-feature-settings: 'tnum';
}

/* ── OVERLAND SECTION ──────────────────────────────────────── */

/* Background parallax bg gets additional subtle rotation */
.overland-bg {
  transition: transform .12s linear;
  will-change: transform;
}

/* ── GALLERY ───────────────────────────────────────────────── */

.gallery-item {
  transition: transform .8s var(--ease-settle);
}
.gallery-item:hover {
  transform: translateY(-4px);
  z-index: 2;
}

.gallery-ov {
  transition: background .6s var(--ease-breathe);
}

/* Lightbox entrance */
.lb {
  opacity: 0;
  transition: opacity .4s var(--ease-breathe);
}
.lb.open {
  opacity: 1;
}

.lb-img {
  transform: scale(.96);
  transition: transform .5s var(--ease-drift);
}
.lb.open .lb-img {
  transform: scale(1);
}

/* ── FOOTER ────────────────────────────────────────────────── */

.ft-col a {
  transition: color .35s var(--ease-settle),
              transform .35s var(--ease-settle);
  display: inline-block;
}
.ft-col a:hover {
  color: var(--gold);
  transform: translateX(4px);
}

/* ── LOGO DIVIDER ──────────────────────────────────────────── */

/* Central logo: slow pulse like a heartbeat in the wild */
.logo-div img {
  animation: logo-breathe 8s ease-in-out infinite;
}
@keyframes logo-breathe {
  0%, 100% { opacity: .12; transform: scale(1); }
  50%       { opacity: .18; transform: scale(1.02); }
}

/* ── SECTION DIVIDERS ──────────────────────────────────────── */

/* Gold line that draws in from left on scroll reveal */
.tag::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 0;
  transition: width .9s var(--ease-stalk), margin-right .9s var(--ease-stalk);
}
.tag.in-tag::before {
  width: 28px;
  margin-right: .6em;
}

/* ── MOBILE MENU ───────────────────────────────────────────── */

.mob {
  transition: transform .75s var(--ease-stalk);
}
.mob-nav a {
  transition: color .35s var(--ease-settle),
              transform .35s var(--ease-settle);
  display: inline-block;
}
.mob-nav a:hover {
  color: var(--gold);
  transform: translateX(6px);
}

/* ── DUST / GOLDEN HOUR CANVAS ─────────────────────────────── */
/* The heroCanvas particle system already runs — no changes needed */
/* This just ensures the canvas blends smoothly */
.hero-canvas {
  pointer-events: none;
  will-change: transform;
}

/* ── SCROLL-TRIGGERED COUNTER ANIMATION ────────────────────── */
/* The JS countUp() reads data-count on stat elements */
[data-count] {
  transition: color .3s;
}

/* ── REDUCE MOTION OVERRIDES ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-video { animation: none; }
  .logo-div img { animation: none; opacity: .15; }
}