/* ============================================================
   Onze Wereldkaart - premium motion-laag
   reveal, scrub, tilt, magnetic, plane, aurora, confetti
   ============================================================ */

/* ---- Spring-easings ---- */
:root {
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --spring-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---- Reveal on scroll ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--rd, 0s);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-56px); }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal="zoom"]  { transform: scale(.82); }
[data-reveal="pop"]   { transform: scale(.5) translateY(24px); transition-timing-function: var(--spring); transition-duration: 1s; }
[data-reveal="blur"]  { filter: blur(14px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }

/* ---- Woord-voor-woord titel ---- */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; }
.split-word > i {
  display: inline-block; font-style: inherit;
  transform: translateY(110%) rotate(6deg);
  transition: transform .9s var(--ease-out);
  transition-delay: var(--wd, 0s);
}
.split-ready .split-word > i { transform: none; }

/* ---- Zwevende parallax-emoji (met varierende ademhaling) ---- */
.floaties { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.floaties b {
  position: absolute; font-size: var(--s, 32px); opacity: var(--o, .5); font-style: normal;
  animation: bob var(--dur, 7s) ease-in-out infinite alternate;
  animation-delay: var(--dl, 0s);
  will-change: transform;
  filter: drop-shadow(0 6px 10px rgba(120,80,120,.12));
}
@keyframes bob {
  from { transform: translateY(0) rotate(-7deg) scale(1); }
  to   { transform: translateY(-30px) rotate(7deg) scale(1.06); }
}

/* ---- Aurora-achtergrond ---- */
.aurora { position: absolute; inset: -20% -10% auto -10%; height: 130%; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora::before, .aurora::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  will-change: transform;
}
.aurora::before {
  width: 52vw; height: 52vw; left: -8vw; top: -12vw;
  background: radial-gradient(circle, #ffc0d8, transparent 62%);
  animation: aur1 20s ease-in-out infinite alternate;
}
.aurora::after {
  width: 46vw; height: 46vw; right: -6vw; top: 4vw;
  background: radial-gradient(circle, #bfe0ff, transparent 62%);
  animation: aur2 24s ease-in-out infinite alternate;
}
@keyframes aur1 { to { transform: translate(8vw, 6vw) scale(1.15); } }
@keyframes aur2 { to { transform: translate(-7vw, 9vw) scale(1.1); } }

/* ---- 3D-tilt ---- */
.tilt { transform-style: preserve-3d; transition: transform .25s var(--ease-out); will-change: transform; }
.tilt-inner { transform: translateZ(0); }

/* ---- Magnetische knop ---- */
.magnetic { transition: transform .3s var(--spring); will-change: transform; }

/* ---- Kaart die in een golf inkleurt ---- */
.hero-map .ilc { transition: fill .3s ease; }
.hero-map .ilc:not(.on):hover { fill: #ffd9e6; }
.hero-map.wave .ilc.on {
  animation: waveFill .7s var(--spring) backwards;
  animation-delay: var(--wave, 0s);
}
@keyframes waveFill {
  0%   { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
  60%  { opacity: 1; transform: scale(1.08); transform-box: fill-box; transform-origin: center; }
  100% { transform: scale(1); transform-box: fill-box; transform-origin: center; }
}

/* ---- Route die zichzelf tekent (trigger of scrub) ---- */
.draw-route path.route-line {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}
.draw-route.in path.route-line { animation: drawLine 2.6s var(--ease-out) forwards .2s; }
.draw-route.scrub path.route-line { animation: none; stroke-dashoffset: calc(var(--len, 1000) * (1 - var(--p, 0))); }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.draw-route .route-stop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.draw-route.in .route-stop {
  animation: stopPop .55s both var(--spring);
  animation-delay: calc(1.6s + var(--si, 0) * .38s);
}
@keyframes stopPop {
  0%   { opacity: 0; transform: scale(0) translateY(6px); }
  70%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- Vliegtuigje op de route ---- */
.plane-dot { position: absolute; font-size: 22px; will-change: transform; pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); z-index: 6; opacity: 0; transition: opacity .4s; }
.plane-dot.on { opacity: 1; }

/* ---- Glans-veeg over knoppen ---- */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-18deg);
  animation: sweep 3.6s ease-in-out infinite;
}
@keyframes sweep { 0%, 55% { left: -60%; } 82%, 100% { left: 130%; } }

/* ---- Ademende gloed ---- */
@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,111,156,.4); }
  50% { box-shadow: 0 0 0 16px rgba(255,111,156,0); }
}
.pulse { animation: softPulse 2.6s ease-out infinite; }

/* ---- Odometer-cijfers ---- */
.odo { display: inline-flex; overflow: hidden; height: 1em; line-height: 1; vertical-align: baseline; }
.odo .odo-col { display: inline-block; }

/* ---- Confetti-canvas ---- */
#fxCanvas { position: fixed; inset: 0; pointer-events: none; z-index: 90; }

/* ---- Scroll-voortgangsbalk bovenaan ---- */
.scroll-bar { position: fixed; top: 0; left: 0; height: 3px; z-index: 100;
  background: linear-gradient(90deg, var(--pink), var(--lila), var(--sky));
  width: var(--sp, 0%); transition: width .1s linear; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .split-word > i { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .floaties b, .aurora::before, .aurora::after, .shimmer::after, .pulse { animation: none !important; }
  .plane-dot { display: none; }
}