/* ---------- cross-page transitions (Chrome / Edge / Android Chrome; others just load normally) ---------- */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.bottomnav { view-transition-name: bottomnav; }
#vtbar { view-transition-name: vtbar; }

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .34s; animation-timing-function: cubic-bezier(.22, .8, .24, 1); mix-blend-mode: normal;
}
/* deeper / next tab: new page slides in from the right over the old one */
html.vt-fwd::view-transition-old(root)  { animation-name: vt-out-left; }
html.vt-fwd::view-transition-new(root)  { animation-name: vt-in-right; }
/* back / previous tab: old page slides away to the right */
html.vt-back::view-transition-old(root) { animation-name: vt-out-right; z-index: 2; }
html.vt-back::view-transition-new(root) { animation-name: vt-in-left; }
/* Nota Baru opens like a sheet; page behind shrinks and dims */
html.vt-up::view-transition-old(root)   { animation-name: vt-dim; animation-duration: .4s; }
html.vt-up::view-transition-new(root)   { animation-name: vt-in-up; animation-duration: .4s; }
/* leaving Nota Baru: sheet drops away, page behind comes back */
html.vt-down::view-transition-old(root) { animation-name: vt-out-down; z-index: 2; }
html.vt-down::view-transition-new(root) { animation-name: vt-undim; }
/* same page after saving (status, payment): quick soft crossfade */
html.vt-same::view-transition-old(root), html.vt-same::view-transition-new(root) { animation-duration: .18s; }

@keyframes vt-in-right  { from { transform: translateX(100%); } }
@keyframes vt-out-left  { to { transform: translateX(-28%); opacity: .6; } }
@keyframes vt-in-left   { from { transform: translateX(-28%); opacity: .6; } }
@keyframes vt-out-right { to { transform: translateX(100%); } }
@keyframes vt-in-up     { from { transform: translateY(100%); } }
@keyframes vt-dim       { to { transform: scale(.94); opacity: .4; border-radius: 18px; } }
@keyframes vt-out-down  { to { transform: translateY(100%); } }
@keyframes vt-undim     { from { transform: scale(.94); opacity: .4; } }

/* ---------- loading line ---------- */
#vtbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; background: var(--brand);
  transform-origin: left; transform: scaleX(.08); transition: transform .12s linear; box-shadow: 0 0 8px var(--brand); pointer-events: none; }
#vtbar.done { animation: vtbar-done .55s ease-out forwards; }
@keyframes vtbar-done { 0% { transform: scaleX(.7); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* ---------- staggered entrance ---------- */
  .rise { animation: rise .46s cubic-bezier(.2, .8, .25, 1) backwards; animation-delay: calc(var(--i, 0) * 38ms + 60ms); }
  html.vt-same .rise { animation: none; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }

  /* ---------- press feedback ---------- */
  .btn, .item, .stat, .bottomnav a, .mode, .suggest button, .topnav a, details summary {
    transition: transform .14s ease, background-color .2s, border-color .2s, box-shadow .2s, opacity .2s;
  }
  .btn:active, .suggest button:active { transform: scale(.96); }
  .item:active, .stat:active, .mode:active { transform: scale(.985); }
  .bottomnav a:active { transform: scale(.9); }
  a.item:hover, a.stat:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }

  /* ---------- report bars grow ---------- */
  .barcell .bar { transform: scaleX(0); transform-origin: right; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
  .barcell .bar.grown { transform: scaleX(1); }

  /* ---------- flash + badges + rows ---------- */
  .flash { animation: flash-in .45s cubic-bezier(.3, 1.3, .5, 1) backwards; }
  @keyframes flash-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
  .badge { animation: badge-pop .4s cubic-bezier(.3, 1.6, .5, 1) .2s backwards; }
  @keyframes badge-pop { from { transform: scale(.6); opacity: 0; } }
  .pop-in { animation: rise .32s cubic-bezier(.2, .8, .25, 1) backwards; }
  .suggest button { animation: rise .25s ease backwards; }
  .picked { animation: flash-in .35s ease backwards; }
  .totals b { transition: color .2s; }

  /* ---------- tracking page steps light up one by one ---------- */
  .steps li { animation: rise .4s ease backwards; animation-delay: calc(var(--n, 0) * 90ms + 150ms); }
  .steps li.now .dot { animation: pulse 1.8s ease-in-out 1s infinite; }
  @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
}

@media (prefers-reduced-motion: no-preference) {
  /* new design pieces */
  .spark-bar { transform-origin: bottom; animation: spark-grow .7s cubic-bezier(.2, .9, .25, 1) backwards; animation-delay: calc(var(--i) * 45ms + 200ms); }
  @keyframes spark-grow { from { transform: scaleY(0); } }
  .pipe-step:active, .alertbar:active, .chip:active, .orow:active, .menu a:active, .person:active, .st-btn:active, .iconbtn:active, .qbtn:active, .opt:active, .cbar:active, .stat-card:active { transform: scale(.97); }
  .pipe-step, .alertbar, .chip, .orow, .menu a, .person, .st-btn, .iconbtn, .seg-opt span, .svc { transition: transform .14s ease, background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
  .total-amt.bump { animation: bump .3s cubic-bezier(.3, 1.6, .5, 1); }
  @keyframes bump { 50% { transform: scale(1.06); } }
  .svc.on .svc-amt { animation: rise .25s ease backwards; }
  .stepper li.now .dot { animation: pulse 1.8s ease-in-out .8s infinite; }
  .stepper li:not(:last-child)::after { transform-origin: left; }
  .stepper li.done:not(:last-child)::after { animation: line-grow .5s ease backwards; animation-delay: calc(var(--n, 0) * 120ms + 200ms); }
  @keyframes line-grow { from { transform: scaleX(0); } }
  .actionbar { animation: bar-up .4s cubic-bezier(.2, .9, .25, 1) .15s backwards; }
  @keyframes bar-up { from { transform: translateY(100%); } }
  @media (min-width: 761px) { @keyframes bar-up { from { transform: translate(-50%, 140%); } } }
  .btn.pulse { animation: pulse 1.6s ease-in-out 3; }
  .hero { animation: hero-in .55s cubic-bezier(.2, .9, .25, 1) backwards; }
  @keyframes hero-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
  .suggest .person { animation: rise .25s ease backwards; }
}

/* ---------- arriving behind a skeleton: quick fade ---------- */
html.vt-skel::view-transition-old(root), html.vt-skel::view-transition-new(root) { animation-duration: .2s; }

/* ---------- tab carousel panel ---------- */
html, body { overflow-x: clip; }
main.wrap { will-change: auto; }
.tab-panel { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; height: 100dvh; overflow: hidden; z-index: 5; background: var(--bg); pointer-events: none; will-change: transform; }
.tab-panel .rise { animation: none !important; }

/* ---------- skeleton screens ---------- */
.skel-overlay { position: fixed; inset: 0; z-index: 30; background: var(--bg); overflow: hidden; pointer-events: none; }
.skel-overlay.keep-nav { z-index: 15; }
.skel-overlay .wrap { padding-top: calc(18px + env(safe-area-inset-top)); }
.sk { display: block; border-radius: 12px; background: var(--card); position: relative; overflow: hidden; border: 1px solid var(--line); }
.sk::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 7%, transparent), transparent); animation: shimmer 1.15s ease-in-out infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-eyebrow { width: 40%; height: 14px; margin: 8px 0 8px; border: 0; }
.sk-h1 { width: 62%; height: 30px; margin: 8px 0 20px; border: 0; }
.sk-hero { height: 214px; border-radius: 22px; margin-bottom: 14px; border: 0; background: color-mix(in srgb, var(--brand) 30%, var(--card)); }
.sk-pipe { height: 68px; border-radius: 18px; margin-bottom: 22px; }
.sk-search { height: 48px; border-radius: 14px; margin-bottom: 12px; }
.sk-chips { display: flex; gap: 8px; margin-bottom: 16px; }
.sk-chips .sk { width: 92px; height: 36px; border-radius: 99px; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.sk-row > div { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sk-row .sk { border: 0; background: var(--gray-soft); }
.sk-av { width: 44px; height: 44px; border-radius: 14px !important; flex-shrink: 0; }
.sk-l1 { width: 55%; height: 14px; } .sk-l2 { width: 75%; height: 11px; } .sk-amt { width: 64px; height: 14px; }
.sk-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 18px; }
.sk-circle { width: 42px; height: 42px; border-radius: 50% !important; }
.sk-title { width: 50%; height: 24px; border: 0; }
.sk-card { height: 150px; border-radius: 16px; margin-bottom: 12px; }
.sk-card.sm { height: 72px; } .sk-card.tall { height: 240px; }
@media (prefers-reduced-motion: no-preference) {
  .skel-overlay.dir-fwd { animation: sk-in-right .28s cubic-bezier(.22, .8, .24, 1) both; }
  .skel-overlay.dir-back { animation: sk-in-left .28s cubic-bezier(.22, .8, .24, 1) both; }
  .skel-overlay.dir-up { animation: sk-in-up .32s cubic-bezier(.22, .8, .24, 1) both; }
  .skel-overlay.dir-down { animation: sk-fade .2s ease both; }
  @keyframes sk-in-right { from { transform: translateX(100%); } }
  @keyframes sk-in-left { from { transform: translateX(-30%); opacity: 0; } }
  @keyframes sk-in-up { from { transform: translateY(100%); } }
  @keyframes sk-fade { from { opacity: 0; } }
}