/* PlugLife motion (see anim.js). Only active when <html class="anim">; motion only with prefers-reduced-motion: no-preference. */
/* Skeletons (static) */
.anim .skel{position:relative;overflow:hidden;pointer-events:none}
.anim .skel i{display:block;height:14px;border-radius:7px;background:#E6EEEE;margin:8px 0;width:70%}
.anim .skel i:first-child{height:18px;width:55%}.anim .skel i.s{width:40%}
.anim .skel.hero-s{min-height:110px;background:linear-gradient(135deg,#CFE7E4,#E3F1EF)}
.anim .skel.hero-s i{background:rgba(255,255,255,.6)}
/* Send to car checkmark */
.anim .tesla{position:relative}
.anim .tesla.sent svg{display:none}
.anim .tesla.sent::before{content:"✓";display:inline-block;width:20px;text-align:center;font-weight:800;font-size:17px;line-height:1;color:#5EEAD4;flex:none}
.anim .yours .ystop{position:relative}
.anim .yours .ystop.landed::after{content:"";position:absolute;inset:0 -8px;border-radius:12px;background:#FEF3C7;z-index:-1;opacity:0}
.anim .yours .ys{position:relative;z-index:0}

@media (prefers-reduced-motion:no-preference){
@keyframes pl-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pl-pop{0%{opacity:0;transform:scale(.4) rotate(-20deg)}70%{opacity:1;transform:scale(1.12) rotate(4deg)}100%{opacity:1;transform:none}}
@keyframes pl-fade{from{opacity:0}to{opacity:1}}
@keyframes pl-chip{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:none}}
@keyframes pl-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes pl-pulse{0%{transform:scale(1)}35%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes pl-ring{0%{opacity:.7;transform:scale(.8)}100%{opacity:0;transform:scale(1.35)}}
@keyframes pl-check{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:none}}
@keyframes pl-ring-b{0%{opacity:.85;transform:none}100%{opacity:0;transform:scale(1.05,1.45)}}
@keyframes pl-flash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
/* page sections rise in (fill: backwards only, so no lasting stacking contexts) */
.anim #app>*{animation:pl-rise .26s cubic-bezier(.2,.8,.2,1) backwards}
.anim #app>*:nth-child(2){animation-delay:.04s}.anim #app>*:nth-child(3){animation-delay:.08s}.anim #app>*:nth-child(4){animation-delay:.12s}.anim #app>*:nth-child(n+5){animation-delay:.16s}
.anim .skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:pl-shimmer 1.2s ease-in-out infinite}
/* popups rise in; star pops; chips stagger */
.anim .leaflet-popup-content-wrapper{animation:pl-rise .24s cubic-bezier(.2,.8,.2,1) backwards}
.anim .pstar svg{animation:pl-pop .38s cubic-bezier(.2,.8,.2,1) .05s backwards}
.anim .pstar b{animation:pl-fade .25s .2s backwards}
.anim .apill{animation:pl-chip .24s cubic-bezier(.2,.8,.2,1) backwards}
.anim .apill:nth-child(1){animation-delay:.12s}.anim .apill:nth-child(2){animation-delay:.15s}.anim .apill:nth-child(3){animation-delay:.18s}.anim .apill:nth-child(4){animation-delay:.21s}.anim .apill:nth-child(5){animation-delay:.24s}.anim .apill:nth-child(6){animation-delay:.27s}.anim .apill:nth-child(n+7){animation-delay:.3s}
.anim .pc-sum{animation:pl-rise .26s .3s backwards}
.anim .amen>div{animation:pl-chip .24s cubic-bezier(.2,.8,.2,1) backwards}
.anim .amen>div:nth-child(2){animation-delay:.03s}.anim .amen>div:nth-child(3){animation-delay:.06s}.anim .amen>div:nth-child(4){animation-delay:.09s}.anim .amen>div:nth-child(5){animation-delay:.12s}.anim .amen>div:nth-child(6){animation-delay:.15s}.anim .amen>div:nth-child(n+7){animation-delay:.18s}
.anim .badge.xl{animation:pl-pop .38s cubic-bezier(.2,.8,.2,1) .1s backwards}
/* Send to car */
.anim .tesla.sent{animation:pl-pulse .32s ease-out}
.anim .tesla.sent::before{animation:pl-check .3s cubic-bezier(.2,.8,.2,1)}
.anim .tesla::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #2DD4BF;opacity:0;pointer-events:none}
.anim .tesla.sent::after{animation:pl-ring-b .45s ease-out}
/* new stop: highlight flash; new stop pin ring */
.anim .yours .ystop.landed::after{animation:pl-flash 1.1s ease-out}
.anim .pin.stop.new::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid #F59E0B;opacity:0;animation:pl-ring .6s ease-out .1s}
/* tactile press */
.anim button:not(:disabled):active{transition:transform .1s}
}