/* Bali VIP Journey — motion layer for the public site. Classes are added by js/motion.js; everything is off for prefers-reduced-motion. */
:root{--m-ease:cubic-bezier(.2,.7,.2,1)}

@media (prefers-reduced-motion:no-preference){
  /* Page-to-page: native cross-document view transition (Chrome, Edge, Safari 18.2+) */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:m-vt-out .32s cubic-bezier(.4,0,1,1) backwards}
  ::view-transition-new(root){animation:m-vt-in .6s var(--m-ease) backwards}

  html{scroll-behavior:smooth}

  /* Fallback page leave for browsers without view transitions */
  html.m-leaving body{opacity:0;transition:opacity .28s ease}

  /* Header bar and floating WhatsApp button */
  [data-nav] > div:first-child{animation:m-down 1s var(--m-ease) .1s backwards}
  .wa-float{animation:m-pop .7s var(--m-ease) 1.1s backwards}

  /* Smooth hover changes for elements styled through data-hover (inline transitions take precedence) */
  [data-hover]{transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}

  /* Reveal: fade up */
  .m-r:not(.m-in){opacity:0}
  .m-r.m-in{animation:m-up 1s var(--m-ease) var(--m-d,0ms) backwards}

  /* Reveal: image curtain with a slow settle of the photo inside */
  .m-img:not(.m-in){clip-path:inset(100% 0 0 0)}
  .m-img.m-in{animation:m-unclip 1.25s var(--m-ease) var(--m-d,0ms) backwards}
  .m-img.m-in > *{animation:m-settle 1.9s var(--m-ease) var(--m-d,0ms) backwards}

  /* Keyframes only define the start, so each element settles on its own inline values (e.g. a dimmed photo). */
  /* Hero background: soft fade-in and slow zoom-out */
  .m-hero-bg{animation:m-kenburns 2.8s var(--m-ease) backwards}

  /* Parallax layers are moved with the `translate` property from JS */
  .m-px{will-change:translate}
}

.m-layer{position:absolute;left:0;right:0;top:0;bottom:0;background-position:center;background-size:cover;background-repeat:no-repeat;pointer-events:none}

@keyframes m-vt-out{to{opacity:0}}
@keyframes m-vt-in{from{opacity:0}}
@keyframes m-up{from{opacity:0;translate:0 34px}}
@keyframes m-down{from{opacity:0;translate:0 -18px}}
@keyframes m-pop{from{opacity:0;scale:.6}}
@keyframes m-unclip{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes m-settle{from{scale:1.16}}
@keyframes m-kenburns{from{opacity:0;scale:1.12}}