/* =========================================================
   StartoneTalk — animasi & transisi bersama
   Dipakai di semua halaman supaya perpindahan terasa halus
   (mirip Line/Telegram/KakaoTalk), bukan langsung "kaku"
   berganti tanpa transisi.
   ========================================================= */

:root{
  --dur-fast:.16s; --dur:.24s; --dur-slow:.4s;
  --ease-out:cubic-bezier(.22,.9,.32,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
}

/* ---- Transisi antar halaman (dipicu oleh page-transitions.js) ---- */
body{opacity:1;transition:opacity var(--dur-fast) ease}
body.page-leaving{opacity:0}
body.page-entering{animation:page-fade-in var(--dur-slow) var(--ease-out) both}
@keyframes page-fade-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---- Splash / loading screen ---- */
.splash-loader{display:flex;gap:6px;margin-top:22px}
.splash-loader span{width:8px;height:8px;border-radius:50%;background:#7fb8d4;animation:dot-bounce 1.1s ease-in-out infinite}
.splash-loader span:nth-child(2){animation-delay:.15s}
.splash-loader span:nth-child(3){animation-delay:.3s}
@keyframes dot-bounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-7px);opacity:1}}

/* ---- Bottom nav ---- */
.bottom-nav .nav-item .nav-icon{transition:background var(--dur) var(--ease-out),transform var(--dur) var(--ease-spring)}
.bottom-nav .nav-item{transition:color var(--dur-fast) ease}
.bottom-nav .nav-item.active .nav-icon{animation:nav-pop .32s var(--ease-spring)}
@keyframes nav-pop{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}
.bottom-nav{animation:nav-rise .32s var(--ease-out) both}
@keyframes nav-rise{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ---- Daftar chat / status / panggilan: masuk bertahap ---- */
.chat-list>*,.update-item,.call-row,#picker-list>*{
  animation:list-in var(--dur) var(--ease-out) both;
}
@keyframes list-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
.status-rail>.status-chip{animation:chip-in var(--dur) var(--ease-out) both}
@keyframes chip-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}

/* ---- Bubble pesan ---- */
.message{animation:msg-in .26s var(--ease-out) both}
@keyframes msg-in{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ---- Modal / dropdown / toast ---- */
.modal{animation:modal-in .22s var(--ease-spring) both}
@keyframes modal-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-backdrop:not(.hidden){animation:backdrop-in .18s ease both}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
.dropdown-menu:not(.hidden){animation:dropdown-in .16s var(--ease-out) both}
@keyframes dropdown-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.toast:not(.hidden){animation:toast-in .22s var(--ease-spring) both}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---- Status/story viewer & editor ---- */
.status-viewer:not(.hidden){animation:viewer-in .22s ease both}
.status-editor:not(.hidden){animation:viewer-in .22s ease both}
@keyframes viewer-in{from{opacity:0}to{opacity:1}}

/* ---- Auth: kartu & langkah login bertahap ---- */
.auth-card{animation:auth-in .38s var(--ease-out) both}
@keyframes auth-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.auth-steps{display:flex;width:200%;transition:transform var(--dur-slow) var(--ease-out)}
.auth-steps.step-2{transform:translateX(-50%)}
.auth-step{width:50%;flex:0 0 50%}

/* ---- Ripple tekan (dipasang lewat JS pada .contact, .nav-item, button umum) ---- */
.ripple-host{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:rgba(56,182,255,.35);transform:scale(0);animation:ripple-grow .5s ease-out forwards;pointer-events:none}
@keyframes ripple-grow{to{transform:scale(2.6);opacity:0}}

/* ---- Scroll halus di semua area chat/status/panggilan ---- */
.messages,.chat-list,.calls-body,.updates-body,.status-rail,.contacts-body,.page-body{
  scroll-behavior:smooth;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}

/* ---- Hormati preferensi pengguna yang mematikan animasi ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}