/* ═══ DJI MOTION IMAGE LAYER (v9.47.4) ═══
 * Wraps all images on the platform in cinematic motion:
 *   - Slow Ken Burns zoom (1.0  1.08, 14s loop)
 *   - Subtle pan via random origin per image
 *   - Optional scroll parallax
 *   - Film grain overlay
 *   - Saturation boost (subtle)
 *   - Only animates when in viewport (perf + battery)
 *   - prefers-reduced-motion: disables all motion
 */

/* Apply to any element marked .dji-motion or any <img> inside .dji-stage */
.dji-motion,
.dji-stage img,
.hero-bg img,
.origin-bg img,
.invite-bg img,
.iti-hero-bg,
.j-panel-photo,
.iti-card-img,
[data-dji-motion="true"] {
  --dji-zoom-start: 1;
  --dji-zoom-end: 1.08;
  --dji-duration: 14s;
  --dji-origin-x: 50%;
  --dji-origin-y: 50%;
  transform-origin: var(--dji-origin-x) var(--dji-origin-y);
  will-change: transform, filter;
  transition: filter .6s ease;
  filter: saturate(1.08) contrast(1.04) brightness(1.02);
}

/* Auto-applied via JS when element scrolls into view */
.dji-motion.is-active,
.dji-stage img.is-active,
[data-dji-motion="true"].is-active {
  animation: dji-kenburns var(--dji-duration) ease-in-out infinite alternate;
}

@keyframes dji-kenburns {
  0%   { transform: scale(var(--dji-zoom-start)) translate3d(0,0,0); }
  100% { transform: scale(var(--dji-zoom-end))   translate3d(0,0,0); }
}

/* ── Film grain overlay (subtle, additive) ─────────────────────────── */
.dji-grain-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 200px;
  animation: grain 8s steps(8) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10%      { transform: translate3d(-5%, -10%, 0); }
  20%      { transform: translate3d(-15%, 5%, 0); }
  30%      { transform: translate3d(7%, -25%, 0); }
  40%      { transform: translate3d(-5%, 25%, 0); }
  50%      { transform: translate3d(-15%, 10%, 0); }
  60%      { transform: translate3d(15%, 0%, 0); }
  70%      { transform: translate3d(0%, 15%, 0); }
  80%      { transform: translate3d(3%, 35%, 0); }
  90%      { transform: translate3d(-10%, 10%, 0); }
}

/* ── Scroll parallax for full-bleed hero/origin/invite sections ────── */
.dji-parallax {
  position: relative;
  overflow: hidden;
}
.dji-parallax > .dji-parallax-bg {
  position: absolute;
  inset: -10% 0;
  height: 120%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  transform: translate3d(0, var(--dji-parallax-y, 0px), 0);
  transition: transform .1s linear;
}

/* ── Country card hover lift + glow ────────────────────────────────── */
.dji-stage {
  position: relative;
  overflow: hidden;
}
.dji-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.15) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Reduced motion: kill all animation ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dji-motion, .dji-stage img, [data-dji-motion="true"] {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
  .dji-grain-layer { animation: none !important; opacity: 0; }
  .dji-parallax > .dji-parallax-bg { transform: none !important; }
}

/* ── Mobile: less aggressive (battery + perf) ──────────────────────── */
@media (max-width: 760px) {
  .dji-motion, .dji-stage img, [data-dji-motion="true"] {
    --dji-duration: 18s;
    --dji-zoom-end: 1.05;
    filter: saturate(1.04) contrast(1.02);
  }
  .dji-grain-layer { opacity: 0.1; }
  .dji-parallax > .dji-parallax-bg { transform: none; }
}