/* VAIIO production motion system
   Purpose: premium, restrained motion that supports hierarchy without becoming decorative.
   Module pages receive richer staged reveals; support pages remain quieter. */
:root{
  --vaiio-motion-ease:cubic-bezier(.22,1,.36,1);
  --vaiio-motion-fast:460ms;
  --vaiio-motion-base:680ms;
  --vaiio-motion-long:820ms;
}

.motion-item{
  will-change:transform,opacity;
  transition-property:opacity,transform,filter;
  transition-duration:var(--vaiio-motion-base);
  transition-timing-function:var(--vaiio-motion-ease);
  transition-delay:var(--motion-delay,0ms);
}
.motion-item[data-motion="fade-up"]{opacity:0;transform:translate3d(0,22px,0)}
.motion-item[data-motion="fade-down"]{opacity:0;transform:translate3d(0,-16px,0)}
.motion-item[data-motion="slide-left"]{opacity:0;transform:translate3d(28px,0,0)}
.motion-item[data-motion="slide-right"]{opacity:0;transform:translate3d(-28px,0,0)}
.motion-item[data-motion="scale-in"]{opacity:0;transform:scale(.975);filter:saturate(.94)}
.motion-item[data-motion="fade"]{opacity:0}
.motion-item.is-visible{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  will-change:auto;
}

/* Hero timing is slightly more deliberate than scroll reveals. */
.motion-hero.motion-item{transition-duration:var(--vaiio-motion-long)}

/* Global header gets one restrained entrance only. */
.vaiio-motion-header{
  opacity:0;
  transform:translate3d(0,-10px,0);
  animation:vaiioHeaderIn 560ms var(--vaiio-motion-ease) 70ms forwards;
}
@keyframes vaiioHeaderIn{to{opacity:1;transform:none}}

/* Support pages intentionally stay quiet. */
body[data-motion-mode="support"] .motion-item,
body[data-motion-mode="home"] .motion-item{transition-duration:620ms}
body[data-motion-mode="support"] .motion-item[data-motion="slide-left"],
body[data-motion-mode="support"] .motion-item[data-motion="slide-right"]{
  transform:translate3d(0,18px,0);
}

/* Module pages can carry a little more spatial movement. */
body[data-motion-mode="module"] .motion-item[data-motion="slide-left"]{transform:translate3d(34px,0,0)}
body[data-motion-mode="module"] .motion-item[data-motion="slide-right"]{transform:translate3d(-34px,0,0)}

/* Never animate interactive content while a user is actively opening it. */
.motion-item.is-visible details,
.motion-item.is-visible input,
.motion-item.is-visible select,
.motion-item.is-visible textarea,
.motion-item.is-visible button{will-change:auto}

@media(max-width:767.98px){
  .motion-item[data-motion="slide-left"],
  .motion-item[data-motion="slide-right"]{transform:translate3d(0,18px,0)}
  .motion-item[data-motion="fade-up"]{transform:translate3d(0,16px,0)}
  .motion-item{transition-duration:560ms}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .motion-item,
  .motion-item[data-motion],
  .vaiio-motion-header{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
    animation:none!important;
  }
}