/* ZAA TRUCK — harakatlanuvchi ikonkalar va paydo bo'lish animatsiyalari (assets/motion.js bilan) */

/* ---------- Animatsiyali ikonkalar ---------- */
.ai { display: inline-grid; place-items: center; width: 100%; height: 100%; }
.ai svg { width: 100%; height: 100%; overflow: visible; }
.ai * { transform-box: fill-box; transform-origin: center; }
.ai-paused * { animation-play-state: paused !important; }

/* yuk mashinasi: g'ildirak aylanadi, kuzov silkinadi, tezlik chiziqlari */
.ai-truck .body { animation: ai-bump .5s ease-in-out infinite; }
.ai-truck .wheel { animation: ai-spin .6s linear infinite; }
.ai-truck .speed { animation: ai-speed 1s linear infinite; }
.ai-truck .speed:nth-of-type(2) { animation-delay: .33s; }
.ai-truck .speed:nth-of-type(3) { animation-delay: .66s; }
@keyframes ai-bump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.6px); } }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-speed { 0% { transform: translateX(4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(-6px); opacity: 0; } }

/* quti: tebranadi, soyasi bilan */
.ai-box .lid { animation: ai-float 2.4s ease-in-out infinite; }
.ai-box .shadow { animation: ai-shadow 2.4s ease-in-out infinite; }
@keyframes ai-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes ai-shadow { 0%, 100% { transform: scaleX(1); opacity: .35; } 50% { transform: scaleX(.75); opacity: .18; } }

/* qo'ng'iroq: chayqaladi */
.ai-bell .cup { transform-origin: 50% 0%; animation: ai-ring 2.8s ease-in-out infinite; }
.ai-bell .clap { animation: ai-clap 2.8s ease-in-out infinite; }
@keyframes ai-ring { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(14deg); } 70% { transform: rotate(-12deg); } 76% { transform: rotate(8deg); } 82% { transform: rotate(-5deg); } 88% { transform: rotate(2deg); } }
@keyframes ai-clap { 0%, 60%, 100% { transform: translateX(0); } 66% { transform: translateX(-1.5px); } 72% { transform: translateX(1.5px); } 78% { transform: translateX(-1px); } }

/* chat: yozayotgan nuqtalar */
.ai-chat .dot { animation: ai-typing 1.2s ease-in-out infinite; }
.ai-chat .dot:nth-of-type(2) { animation-delay: .15s; }
.ai-chat .dot:nth-of-type(3) { animation-delay: .3s; }
@keyframes ai-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-2px); opacity: 1; } }

/* qalqon: belgi chiziladi */
.ai-shield .tick { stroke-dasharray: 16; animation: ai-draw 2.6s ease-in-out infinite; }
.ai-shield .glow { animation: ai-glow 2.6s ease-in-out infinite; }
@keyframes ai-draw { 0% { stroke-dashoffset: 16; } 35%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 16; } }
@keyframes ai-glow { 0%, 100% { opacity: 0; transform: scale(.9); } 45% { opacity: .35; transform: scale(1.12); } }

/* hujjat: satrlar yoziladi */
.ai-doc .ln { stroke-dasharray: 10; animation: ai-write 3s ease-in-out infinite; }
.ai-doc .ln:nth-of-type(2) { animation-delay: .25s; }
.ai-doc .ln:nth-of-type(3) { animation-delay: .5s; }
@keyframes ai-write { 0% { stroke-dashoffset: 10; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 10; } }

/* qog'oz samolyot: uchib ketadi va qaytadi */
.ai-send .plane { animation: ai-fly 3s ease-in-out infinite; }
@keyframes ai-fly { 0%, 15% { transform: translate(0, 0) rotate(0); opacity: 1; } 45% { transform: translate(7px, -7px) rotate(-8deg); opacity: 0; } 46% { transform: translate(-7px, 7px); opacity: 0; } 75%, 100% { transform: translate(0, 0); opacity: 1; } }

/* foydalanuvchilar: navbat bilan "puls" */
.ai-users .u1 { animation: ai-pop 2.4s ease-in-out infinite; }
.ai-users .u2 { animation: ai-pop 2.4s ease-in-out infinite .4s; }
@keyframes ai-pop { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.12); } 40% { transform: scale(1); } }

/* yulduz: aylanib yaltiraydi */
.ai-star .st { animation: ai-twinkle 3s ease-in-out infinite; }
.ai-star .sp { animation: ai-sparkle 3s ease-in-out infinite; }
.ai-star .sp:nth-of-type(3) { animation-delay: .5s; }
@keyframes ai-twinkle { 0%, 70%, 100% { transform: rotate(0) scale(1); } 80% { transform: rotate(72deg) scale(1.1); } 90% { transform: rotate(72deg) scale(1); } }
@keyframes ai-sparkle { 0%, 60%, 100% { transform: scale(0); opacity: 0; } 75% { transform: scale(1); opacity: 1; } }

/* mikrofon: tovush to'lqinlari */
.ai-mic .wave { animation: ai-wave 1.6s ease-out infinite; opacity: 0; }
.ai-mic .wave:nth-of-type(2) { animation-delay: .4s; }
@keyframes ai-wave { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }

/* manzil belgisi: tushib, to'lqin chiqaradi */
.ai-pin .pin { animation: ai-drop 2.6s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.ai-pin .ring { animation: ai-ripple 2.6s ease-out infinite; }
@keyframes ai-drop { 0%, 100% { transform: translateY(0); } 10% { transform: translateY(-4px); } 22% { transform: translateY(0); } }
@keyframes ai-ripple { 0%, 18% { transform: scale(.4); opacity: 0; } 25% { opacity: .8; } 60%, 100% { transform: scale(1.6); opacity: 0; } }

/* foiz: tanga aylanadi */
.ai-coin .coin { animation: ai-flip 3s ease-in-out infinite; }
@keyframes ai-flip { 0%, 60%, 100% { transform: rotateY(0); } 80% { transform: rotateY(180deg); } }

/* globus: meridian aylanadi */
.ai-globe .mer { animation: ai-meridian 4s linear infinite; }
@keyframes ai-meridian { 0% { transform: scaleX(1); } 25% { transform: scaleX(.2); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(-.2); } 100% { transform: scaleX(1); } }

/* yo'nalish: chiziq oqadi */
.ai-route .flow { stroke-dasharray: 3 3; animation: ai-flow 1s linear infinite; }
.ai-route .end { animation: ai-pop 2s ease-in-out infinite; }
@keyframes ai-flow { to { stroke-dashoffset: -6; } }

/* kamera: chaqnaydi */
.ai-camera .flash { animation: ai-flash 2.8s ease-in-out infinite; opacity: 0; }
.ai-camera .lens { animation: ai-pop 2.8s ease-in-out infinite; }
@keyframes ai-flash { 0%, 70%, 100% { opacity: 0; } 75% { opacity: 1; } 82% { opacity: 0; } }

/* ---------- Paydo bo'lish (scroll reveal) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .06s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .12s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .18s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .24s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .3s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .36s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .42s; }
.reveal-stagger.in > *:nth-child(n+9) { transition-delay: .48s; }

/* Kartochkalar ustiga kelganda ikonka "uyg'onadi" */
.lift { transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(21, 42, 77, .35); }

@media (prefers-reduced-motion: reduce) {
  .ai *, .ai-truck .wheel, .route-truck, .route-flow { animation: none !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* toj: yuqoriga ko'tarilib, tosh yaltiraydi */
.ai-crown .cr { animation: ai-float 2.6s ease-in-out infinite; }
.ai-crown .sp { animation: ai-sparkle 2.6s ease-in-out infinite; }
.ai-crown .gem { animation: ai-pop 2.6s ease-in-out infinite; }

/* ---------- Avtomagistral chizig'i (yo'l + harakatlanuvchi mashinalar) ---------- */
.road { position: relative; height: 84px; overflow: hidden; background:
  linear-gradient(#C9D1DD, #C9D1DD) 0 10px / 100% 2px no-repeat,
  linear-gradient(#C9D1DD, #C9D1DD) 0 calc(100% - 10px) / 100% 2px no-repeat,
  linear-gradient(180deg, #E3E8EF, #D9DFE8); }
.road::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px;
  background: repeating-linear-gradient(90deg, #fff 0 30px, transparent 30px 56px); background-size: 56px 3px; animation: road-lane 1.1s linear infinite; }
.road.dark { background: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)) 0 10px / 100% 2px no-repeat,
  linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)) 0 calc(100% - 10px) / 100% 2px no-repeat, #0F2140; }
.road.dark::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 30px, transparent 30px 56px); background-size: 56px 3px; }
@keyframes road-lane { to { background-position: -56px 0; } }
.road-car { position: absolute; width: 104px; left: -130px; will-change: transform; }
.road-car svg { display: block; width: 100%; height: auto; }
.road-car.lane-a { bottom: 12px; animation: road-right 16s linear infinite; }
.road-car.lane-b { top: 11px; width: 92px; animation: road-left 13s linear infinite; }
.road-car.lane-b svg { transform: scaleX(-1); }
.road-car.d2 { animation-delay: -6s; } .road-car.d3 { animation-delay: -10s; } .road-car.d4 { animation-delay: -3s; }
@keyframes road-right { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 260px)); } }
@keyframes road-left { from { transform: translateX(calc(100vw + 260px)); } to { transform: translateX(0); } }
.road-car .wheelfix { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .road::before, .road-car { animation: none !important; } .road-car.lane-a { left: 12%; } .road-car.lane-b { left: 62%; } }

/* ---------- Xarita naqshi (yo'nalishlar va shahar nuqtalari) ---------- */
.map-bg { position: relative; isolation: isolate; }
.map-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220' viewBox='0 0 320 220'%3E%3Cg fill='none' stroke='%23E8772E' stroke-opacity='.35' stroke-width='1.4' stroke-dasharray='4 6'%3E%3Cpath d='M20 180 C 80 120, 120 150, 170 90 S 260 40, 310 60'/%3E%3Cpath d='M10 40 C 70 70, 110 20, 160 50 S 240 140, 300 160'/%3E%3C/g%3E%3Cg fill='%23E8772E' fill-opacity='.45'%3E%3Ccircle cx='20' cy='180' r='3'/%3E%3Ccircle cx='170' cy='90' r='3'/%3E%3Ccircle cx='310' cy='60' r='3'/%3E%3Ccircle cx='160' cy='50' r='2.5'/%3E%3Ccircle cx='300' cy='160' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 220px; }
.map-bg.light::after { opacity: .35; }

/* ---------- Ichki sahifalar: banner sarlavha ---------- */
.page-banner { position: relative; overflow: hidden; background: linear-gradient(135deg, #0C1A33, #1D3864); color: #fff; border-radius: 24px; padding: 30px 32px; margin-top: 26px; }
.page-banner h1, .page-banner h2 { color: #fff; }
.page-banner p { color: rgba(255,255,255,.72) !important; }
.page-banner .crumbs, .page-banner .crumbs a { color: rgba(255,255,255,.6); }
.page-banner .crumbs a:hover { color: #fff; }
.page-banner .banner-art { position: absolute; right: 28px; bottom: -6px; width: 150px; height: 150px; color: rgba(255,255,255,.9); opacity: .9; pointer-events: none; }
.page-banner .banner-art .ai { width: 100%; height: 100%; }
.page-banner > * { position: relative; z-index: 1; }
@media (max-width: 720px) { .page-banner { padding: 22px 18px; border-radius: 20px; } .page-banner .banner-art { width: 90px; height: 90px; right: 12px; opacity: .14; } .page-banner[style] { padding-right: 18px !important; } }