/* Issue #123 — Phase 8 motion-impact correction v2.
   Performance-first: transform + opacity only for scroll motion. */
:root{
  --motion-fast:200ms;
  --motion-base:680ms;
  --motion-slow:900ms;
  --motion-ease:cubic-bezier(.16,1,.3,1);
  --motion-distance:42px;
  --motion-stagger:140ms;
}
.reveal{
  opacity:0;
  transform:translate3d(0,var(--motion-distance),0);
  transition:opacity var(--motion-base) ease,transform var(--motion-base) var(--motion-ease);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:translate3d(0,0,0);will-change:auto}
html.motion-ready .motion-item{
  opacity:0;
  transform:translate3d(0,var(--motion-distance),0) scale(.985);
  transition:opacity var(--motion-base) ease,transform var(--motion-base) var(--motion-ease);
  transition-delay:var(--motion-delay,0ms);
  will-change:opacity,transform;
}
html.motion-ready .motion-item.motion-in{opacity:1;transform:translate3d(0,0,0) scale(1);will-change:auto}

/* Ambient hero remains visible but slower and cheaper: transform only. */
.hero-blob-1{animation:phase8AmbientOne 12s ease-in-out infinite alternate!important;will-change:transform}
.hero-blob-2{animation:phase8AmbientTwo 15s ease-in-out infinite alternate!important;will-change:transform}
@keyframes phase8AmbientOne{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-28px,22px,0) scale(1.07)}}
@keyframes phase8AmbientTwo{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(26px,-20px,0) scale(1.08)}}

@media(hover:hover) and (pointer:fine){
  #layanan .svc{transition:transform 320ms var(--motion-ease),box-shadow 320ms ease,border-color 240ms ease}
  #layanan .svc:hover{transform:translate3d(0,-9px,0) scale(1.01)}
  #layanan .svc:hover .svc-icon{transform:translate3d(0,-3px,0) scale(1.07)}
  #layanan .svc-cta svg{transition:transform 240ms var(--motion-ease)}
  #layanan .svc:hover .svc-cta svg{transform:translateX(7px)}
  .btn{transition:transform 220ms var(--motion-ease),box-shadow 220ms ease,background 220ms ease,border-color 220ms ease}
  .btn:hover{transform:translate3d(0,-2px,0)}
}

/* Keep BIMA useful, not continuously bouncing while the user scrolls. */
#bimaFab{animation:none!important}
#bimaFab:hover{transform:translate3d(0,-3px,0) scale(1.015)}

@media(max-width:640px){
  :root{--motion-distance:30px;--motion-base:580ms;--motion-stagger:100ms}
  .hero-blob-1{animation-duration:16s!important}
  .hero-blob-2{animation-duration:19s!important}
  #layanan .svc:hover,#bimaFab:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .reveal,html.motion-ready .motion-item{
    opacity:1!important;transform:none!important;transition:none!important;
    transition-delay:0ms!important;will-change:auto!important;
  }
  .hero-blob-1,.hero-blob-2,#bimaFab{animation:none!important;transform:none!important;will-change:auto!important}
  #layanan .svc,#layanan .svc-icon,#layanan .svc-cta svg,.btn{transition:none!important;transform:none!important}
}