/* Motion layer ANC: dimuat setelah gaya halaman. Dibuat oleh tools/build-site.mjs */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}
html{scroll-behavior:auto}
/* overflow:hidden pada .pg mematikan position:sticky pada navbar; clip tetap memotong tanpa jadi scroll container */
.pg{overflow:clip!important}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* Transisi antar halaman */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .5s var(--ease-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

/* Reveal berbasis waktu + stagger (menggantikan animation-timeline) */
.reveal{animation:none!important}
html.js .rv{opacity:0;translate:0 44px;
  transition:opacity .9s var(--ease-out),translate 1.1s var(--ease-out),transform .35s var(--ease-out),box-shadow .35s;
  transition-delay:var(--d,0ms),var(--d,0ms),0s,0s;will-change:opacity,translate}
html.js .rv.in{opacity:1;translate:0 0}

/* Hover lebih lentur */
.pill{transition:transform .45s var(--ease-spring),box-shadow .35s,background .25s,color .25s}
.pill:hover{transform:translateY(-3px) scale(1.03)}
.pill:active{transform:scale(.97);transition-duration:.12s}
.lift{transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out)}
.lift:hover{transform:translateY(-8px)}
.navl{transition:background .3s,color .3s,transform .3s var(--ease-out)}
.navl:hover{transform:translateY(-1px)}
.field{transition:border-color .25s,box-shadow .3s var(--ease-out)}
.field:focus{box-shadow:0 0 0 4px rgba(40,61,145,.15)}

/* Navigasi: mengecil halus saat scroll */
header{transition:box-shadow .4s var(--ease-out),background .4s,padding .4s var(--ease-out),transform .5s var(--ease-out)}
html.scrolled header{box-shadow:0 12px 36px rgba(30,41,59,.2)!important;background:rgba(255,255,255,.94)!important}

/* Hero & marquee */
/* Pesawat lepas landas: naik dari bawah ke atas dengan hidung terangkat, lalu melayang */
.plane{will-change:transform,translate;rotate:-4deg;transform-origin:30% 70%;
  animation:takeoff 2.2s var(--ease-out) .2s both,fly 7s ease-in-out 2.4s infinite}
@keyframes takeoff{
  0%{translate:-14% 130%;rotate:-16deg;opacity:0}
  25%{opacity:1}
  100%{translate:0 0;rotate:-4deg;opacity:1}}
.plane .streak{animation-duration:1.8s}
/* Navbar: sembunyi saat scroll turun, muncul saat scroll naik */
html.nav-hide header:not(:focus-within){transform:translateY(calc(-100% - 40px));box-shadow:none}
.mq:hover,.mq2:hover{animation-play-state:paused}
.hero-par{will-change:transform;translate:0 var(--py,0px)}

/* FAQ membuka halus */
details.faq{interpolate-size:allow-keywords;transition:box-shadow .35s var(--ease-out),border-color .3s}
details.faq:hover{box-shadow:0 10px 28px rgba(30,41,59,.08)}
details.faq::details-content{block-size:0;overflow:hidden;opacity:0;
  transition:block-size .5s var(--ease-out),opacity .4s,content-visibility .5s allow-discrete}
details.faq[open]::details-content{block-size:auto;opacity:1}
details.faq summary::after{transition:transform .4s var(--ease-out)}
details.faq[open] summary::after{transform:rotate(180deg)}

/* Galeri */
.tile{transition:transform .6s var(--ease-out),filter .4s;overflow:hidden}
.tile:hover{transform:scale(1.02);filter:brightness(1.06)}
.tile:not([hidden]){animation:tilein .6s var(--ease-out) both}
@keyframes tilein{from{opacity:0;transform:translateY(24px) scale(.97)}}
.chipb{transition:background .3s,color .3s,border-color .3s,transform .35s var(--ease-spring)}
.chipb:hover{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1!important;translate:none!important;transition:none!important}
  .tile,.tile:not([hidden]){animation:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  .hero-par{translate:none!important}
}