/* ============================================================
   GoAtlas Motion Layer — cinematic hero film + 3D scroll motion
   Works together with goatlas-motion.js. Content is ALWAYS visible
   without JavaScript; the script only adds motion on top.
   Motion uses the independent CSS properties translate / rotate /
   scale (driven by CSS variables), so it never fights the existing
   card tilt and hover effects, which use `transform`.
   ============================================================ */

/* ---------- Homepage hero film ---------- */
.ga-film{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1; display:block;
  background:#07101E url('goatlas-hero-film-poster.webp') center/cover no-repeat;
  pointer-events:none;
}
.hero3d.has-film .hero-photos,
.hero3d.has-film #globeCanvas{ display:none !important; }
.hero3d.has-film{ perspective:1400px; }

/* ---------- Motion-driven elements ---------- */
.ga-m{
  translate:var(--ga-tx,0px) var(--ga-ty,0px) var(--ga-tz,0px);
  rotate:x var(--ga-rx,0deg);
  scale:var(--ga-s,1);
  backface-visibility:hidden;
}
.ga-wi{ transform-origin:50% 100%; }
.ga-cf{ /* coverflow cards */
  rotate:y var(--ga-ry,0deg);
  translate:0 0 var(--ga-cz,0px);
  scale:var(--ga-cs,1);
}
/* Stop older "transition: all" rules from lagging behind the motion */
.ga-m,.ga-cf{
  transition-property:transform,box-shadow,border-color,background-color,color,filter !important;
}
.ga-persp{ perspective:1300px; perspective-origin:50% 30%; }

/* Split headline words */
.ga-w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.08em; margin-bottom:-0.08em; }
.ga-wi{ display:inline-block; will-change:auto; }

/* Hero depth layers while scrolling */
.ga-hero-layer{
  translate:0 var(--ga-hy,0px) var(--ga-hz,0px);
  rotate:x var(--ga-hrx,0deg);
}

/* Scroll progress bar */
.ga-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:400;
  background:linear-gradient(90deg,#B8941F,#E9CE7A);
  transform-origin:0 50%; scale:var(--ga-p,0) 1; pointer-events:none;
}

/* Magnetic buttons (desktop) */
.ga-mag{ translate:var(--ga-mx,0px) var(--ga-my,0px); transition:translate .35s cubic-bezier(.2,.8,.2,1); }

/* ---------- Safety: reduced motion = everything static ---------- */
@media (prefers-reduced-motion: reduce){
  .ga-m,.ga-cf,.ga-hero-layer,.ga-mag{ translate:none !important; rotate:none !important; scale:none !important; opacity:1 !important; }
  .ga-progress{ display:none; }
}

/* ---------- Destination chapters (homepage) ----------
   Without JavaScript (or with reduce-motion) the chapters simply stack as
   full-width photos, so every destination is always readable. The script
   adds .is-live, which layers them into one pinned, full-screen sequence. */
.ga-chapters{ padding:0 !important; background:#05080F; position:relative; }
.ga-ch{ position:relative; height:88vh; min-height:520px; overflow:hidden; color:#fff; }
.ga-ch picture, .ga-ch img{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.ga-ch img{ object-fit:cover; }
.ga-ch::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(6,12,22,0.85) 0%,rgba(6,12,22,0.35) 55%,rgba(6,12,22,0.12) 100%),
             linear-gradient(180deg,rgba(6,12,22,0.35) 0%,rgba(6,12,22,0) 30%,rgba(6,12,22,0) 60%,rgba(6,12,22,0.6) 100%); }
.ga-ch-copy{ position:absolute; left:0; right:0; bottom:11vh; z-index:2; }
.ga-ch-num{ display:block; font-family:'Playfair Display',serif; font-size:clamp(5rem,15vw,12.5rem); line-height:.82;
  color:transparent; -webkit-text-stroke:1px rgba(233,206,122,0.75); letter-spacing:-0.02em; }
.ga-ch-region{ margin-top:18px; font-size:0.7rem; letter-spacing:0.3em; text-transform:uppercase; color:#E9CE7A; font-weight:600; }
.ga-ch h3{ color:#fff !important; text-shadow:none !important; font-family:'Playfair Display',serif; font-weight:500 !important;
  font-size:clamp(2.4rem,6vw,5rem) !important; line-height:1.02 !important; margin-top:10px; max-width:14ch; }
.ga-ch p{ color:rgba(255,255,255,0.86) !important; max-width:46ch; margin-top:14px; font-size:1.04rem; line-height:1.7; }
.ga-ch-link{ display:inline-block; margin-top:26px; padding:15px 28px; border:1px solid rgba(255,255,255,0.7); color:#fff;
  font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; font-weight:600; transition:background .3s,color .3s; }
.ga-ch-link:hover{ background:#fff; color:#07101E; }
.ga-ch-ticks{ display:none; }
@media(max-width:640px){ .ga-ch-copy{ bottom:8vh; } .ga-ch p{ font-size:0.96rem; } }

.ga-chapters.is-live .ga-ch-stage{ position:relative; height:100vh; min-height:560px; overflow:hidden; }
.ga-chapters.is-live .ga-ch{ position:absolute; inset:0; height:auto; min-height:0; }
.ga-chapters.is-live .ga-ch-ticks{ display:flex; flex-direction:column; gap:10px; position:absolute; z-index:5;
  right:max(24px, env(safe-area-inset-right,0px)); top:50%; translate:0 -50%; }
.ga-ch-ticks i{ display:block; width:2px; height:26px; background:rgba(255,255,255,0.28); transition:background .4s; }
.ga-ch-ticks i.on{ background:#D4AF37; }