/* Keki's Kingdom — stronger reliable motion patch
   Mobile-first entrance motion + bounded parallax.
   Progressive enhancement: content remains readable if JS is unavailable.
*/

[data-lines] .motion-mask{
  display:inline-block;
  vertical-align:top;
  overflow:hidden;
  padding:.09em .035em .08em;
  margin:-.09em -.035em -.08em;
}
[data-lines] .motion-word{
  display:inline-block;
  transform-origin:0 100%;
}

.motion-on [data-reveal],
.motion-on [data-lines] .motion-word{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform,opacity;
}

/* Standard reveal state */
.motion-on [data-reveal].m-waiting:not([data-lines]){
  opacity:0;
}
.motion-on [data-reveal="up"].m-waiting{
  transform:translate3d(0,36px,0);
}
.motion-on [data-reveal="image-left"].m-waiting{
  transform:translate3d(-34px,0,0) scale(1.035);
  clip-path:inset(0 100% 0 0);
  -webkit-clip-path:inset(0 100% 0 0);
}
.motion-on [data-reveal="image-right"].m-waiting{
  transform:translate3d(34px,0,0) scale(1.035);
  clip-path:inset(0 0 0 100%);
  -webkit-clip-path:inset(0 0 0 100%);
}
.motion-on [data-reveal="card"].m-waiting{
  transform:translate3d(0,48px,0) scale(.95);
}

.motion-on [data-reveal]{
  transition:
    opacity .62s cubic-bezier(.16,1,.3,1),
    transform .70s cubic-bezier(.16,1,.3,1),
    clip-path .76s cubic-bezier(.16,1,.3,1),
    -webkit-clip-path .76s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--motion-delay,0ms);
}

.motion-on [data-reveal].m-show{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 0 0);
  -webkit-clip-path:inset(0 0 0 0);
}

/* Word-by-word headline entrance */
.motion-on [data-lines].m-waiting .motion-word{
  opacity:0;
  transform:translate3d(0,112%,0) rotate(2deg);
}
.motion-on [data-lines] .motion-word{
  transition:
    opacity .52s ease,
    transform .68s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--motion-delay,0ms) + var(--word-delay,0ms));
}
.motion-on [data-lines].m-show .motion-word{
  opacity:1;
  transform:translate3d(0,0,0) rotate(0deg);
}

/* Hero image starts slightly oversized, then settles immediately on page entry. */
.motion-on [data-image-intro].intro-waiting{
  transform:scale(1.10);
}
.motion-on [data-image-intro]{
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.motion-on [data-image-intro].intro-show{
  transform:scale(1);
}

/* Menu movement */
.motion-on .mobile-menu:not([hidden]){
  animation:menu-entrance .24s cubic-bezier(.16,1,.3,1) both;
}
@keyframes menu-entrance{
  from{opacity:0;transform:translateY(-13px)}
  to{opacity:1;transform:none}
}

/* Header gets a slight physical response when the page moves. */
.cinema-header{
  transition:box-shadow .2s ease,transform .25s ease;
}
.cinema-header.has-scrolled{
  box-shadow:0 5px 25px #1608231f;
}

/* MOBILE: make movement obvious, still fast. */
@media(max-width:700px){
  .motion-on [data-reveal="up"].m-waiting{
    transform:translate3d(0,48px,0);
  }
  .motion-on [data-reveal="image-left"].m-waiting{
    transform:translate3d(-58px,0,0) scale(1.045);
  }
  .motion-on [data-reveal="image-right"].m-waiting{
    transform:translate3d(58px,0,0) scale(1.045);
  }
  .motion-on [data-reveal="card"].m-waiting{
    transform:translate3d(0,58px,0) scale(.94);
  }
  .motion-on [data-reveal]{
    transition-duration:.58s,.68s,.72s,.72s;
  }
  .motion-on [data-lines] .motion-word{
    transition-duration:.48s,.64s;
  }
}

/* If visitors request reduced motion, honor that accessibility preference. */
@media(prefers-reduced-motion:reduce){
  [data-reveal],
  [data-lines],
  [data-lines] .motion-word,
  [data-image-intro]{
    opacity:1!important;
    transform:none!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    transition:none!important;
    animation:none!important;
  }
  .parallax-media{transform:none!important;will-change:auto!important}
}

/* Motion toggle off */
.motion-off [data-reveal],
.motion-off [data-lines],
.motion-off [data-lines] .motion-word,
.motion-off [data-image-intro]{
  opacity:1!important;
  transform:none!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  transition:none!important;
}
.motion-off .parallax-media{
  transform:none!important;
  will-change:auto!important;
}

@media print{
  [data-reveal],[data-lines],[data-lines] .motion-word{
    opacity:1!important;
    transform:none!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
  }
}