/* Bottom bars (.nav homepage dock, .tabs in the app layer): Ride, Food and Shop sit on pale red tiles;
   the open tab is solid red with a white icon that pops in (van drives, bowl lifts, basket wobbles). */
:root{--tile:#FEE2E2;--tile-ink:#B91C1C}
.nav a[href="#ride"],.nav a[href="#food"],.nav a[href="#shop"]{background:var(--tile);color:var(--tile-ink)}
.nav a[aria-current="page"]{background:var(--coral);color:#fff}
.tabs::before{background:var(--coral);background-clip:padding-box}
.tabs a[data-t="ride"],.tabs a[data-t="food"],.tabs a[data-t="shop"]{color:var(--tile-ink)}
.tabs a[data-t="ride"]::after,.tabs a[data-t="food"]::after,.tabs a[data-t="shop"]::after{content:"";position:absolute;z-index:-1;top:7px;left:2px;right:2px;height:50px;border-radius:16px;background:var(--tile);transition:opacity 260ms var(--out)}
.tabs a[aria-current="page"]{color:#fff}
.tabs a[aria-current="page"]::after{opacity:0}
.tabs a{transition:color 260ms var(--out),transform 160ms var(--out)}
.nav a:active,.tabs a:active{transform:scale(.92)}
.nav a .ic,.tabs a .ic{transition:transform 260ms var(--out)}
.nav a[aria-current="page"] .ic,.tabs a[aria-current="page"] .ic{animation:tpn-pop 480ms cubic-bezier(.34,1.56,.64,1)}
.tabs a[data-t="ride"][aria-current="page"] .ic{animation:tpn-pop 480ms cubic-bezier(.34,1.56,.64,1),tpn-drive 700ms 120ms ease-out}
.tabs a[data-t="food"][aria-current="page"] .ic{animation:tpn-pop 480ms cubic-bezier(.34,1.56,.64,1),tpn-lift 650ms 120ms ease-out}
.tabs a[data-t="shop"][aria-current="page"] .ic{animation:tpn-pop 480ms cubic-bezier(.34,1.56,.64,1),tpn-wob 600ms 120ms ease-out}
@keyframes tpn-pop{0%{transform:scale(.7)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes tpn-drive{0%,100%{translate:0}35%{translate:4px}70%{translate:-1px}}
@keyframes tpn-lift{0%,100%{translate:0 0}40%{translate:0 -4px}75%{translate:0 1px}}
@keyframes tpn-wob{0%,100%{rotate:0deg}30%{rotate:-10deg}60%{rotate:8deg}}
@media (hover:hover){.nav a[href^="#"]:not([aria-current]):hover .ic,.tabs a:not([aria-current]):hover .ic{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.nav a .ic,.tabs a .ic{animation:none!important;transition:none}.nav a:active,.tabs a:active{transform:none}}