/* ==========================================================================
   AVYO MOTION (UI v2)
   Nguyên tắc: chỉ animate transform/opacity; chuyển động phải GIẢI THÍCH thay
   đổi trạng thái; tôn trọng prefers-reduced-motion; máy yếu (data-perf="low")
   bỏ các hiệu ứng vô hạn/nặng và giữ chuyển đổi cơ bản.
   ========================================================================== */

@keyframes av-spin   { to { transform: rotate(360deg); } }
@keyframes av-ripple { from { transform: scale(0); opacity: .28; } to { transform: scale(1); opacity: 0; } }
@keyframes av-pop    { 0% { transform: scale(.6); opacity: .4; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@keyframes av-ring   { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes av-dot    { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); } 70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
@keyframes av-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes av-toast-in  { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes av-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes av-radar { 0% { transform: scale(.12); opacity: .75; } 100% { transform: scale(1); opacity: 0; } }
@keyframes av-blip  { 0%, 8% { opacity: 0; transform: scale(0); } 22% { opacity: 1; transform: scale(1.25); } 34%, 78% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }
@keyframes av-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes av-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes av-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes av-scale-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes av-draw { to { stroke-dashoffset: 0; } }
@keyframes av-bounce-drop { 0% { transform: translateY(-14px); } 55% { transform: translateY(2px); } 75% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
@keyframes av-marker-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Hiện dần theo thứ tự: style="--i:0..n" */
.av-reveal { animation: av-fade-up .6s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 60ms); }
.av-float  { animation: av-float 4.5s ease-in-out infinite; }
.av-art-float { animation: av-float 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
:root[data-perf="low"] .av-art-float { animation: none; }

/* Vẽ nét (dùng với pathLength="1" trên <path>) */
.av-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: av-draw 1s var(--ease-standard) forwards; animation-delay: var(--delay, 0s); }
.av-draw--slow { animation-duration: 1.6s; }

/* Vẽ tuyến đường trên bản đồ (path đặt pathLength="1") */
.av-route-line { fill: none; stroke: var(--color-brand); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.av-route-line--casing { stroke: #fff; stroke-width: 9; }

/* ---------- SPLASH ---------- */
.av-splash { position: fixed; inset: 0; z-index: 2000000; display: grid; place-items: center; background: var(--grad-brand); color: #fff; overflow: hidden; }
.av-splash::before, .av-splash::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); animation: av-radar 3s var(--ease-standard) infinite; }
.av-splash::before { width: 120vmax; height: 120vmax; }
.av-splash::after { width: 120vmax; height: 120vmax; animation-delay: 1.5s; }
.av-splash__logo { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; }
.av-splash__tag { font-size: 15px; font-weight: 500; letter-spacing: .02em; opacity: 0; animation: av-fade-up .7s var(--ease-spring) .9s forwards; }
.av-splash[hidden] { display: none; }
.av-splash.is-leaving { animation: av-fade-out .4s var(--ease-in) forwards; }
@keyframes av-fade-out { to { opacity: 0; visibility: hidden; } }

/* ---------- Đếm số: thay đổi mượt (JS gắn class khi cập nhật) ---------- */
.av-tick { animation: av-pop .35s var(--ease-overshoot); }

/* Marker tài xế nhấp nhô nhẹ khi đang online */
.av-marker--vehicle.is-live .av-marker__badge { animation: av-marker-bob 2.4s ease-in-out infinite; }

/* Chuyển tab admin: fade + trượt 8px */
.av-tab-panel { animation: av-fade-up .35s var(--ease-standard) both; }

/* ==========================================================================
   GIẢM CẤP
   ========================================================================== */
/* 1) Máy yếu: bỏ hiệu ứng lặp vô hạn nặng, giữ 1 vòng radar đơn giản */
:root[data-perf="low"] .av-radar__sweep,
:root[data-perf="low"] .av-radar__blip,
:root[data-perf="low"] .av-splash::before,
:root[data-perf="low"] .av-splash::after,
:root[data-perf="low"] .av-marker--vehicle.is-live .av-marker__badge { animation: none; }
:root[data-perf="low"] .av-radar__ring:nth-child(n+2) { display: none; }
:root[data-perf="low"] .av-radar__blip { opacity: 1; transform: scale(1); }
:root[data-perf="low"] .av-float { animation: none; }
/* Giảm bóng nhiều lớp/glow; KHÔNG đụng nút viền/kính vì chúng dùng box-shadow inset làm đường viền */
:root[data-perf="low"] .av-btn:not(.av-btn--secondary):not(.av-btn--outline):not(.av-btn--ghost):not(.av-btn--glass),
:root[data-perf="low"] .av-fab { box-shadow: var(--shadow-1); }

/* 2) Người dùng bật "giảm chuyển động" ở hệ điều hành */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .av-radar__ring, .av-radar__sweep, .av-marker__pulse, .av-fab--sos::after { opacity: 0; }
  .av-draw { stroke-dashoffset: 0; }
  .av-radar__blip { opacity: 1; transform: scale(1); }
}

/* Splash tĩnh trong HTML (index.html / driver.html): bỏ qua khi đã xem trong phiên; tự biến mất sau 6s nếu JS lỗi */
.no-splash #avSplash { display: none; }#avSplash { animation: av-splash-failsafe .01s linear 6s forwards; }@keyframes av-splash-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }.av-splash__word { font-size: 44px; font-weight: 800; letter-spacing: -.02em; color: #fff; animation: av-fade-up .7s var(--ease-spring) .35s both; }