/* ======================================================================================
   Sync365 v4: ikon dan ilustrasi yang hidup, logo yang lebih hebat, log masuk dan memuat.
   Semua gerak: transform/opacity (kecuali lukisan garisan), satu kali pada hover/tekan atau apabila halaman dimasuki; hormati reduced-motion.
   ====================================================================================== */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); }
svg.i path { transform-box: fill-box; transform-origin: center; }
svg.i { transform-box: fill-box; transform-origin: center; }

/* ---- ikon: satu gerak bermakna bagi setiap ikon (hover/tekan, dan apabila tab/halaman itu dimasuki) ---- */
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="home"] path:nth-child(2) { animation: ic-lift .55s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="folder"] path:nth-child(3) { animation: ic-draw .5s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="folder"] { animation: ic-tilt .5s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="report"] path:nth-child(4) { animation: ic-draw .55s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="report"] path:nth-child(3) { animation: ic-lift .5s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="user"] path:nth-child(1), :is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="user"] path:nth-child(2) { animation: ic-bob .55s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="plus"] { animation: ic-rot90 .4s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="x"] { animation: ic-rot90 .35s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="chev"] { animation: ic-nudge .4s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="arrow"] { animation: ic-nudge .4s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="upload"] path:nth-child(1) { animation: ic-up .55s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="camera"] path:nth-child(3) { animation: ic-pop .5s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="note"] { animation: ic-write .6s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="link"] { animation: ic-write .5s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="sparkle"] { animation: ic-twinkle .7s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="gear"] path:nth-child(2) { animation: ic-knobA .55s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="gear"] path:nth-child(3) { animation: ic-knobB .55s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="trash"] path:nth-child(1) { animation: ic-lid .5s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="refresh"] { animation: ic-spin .65s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="search"] path:nth-child(1) { animation: ic-pop .45s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="lock"] path:nth-child(3) { animation: ic-lift .5s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="cal"] path:nth-child(3) { animation: ic-draw .5s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="inbox"] { animation: ic-drop .5s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="ext"] { animation: ic-ne .45s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="out"] { animation: ic-nudge .45s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="print"] { animation: ic-bob .5s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="image"] path:nth-child(3) { animation: ic-draw .55s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="file"] path:nth-child(3) { animation: ic-lift .5s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="list"] path:nth-child(2) { animation: ic-pop .45s var(--ease-out); }
:is(:is(a,button,summary,.v-row,.v-addrow,.v-chip,.v-linkrow,.act-row,.v-dim-h):is(:hover,:active),.v-shell[data-enter] [aria-current="page"]) svg.i[data-i="copy"] path:nth-child(2) { animation: ic-bob .45s var(--ease-out); }

/* sentiasa hidup perlahan */
svg.i[data-i="sparkle"] { animation: ic-shimmer 3.6s ease-in-out infinite; }
svg.i[data-i="check"] path:not(.t) { stroke-dasharray: 1; animation: ic-checkdraw .5s var(--ease-out) both; }
svg.i[data-i="warn"] { animation: ic-shake .6s var(--ease-out) both; }
@keyframes ic-lift { 40% { transform: translateY(-2.2px); } }
@keyframes ic-bob { 40% { transform: translateY(-1.6px) scale(1.05); } }
@keyframes ic-draw { from { stroke-dasharray: 24; stroke-dashoffset: 24; } to { stroke-dasharray: 24; stroke-dashoffset: 0; } }
@keyframes ic-tilt { 35% { transform: rotate(-9deg) scale(1.08); } 70% { transform: rotate(3deg); } }
@keyframes ic-rot90 { to { transform: rotate(90deg); } }
@keyframes ic-nudge { 40% { transform: translateX(3px); } }
@keyframes ic-up { 35% { transform: translateY(-3px); } 60% { transform: translateY(.6px); } }
@keyframes ic-pop { 40% { transform: scale(1.28); } }
@keyframes ic-write { 25% { transform: rotate(-12deg) translate(-1px, 1px); } 55% { transform: rotate(8deg) translate(1px, -1px); } }
@keyframes ic-twinkle { 40% { transform: scale(1.28) rotate(22deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes ic-shimmer { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.08) rotate(6deg); } }
@keyframes ic-knobA { 45% { transform: translateX(-3.2px); } }
@keyframes ic-knobB { 45% { transform: translateX(3.2px); } }
@keyframes ic-lid { 40% { transform: translate(-1px, -2px) rotate(-14deg); } }
@keyframes ic-spin { to { transform: rotate(360deg); } }
@keyframes ic-drop { 40% { transform: translateY(1.8px); } }
@keyframes ic-ne { 40% { transform: translate(2px, -2px); } }
@keyframes ic-checkdraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ic-shake { 15% { transform: translateX(-2px) rotate(-6deg); } 35% { transform: translateX(2px) rotate(6deg); } 55% { transform: translateX(-1.4px); } 75% { transform: translateX(1px); } }
.err { animation: ic-shake .5s var(--ease-out) both; }

/* ---- ilustrasi "cara ia berfungsi" hidup ---- */
.art .fl, .art .badge, .art .tw, .art .sun, .art .tile, .art .pop, .art .scan-g { transform-box: fill-box; transform-origin: center; }
.art .fl { animation: artFloat 5.6s ease-in-out infinite; } .art .f2 { animation-duration: 6.4s; animation-delay: -1.8s; } .art .f3 { animation-duration: 4.8s; animation-delay: -3s; }
@keyframes artFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.art .sun { animation: artSun 4s ease-in-out infinite; } @keyframes artSun { 50% { transform: scale(1.22); } }
.art .dr { stroke-dasharray: 1; animation: artDraw 7s var(--ease-out) calc(var(--k, 0) * .3s) infinite; }
@keyframes artDraw { 0% { stroke-dashoffset: 1; opacity: 0; } 3% { opacity: 1; } 14%, 90% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 1; opacity: 0; } }
.art .scan-g { animation: scan 2.8s var(--ease-in-out) infinite; }
.art .scan, .art .scan + path { animation: none; }
.art .tw { animation: artTwinkle 2.6s ease-in-out infinite; } .art .tw.t2 { animation-delay: -1.2s; animation-duration: 3.1s; }
@keyframes artTwinkle { 0%, 100% { transform: scale(.78) rotate(0); opacity: .75; } 50% { transform: scale(1.18) rotate(18deg); opacity: 1; } }
.art .tile { animation: artTile 4.8s var(--ease-in-out) calc(var(--k, 0) * .22s) infinite; }
@keyframes artTile { 0%, 38%, 100% { transform: scale(1); } 14% { transform: scale(1.16); } }
.art .pop { animation: artPop 7s var(--spring) calc(var(--k, 0) * .3s) infinite; }
@keyframes artPop { 0% { transform: scale(.6); opacity: 0; } 10%, 90% { transform: scale(1); opacity: 1; } 96%, 100% { transform: scale(.6); opacity: 0; } }
.art .badge { animation: artBadge 7s var(--spring) 1.6s infinite; }
@keyframes artBadge { 0% { transform: scale(0); } 9%, 90% { transform: scale(1); } 96%, 100% { transform: scale(0); } }

/* ---- logo: himpun dengan lantunan, sapuan cahaya, cincin riak, letusan bila diketik ---- */
.logo { overflow: visible; }
.logo .lg-cell { animation: lgGlow 4.4s ease-in-out calc(1.3s + var(--d) * 170ms) infinite; }
.logo.intro .lg-cell { animation: lgAssemble .95s var(--spring) calc(var(--i) * 48ms) both, lgGlow 4.4s ease-in-out calc(1.9s + var(--d) * 170ms) infinite; }
.logo .lg-cell.now { animation: lgNow 2.6s ease-in-out 1.5s infinite; }
.logo.intro .lg-cell.now { animation: lgAssemble .95s var(--spring) calc(var(--i) * 48ms) both, lgNow 2.6s ease-in-out 2s infinite; }
@keyframes lgAssemble { from { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(.2); } 60% { opacity: 1; } }
@keyframes lgGlow { 0%, 46%, 100% { transform: scale(1); fill-opacity: var(--o); } 60% { transform: scale(1.24); fill-opacity: 1; } 78% { transform: scale(.86); fill-opacity: var(--o); } }
.logo .lg-ring { fill: none; stroke: var(--accent); stroke-width: .5; transform-box: fill-box; transform-origin: center; opacity: 0; animation: lgRing 2.6s ease-out 1.5s infinite; }
@keyframes lgRing { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(2.8); opacity: 0; } }
.logo.live .lg-cell, .logo.live .lg-cell.now, .logo.live.intro .lg-cell { animation: lgWave 1.35s var(--ease-in-out) calc(var(--i) * 75ms) infinite; }
.logo.live.intro .lg-cell { animation: lgAssemble .95s var(--spring) calc(var(--i) * 48ms) both, lgWave 1.35s var(--ease-in-out) calc(1s + var(--i) * 75ms) infinite; }
@keyframes lgWave { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 35% { transform: scale(.42) rotate(-12deg); opacity: .35; } 60% { transform: scale(1.18) rotate(4deg); } }
.logo.live .lg-ring { animation-duration: 1.35s; animation-delay: 0s; }
.logo.burst .lg-cell, .logo.burst .lg-cell.now, .logo.burst.intro .lg-cell { animation: lgBurst .95s var(--ease-out) calc((6 - var(--d)) * 60ms) both; }
.logo.burst .lg-ring { animation: lgRing .9s ease-out both; }
@keyframes lgBurst { 0% { transform: scale(1); } 35% { transform: scale(1.65) rotate(10deg); fill-opacity: 1; } 100% { transform: scale(1); } }
@media (hover: hover) and (pointer: fine) { .brand:hover .logo:not(.live) .lg-cell, .b2-mark:hover .logo .lg-cell { animation: lgPing .7s var(--ease-out) calc(var(--i) * 30ms); } }

/* ---- log masuk: masuk berperingkat (sekali sahaja), butang memuat, ralat bergetar ---- */
.auth.enter .auth-side > * { animation: rise .7s var(--ease-out) both; } .auth.enter .auth-side > *:nth-child(2) { animation-delay: .08s; } .auth.enter .auth-side > *:nth-child(3) { animation-delay: .16s; } .auth.enter .auth-side > *:nth-child(4) { animation-delay: .24s; }
.auth.enter .auth-points li { animation: rise .6s var(--ease-out) calc(.34s + var(--k, 0) * .09s) both; }
.auth.enter .auth-card { animation: cardin .8s var(--ease-out) .12s both; } @keyframes cardin { from { opacity: 0; transform: translateX(26px); } }
.auth.enter .auth-card > *, .auth-card.swap > *, .auth.enter .auth-card form > *, .auth-card.swap form > * { animation: rise .55s var(--ease-out) both; }
.auth.enter .auth-card > *:nth-child(2), .auth-card.swap > *:nth-child(2) { animation-delay: .22s; }
.auth.enter .auth-card form > *:nth-child(1), .auth-card.swap form > *:nth-child(1) { animation-delay: .28s; } .auth.enter .auth-card form > *:nth-child(2), .auth-card.swap form > *:nth-child(2) { animation-delay: .34s; }
.auth.enter .auth-card form > *:nth-child(3), .auth-card.swap form > *:nth-child(3) { animation-delay: .4s; } .auth.enter .auth-card form > *:nth-child(4), .auth-card.swap form > *:nth-child(4) { animation-delay: .46s; }
@media (max-width: 1080px) { .auth.enter .auth-card { animation-name: rise; } }
.field label { transition: color .18s; } .field:focus-within label { color: var(--accent-text); }
.in { transition: border-color .15s, box-shadow .2s var(--ease-out), transform .2s var(--ease-out); } .in:focus { transform: translateY(-1px); }
.auth-card form { transition: opacity .25s; } .auth-card form.busy { opacity: .62; pointer-events: none; }
.btn.loading { position: relative; overflow: hidden; }
.btn.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .5) 50%, transparent 75%); transform: translateX(-100%); animation: sheen 1.1s linear infinite; }
@keyframes sheen { to { transform: translateX(100%); } }

/* ---- pembuka: bar kemajuan dan petunjuk kedua jika lambat (opacity asas 1; "both" menyorokkan semasa tunggu) ---- */
.b2-mark .logo { filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent)); }
.b2-mark .wm { opacity: 1; animation: rise .55s var(--ease-out) .45s both; }
.b2-bar { position: relative; width: 150px; height: 3px; border-radius: 2px; background: var(--rule); overflow: hidden; opacity: 1; animation: rise .5s var(--ease-out) .8s both; }
.b2-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: 2px; background: var(--accent-text); animation: pbar 1.3s var(--ease-in-out) infinite; }
.b2-hints { display: grid; justify-items: center; min-height: 22px; } .b2-hints .b2-hint { grid-area: 1 / 1; margin: 0; opacity: 1; }
.b2-hint.h1 { animation: rise .5s var(--ease-out) 1.2s both, fadeout .4s var(--ease-out) 6s forwards; }
.b2-hint.h2 { animation: rise .5s var(--ease-out) 6.2s both; }

/* ---- bar rangkaian nipis di atas skrin ---- */
.netbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; opacity: 0; transition: opacity .25s; overflow: hidden; }
.netbar.on { opacity: 1; }
.netbar:not(.on)::after { animation: none; }
.netbar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 34%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: netrun 1.15s var(--ease-in-out) infinite; }
@keyframes netrun { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* gerakan dikurangkan (tetapan sistem, melainkan pengguna menghidupkan gerakan penuh) */
html[data-reduce] svg.i, html[data-reduce] svg.i path, html[data-reduce] .art *, html[data-reduce] .logo *, html[data-reduce] .auth *, html[data-reduce] .err, html[data-reduce] .btn.loading::after, html[data-reduce] .netbar::after, html[data-reduce] .b2-bar::after { animation: none !important; }

/* ---- lapisan Memasuki (selepas Log masuk) ---- */
.enterov { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 30px; background: var(--bg); opacity: 0; transition: opacity .3s var(--ease-out); }
.enterov.on { opacity: 1; }
.enterov .b2-mark { transform: scale(1.1); }
.eo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; min-width: 250px; }
.eo-steps li { display: flex; align-items: center; gap: 14px; font-size: 15.5px; color: var(--ink3); transition: color .3s; }
.eo-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--rule2); color: var(--accent-ink); transition: background-color .3s, border-color .3s, transform .35s var(--spring); }
.eo-steps li.on { color: var(--ink); font-weight: 600; } .eo-steps li.on .eo-dot { border-color: var(--accent-text); border-top-color: transparent; animation: eo-spin .8s linear infinite; }
.eo-steps li.done { color: var(--ink2); } .eo-steps li.done .eo-dot { background: var(--accent); border-color: var(--accent); transform: scale(1.08); } .eo-dot svg.i { width: 14px; height: 14px; stroke-width: 2.6; }
@keyframes eo-spin { to { transform: rotate(360deg); } }
.eo-hello { margin: 0; min-height: 40px; font: 400 32px/1.1 var(--f-display); letter-spacing: -.01em; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.eo-hello.on { opacity: 1; transform: none; }
html[data-reduce] .enterov { transition-duration: .01s; } html[data-reduce] .eo-steps li.on .eo-dot { animation: none; }

/* ---- hiasan hidup di skrin log masuk (desktop): petak bulan menyala bergilir ---- */
.auth { position: relative; }
.auth-art { position: absolute; top: 44px; left: calc(50% - 400px); width: 190px; opacity: .95; pointer-events: none; display: none; }
@media (min-width: 1081px) { .auth-art { display: block; left: auto; right: calc(min(480px, 38%) + 56px); } }
.auth-art .art { max-width: 190px; }