/* Sync365 · v17: hero muka depan bercerita lebih lengkap. Fail digital PBPPP:
   1 snap atau muat naik (bingkai kamera mengunci dokumen, kilat, bar muat naik), 2 AI menganalisis (cip AI, imbasan, label),
   3 simpan ikut rubrik (folder "Fail PBPPP 2026" muncul, dokumen masuk ke petak aspek, kiraan 13 -> 14 / 19), 4 laporan siap (kapsyen).
   Setiap babak bermula apabila data-phase bertukar; hanya transform dan opacity. Kurangkan gerakan memaparkan keadaan akhir. */

/* babak 1: snap dan muat naik */
.hs-cam path { fill: none; stroke: var(--hs-ac); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hs-cam { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(1.14); transition: opacity .3s ease, transform .3s ease; }
.hs[data-phase="1"] .hs-cam { opacity: 1; transform: none; transition: opacity .35s ease .25s, transform .6s var(--ease-out) .25s; }
.hs-flash { fill: #fff; opacity: 0; pointer-events: none; }
.hs[data-phase="1"] .hs-flash { animation: hs-flash .6s ease-out 1s both; }
@keyframes hs-flash { 0% { opacity: 0; } 18% { opacity: .38; } 100% { opacity: 0; } }
.hs-up { opacity: 0; transition: opacity .3s ease; }
.hs[data-phase="1"] .hs-up { opacity: 1; transition: opacity .4s ease 1.35s; }
.hs-up-tr { fill: rgba(241, 242, 236, .12); }
.hs-up-fl { fill: var(--hs-ac); transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); }
.hs[data-phase="1"] .hs-up-fl { transform: scaleX(1); transition: transform 2.6s cubic-bezier(.4, .1, .2, 1) 1.5s; }
.hs-up-t { font: 600 10.5px var(--f-ui); fill: rgba(241, 242, 236, .72); }

/* babak 2: cip AI */
.hs-ai { opacity: 0; transform: translateY(6px); transform-box: fill-box; transition: opacity .3s ease, transform .3s ease; }
.hs-ai rect { fill: rgba(44, 240, 201, .1); stroke: rgba(44, 240, 201, .5); stroke-width: 1; }
.hs-ai text { font: 700 10.5px var(--f-ui); fill: var(--hs-ac); }
.hs-sp { fill: var(--hs-ac); transform-box: fill-box; transform-origin: 50% 50%; }
.hs[data-phase="2"] .hs-ai { opacity: 1; transform: none; transition: opacity .4s ease .15s, transform .6s var(--ease-out) .15s; }
.hs[data-phase="2"] .hs-sp { animation: hs-spin 1.6s var(--ease-out) .3s both; }
@keyframes hs-spin { from { transform: rotate(-90deg) scale(.4); } to { transform: none; } }

/* babak 3: folder fail digital dan kiraan aspek */
.hs-fold { opacity: 0; transition: opacity .4s ease; }
.hs[data-phase="3"] .hs-fold { opacity: 1; transition: opacity .6s ease .1s; }
.hs-fold-b { fill: rgba(44, 240, 201, .045); stroke: rgba(44, 240, 201, .32); stroke-width: 1.2; }
.hs-fold-t { fill: rgba(44, 240, 201, .16); stroke: rgba(44, 240, 201, .45); stroke-width: 1; }
.hs-fold-l { font: 700 10.5px var(--f-ui); fill: var(--hs-ac); }
.hs-cnt { font: 600 11px var(--f-ui); fill: rgba(241, 242, 236, .8); }
.hs-cnt.c1 { fill: var(--hs-ac); opacity: 0; }
.hs[data-phase="3"] .hs-cnt.c0 { animation: hs-out .35s ease 3.65s both; }
.hs[data-phase="3"] .hs-cnt.c1 { animation: hs-in .45s var(--ease-out) 3.7s both; }
@keyframes hs-out { to { opacity: 0; } }
@keyframes hs-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* babak 4: kapsyen laporan */
.hs-cap4 { font: 600 11px var(--f-ui); fill: rgba(241, 242, 236, .8); opacity: 0; }
.hs[data-phase="4"] .hs-cap4 { opacity: 1; transition: opacity .5s ease 1.4s; }

html[data-reduce] .hs-cam, html[data-reduce] .hs-up, html[data-reduce] .hs-ai, html[data-reduce] .hs-flash { opacity: 0 !important; animation: none !important; }
html[data-reduce] .hs-fold, html[data-reduce] .hs-cap4 { opacity: 1; } html[data-reduce] .hs-cnt.c0 { opacity: 0; } html[data-reduce] .hs-cnt.c1 { opacity: 1; animation: none; }
@media (prefers-reduced-motion: reduce) { .hs-flash, .hs-sp, .hs-cnt { animation: none !important; } .hs-up-fl { transition: none !important; } }