/* Sync365 · v14: log masuk yang lebih premium. Cahaya aurora yang tetap (bukan denyutan), sorotan mengikut tetikus, tajuk yang naik perkataan demi perkataan dengan garis tulisan tangan,
   garis aksen di bawah medan, kilauan butang, dan butang "Pasang aplikasi" yang bergerak. Gerakan: transform dan opacity (garis dan cincin menggunakan stroke/box-shadow ringan).
   Kurangkan gerakan: html[data-reduce] dan prefers-reduced-motion memaparkan keadaan akhir yang statik. */

/* ---- sebelah gelap: aurora ---- */
.auth-side { isolation: isolate; background: var(--deep); }
.auth-side::after { content: ""; position: absolute; inset: -25% -18%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 34% at 78% 14%, rgba(44, 240, 201, .2), transparent 70%), radial-gradient(34% 38% at 10% 86%, rgba(3, 96, 78, .6), transparent 72%), radial-gradient(26% 26% at 52% 52%, rgba(44, 240, 201, .07), transparent 70%); }
.auth-side > .auth-spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 40%), rgba(44, 240, 201, .11), transparent 62%); }
.auth-side:hover > .auth-spot { opacity: 1; }
.auth.enter .auth-side > .auth-spot, .auth.enter .auth-side > .ia-btn { animation: none; }

/* ---- tajuk: perkataan naik satu demi satu, garis tulisan tangan dilukis di bawah frasa beraksen ---- */
.display .wd { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .04em .05em .18em; margin: -.04em -.05em -.18em; }
.display .wd > span { display: inline-block; }
.auth.enter .display .wd > span { animation: wd-up .9s var(--ease-out) calc(.12s + var(--w) * 80ms) both; }
@keyframes wd-up { from { transform: translateY(115%); } }
.dl-em { position: relative; display: inline-block; }
.ul-dr { position: absolute; left: 0; bottom: .02em; width: 100%; height: .2em; overflow: visible; pointer-events: none; }
.ul-dr path { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .85; }
.auth.enter .ul-dr path { stroke-dashoffset: 1; animation: ul-draw 1s var(--ease-out) 1.2s forwards; }
@keyframes ul-draw { to { stroke-dashoffset: 0; } }
.auth-side .lead2 { font-size: 18px; letter-spacing: .01em; color: var(--ink2); }

/* ---- bingkai seni: condongan halus mengikut tetikus ---- */
.hero-frame { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--ease-out); }

/* ---- butang Pasang aplikasi ---- */
.auth-side > .ia-btn { position: absolute; top: 24px; right: 28px; z-index: 3; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px 0 11px; border-radius: 99px; color: #eff5f4; font: 700 14px var(--f-ui); text-decoration: none; white-space: nowrap;
  background: rgba(190, 235, 228, .07); box-shadow: inset 0 0 0 1px rgba(44, 240, 201, .4), 0 0 28px -6px rgba(44, 240, 201, .5); transition: background-color .2s ease, box-shadow .25s ease, transform .16s var(--ease-out); animation: ia-in .7s var(--ease-out) 1.1s both; }
@keyframes ia-in { from { opacity: 0; transform: translateY(-8px) scale(.95); } }
.auth-side > .ia-btn:hover { background: rgba(44, 240, 201, .16); box-shadow: inset 0 0 0 1px rgba(44, 240, 201, .8), 0 0 34px -4px rgba(44, 240, 201, .65); transform: translateY(-1px); } .auth-side > .ia-btn:active { transform: scale(.97); }
.auth-side > .ia-btn:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px rgba(44, 240, 201, .32); }
.ia-i { flex: none; width: 22px; height: 22px; color: var(--accent); overflow: visible; }
.ia-ph, .ia-nt, .ia-ar path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ia-ar { transform-box: fill-box; } .auth-side > .ia-btn:hover .ia-ar, .auth-side > .ia-btn:focus-visible .ia-ar { animation: ia-drop .7s var(--ease-out); }
@keyframes ia-drop { from { transform: translateY(-6px); opacity: 0; } }
@media (max-width: 1080px) { .auth-side > .ia-btn { top: calc(20px + env(safe-area-inset-top)); right: 18px; height: 38px; padding: 0 13px 0 9px; font-size: 13px; } }

/* ---- borang: garis aksen tumbuh di bawah medan yang difokus, kilauan pada butang utama, bar kemajuan semasa menghantar ---- */
.af-box::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; border-radius: 1px; background: var(--accent); transform: scaleX(0); transition: transform .38s var(--ease-out); pointer-events: none; }
.af-box:focus-within::after { transform: scaleX(1); } .af.bad .af-box::after { background: var(--danger); transform: scaleX(1); }
.ab { overflow: hidden; }
.ab::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%); transform: translateX(-130%); pointer-events: none; }
.ab:hover::before { animation: ab-shine .9s var(--ease-out); } @keyframes ab-shine { to { transform: translateX(130%); } }
.ab.busy::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 34%; background: var(--accent); animation: ab-ind 1.2s ease-in-out infinite; }
@keyframes ab-ind { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.dm-btn:hover { background: var(--accent-tint); }

/* ---- kurangkan gerakan ---- */
html[data-reduce] .auth-side > .ia-btn, html[data-reduce] .ia-ar, html[data-reduce] .display .wd > span, html[data-reduce] .ul-dr path, html[data-reduce] .ab::before, html[data-reduce] .ab.busy::after { animation: none !important; }
html[data-reduce] .hero-frame { transform: none; }
@media (prefers-reduced-motion: reduce) { .auth-side > .ia-btn, .ia-ar, .display .wd > span, .ul-dr path, .ab::before { animation: none !important; } .hero-frame { transform: none; } }