/* Lightweight illustrative motion; all actual app screenshots remain untouched. */
.hero-art.motion-ready { height:650px; padding-bottom:100px; }
.motion-ready .floating-card { bottom:145px; }
.motion-ready .art-footnote { bottom:58px; font-size:14px; padding:0 8px; }
.motion-tools { position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:7px; z-index:5; }
.motion-scenes { display:flex; padding:5px; gap:3px; border:1px solid #cbd9c9; background:#fff; border-radius:30px; }
.motion-scenes button,.motion-toggle { padding:9px 12px; font-size:14px; line-height:1.4; border-radius:24px; background:transparent; font-weight:700; white-space:nowrap; }
.motion-scenes button[aria-pressed=true] { background:#163c33; color:white; }
.motion-toggle { background:#edf3e6; border:1px solid #cbd9c9; }
.motion-ready .hero-phone { animation:phone-drift 7s ease-in-out infinite; }
.motion-ready .floating-card { animation:card-drift 6s ease-in-out infinite; }
.motion-ready .orbit-two { animation:orbit-breathe 6s ease-in-out infinite; }
.motion-ready .you-dot { animation:location-pulse 2.5s ease-out infinite; }
.motion-ready .floating-sync .icon { animation:sync-turn 5s ease-in-out infinite; }
.hero-map::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 40%,#b1e89666 49%,#6daf7522 51%,transparent 60%); transform:translateY(-100%); }
.motion-ready[data-scene="0"] .hero-map::after { animation:map-scan 6s ease-in-out infinite; }
.motion-phone-scene { position:absolute; inset:32px 0 43px; z-index:4; background:linear-gradient(155deg,#f4f8ee,#e0edda); padding:23px 16px; display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.motion-phone-scene[hidden] { display:none; }
.motion-scene-label { font-size:11px; letter-spacing:.08em; color:#42584c; font-weight:700; }
.motion-phone-scene h3 { font-size:23px; line-height:1.4; }
.motion-demo-card { background:linear-gradient(120deg,#16805a,#163c33); padding:20px 16px; border-radius:15px; color:#fff; box-shadow:0 14px 24px #163c3325; position:relative; overflow:hidden; }
.motion-demo-card small { display:block; font-size:10px; letter-spacing:.08em; color:#e2f5d6; }
.motion-demo-card strong { display:block; font-size:20px; margin:15px 0; }
.motion-demo-card span { font-size:12px; letter-spacing:.1em; }
.motion-demo-card::after { content:""; position:absolute; inset:-60% -100%; background:linear-gradient(100deg,transparent 43%,#ffffff30 50%,transparent 57%); animation:card-sheen 5s ease-in-out infinite; pointer-events:none; }
.motion-tap { display:flex; align-items:center; justify-content:center; gap:13px; min-height:55px; }
.motion-tap svg { width:36px; height:36px; }
.motion-tap .tap-wave { color:#147a53; animation:tap-signal 2s ease-in-out infinite; }
.motion-scene-note { font-size:13px; line-height:1.7; color:#354d41; margin-top:auto; }
.motion-route { position:relative; padding-left:31px; display:grid; gap:20px; }
.motion-route::before { content:""; position:absolute; top:8px; bottom:15px; left:9px; width:3px; background:#afce9d; }
.motion-stop { position:relative; background:white; border:1px solid #cbdcc2; padding:12px; border-radius:12px; }
.motion-stop::before { content:""; position:absolute; left:-28px; top:20px; width:11px; height:11px; background:#147a53; border:3px solid #e8f3df; border-radius:50%; }
.motion-stop strong { display:block; font-size:14px; }
.motion-stop span { display:block; font-size:12px; color:#42584c; margin-top:3px; }
.motion-route-car { position:absolute; left:-1px; top:0; z-index:2; color:#163c33; background:#d8f596; border-radius:7px; padding:2px; animation:route-travel 7s ease-in-out infinite; }
.motion-route-car svg { width:22px; height:22px; }
.motion-enabled .reveal-on-scroll.is-revealed { animation:section-arrive .65s ease-out both; }
.motion-enabled .benefit .nfc-rings { animation:orbit-breathe 3s ease-in-out infinite; }
.motion-enabled .road-car { animation:road-cruise 6s ease-in-out infinite; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after,
.motion-suspended *, .motion-suspended *::before, .motion-suspended *::after { animation-play-state:paused!important; }
@keyframes phone-drift { 0%,100% { transform:translateY(0) rotate(6deg); } 50% { transform:translateY(-10px) rotate(4deg); } }
@keyframes card-drift { 0%,100% { transform:translateY(0) rotate(-8deg); } 50% { transform:translateY(-9px) rotate(-5deg); } }
@keyframes orbit-breathe { 0%,100% { scale:1; } 50% { scale:1.045; } }
@keyframes location-pulse { 0%,100% { box-shadow:0 0 0 5px #236adb22; } 65% { box-shadow:0 0 0 19px #236adb00; } }
@keyframes sync-turn { 0%,60% { transform:rotate(0); } 90%,100% { transform:rotate(360deg); } }
@keyframes map-scan { 0%,15% { transform:translateY(-100%); } 75%,100% { transform:translateY(100%); } }
@keyframes card-sheen { 0%,20% { transform:translateX(-40%); } 75%,100% { transform:translateX(40%); } }
@keyframes tap-signal { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(1.15); } }
@keyframes route-travel { 0%,10% { transform:translateY(4px); } 70%,100% { transform:translateY(113px); } }
@keyframes road-cruise { 0%,100% { translate:0 0; } 50% { translate:0 -35px; } }
@keyframes section-arrive { from { transform:translateY(22px); } to { transform:translateY(0); } }
@media(max-width:1100px) { .hero-art.motion-ready { transform:none; margin-left:0; } }
@media(min-width:601px) and (max-width:900px) { .hero { grid-template-columns:1fr; } .hero-art.motion-ready { width:min(540px,100%); margin:15px auto 0; } }
@media(max-width:600px) {
 .hero-art.motion-ready { height:580px; padding-bottom:105px; }
 .motion-ready .floating-card { bottom:132px; }
 .motion-ready .art-footnote { bottom:57px; left:0; right:0; font-size:13px; }
 .motion-scenes button,.motion-toggle { font-size:13px; padding:8px 9px; }
 .motion-tools { gap:5px; }
 .motion-phone-scene { padding:16px 14px; gap:12px; }
 .motion-phone-scene h3 { font-size:21px; }
 .motion-demo-card { padding:15px 13px; }
 .motion-demo-card strong { margin:12px 0; font-size:18px; }
 .motion-tap { min-height:42px; }
 .motion-route { gap:16px; }
}
@media(prefers-reduced-motion:reduce) { .motion-enabled *, .motion-enabled *::before, .motion-enabled *::after { animation:none!important; transition:none!important; } }
.motion-ready:not([data-scene="0"]) .floating-card { visibility:hidden; }
.motion-offscreen *, .motion-offscreen *::before, .motion-offscreen *::after { animation-play-state:paused!important; }
.motion-toggle:disabled { cursor:default; opacity:1; color:#42584c; }
.motion-ready:not([data-scene="0"]) .floating-sync { visibility:hidden; }
.motion-phone-scene { padding:18px 14px; gap:10px; }
.motion-phone-scene h3 { font-size:21px; line-height:1.3; flex-shrink:0; }
.motion-demo-card { flex-shrink:0; padding:16px 13px; }
.motion-demo-card strong { font-size:18px; margin:12px 0; }
.motion-tap { min-height:36px; flex-shrink:0; }
@media(max-width:600px) {
 .motion-phone-scene { padding:14px 12px; gap:8px; }
 .motion-demo-card { padding:12px; }
 .motion-tap { min-height:30px; }
 .motion-tap svg { width:28px; height:28px; }
 .motion-scene-note { font-size:12px; }
}
@media(max-width:600px) { .motion-ready .art-caption { display:none; } }