/* Peran 4: hanya transform dan opacity. Simple view dan reduced-motion = tanpa gerak. */
@keyframes na-fade{from{opacity:0}to{opacity:1}}
@keyframes na-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Hero masuk halus (CSS murni, jadi tidak ada kedipan sebelum JS jalan) */
@media (prefers-reduced-motion:no-preference){
  html:not(.simple) .hero-photo{animation:na-fade 700ms ease both}
  html:not(.simple) .hero-text{animation:na-rise 600ms ease 120ms both}
  html:not(.simple) .btn{transition:transform 150ms ease}
  html:not(.simple) .btn:hover{transform:translateY(-1px)}
}

/* Timeline: kelas "anim" hanya dipasang animations.js saat gerak diizinkan */
html.anim .tl-fill{transform:scaleY(0);will-change:transform}
html.anim .tl li{opacity:.45;transform:translateY(8px);transition:opacity 400ms ease,transform 400ms ease}
html.anim .tl li.on{opacity:1;transform:none}

/* Pengaman */
html.simple *,html.simple *::before,html.simple *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}