/* The way into the dashboard (account.html): the header's Dashboard button on every storefront page, and
   the dashboard car (js/dashboard-car.js), NOT DEAD YET as a flat cartoon sticker parked at the bottom left. */

/* ---------- the header button (top right; on phones beside the menu) ---------- */
.utility-nav .nav-dashboard,
.header-dashboard { align-items: center; border: 1px solid var(--orange); color: var(--ink); display: inline-flex; font-weight: 700; letter-spacing: .08em; line-height: 1; padding: .5rem .75rem; text-transform: uppercase; transition: background 180ms ease, color 180ms ease; }
.utility-nav .nav-dashboard::after { display: none; }
.utility-nav .nav-dashboard:hover, .utility-nav .nav-dashboard:focus-visible,
.header-dashboard:hover, .header-dashboard:focus-visible { background: var(--orange); color: var(--black); }
.header-dashboard { display: none; }
@media (max-width: 900px) {
  .site-header { column-gap: .85rem; grid-template-columns: 1fr auto auto; }
  .header-dashboard { display: inline-flex; font-size: .62rem; justify-self: end; min-height: 2.25rem; padding: .45rem .65rem; }
}

/* ---------- the dashboard car ---------- */
.dash-car { align-items: center; bottom: calc(.55rem + env(safe-area-inset-bottom, 0px)); color: var(--ink); display: flex; flex-direction: column; left: calc(var(--gutter, 1rem) + env(safe-area-inset-left, 0px)); position: fixed; text-decoration: none; transition: opacity 220ms ease, visibility 220ms ease; -webkit-tap-highlight-color: transparent; width: clamp(7.75rem, 12.5vw, 12.25rem); z-index: 60; }
.dash-car__ride { display: block; transform-origin: 50% 100%; width: 100%; }
/* backed out of the way while you read (js: scrolling down); it rolls back in on scroll up or at the page end */
.dash-car { transition: opacity 220ms ease, visibility 220ms ease, transform 520ms cubic-bezier(.34, 0, .2, 1); }
.dash-car.is-away { pointer-events: none; transform: translateX(calc(-100% - var(--gutter, 1rem) - 1.5rem)); }
.dash-car.is-rolling .dash-car__spin { animation: dash-car-roll-back 520ms cubic-bezier(.34, 0, .2, 1) both; }
.dash-car.is-rolling:not(.is-away) .dash-car__spin { animation-name: dash-car-roll-in; }
.dash-car__svg { display: block; height: auto; overflow: visible; width: 100%; }
.dash-car__label { background: var(--orange); border: 2px solid var(--black); box-shadow: 0 0 0 2px var(--ink); color: var(--black); font-size: .6rem; font-weight: 800; letter-spacing: .12em; line-height: 1; margin-top: -.1rem; padding: .4rem .6rem .38rem; text-transform: uppercase; transform: rotate(-2deg); transition: background 180ms ease, transform 180ms ease; white-space: nowrap; }
.dash-car:focus-visible { outline: none; }
.dash-car:focus-visible .dash-car__label { outline: 2px solid var(--ink); outline-offset: 3px; }
body:has(.mobile-menu[open]) .dash-car { opacity: 0; visibility: hidden; }

/* the parts that move */
.dash-car__spin, .dash-car__puffs circle { transform-box: fill-box; transform-origin: center; }
.dash-car__body { transform-origin: 50% 90%; }
.dash-car__beam { opacity: 0; transition: opacity 260ms ease; }
.dash-car__speed { opacity: 0; }
.dash-car__puffs circle { animation: dash-car-puff 6.5s ease-out infinite; opacity: 0; }
.dash-car__puffs circle:nth-child(2) { animation-delay: .12s; }
.dash-car__puffs circle:nth-child(3) { animation-delay: .24s; }
.dash-car__body { animation: dash-car-idle 6.5s ease-in-out infinite; }
.dash-car__charm { animation: dash-car-charm 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% -120%; }

/* hover or keyboard focus: the engine revs, the lights come on */
@media (hover: hover) {
  .dash-car:hover .dash-car__body { animation: dash-car-rev 120ms linear infinite; }
  .dash-car:hover .dash-car__puffs circle { animation-duration: .9s; }
  .dash-car:hover .dash-car__label { background: var(--ink); transform: rotate(-2deg) translateY(-1px); }
}
.dash-car:hover .dash-car__beam, .dash-car:focus-visible .dash-car__beam, .dash-car.is-leaving .dash-car__beam { opacity: 1; }
.dash-car:focus-visible .dash-car__body { animation: dash-car-rev 120ms linear infinite; }

/* arriving: it drives in from the left once per session and settles with a little nose dip */
.dash-car.is-arriving .dash-car__ride { animation: dash-car-arrive 1.15s cubic-bezier(.16, 1, .3, 1) both; }
.dash-car.is-arriving .dash-car__spin { animation: dash-car-spin-in 1.15s cubic-bezier(.16, 1, .3, 1) both; }
.dash-car.is-arriving .dash-car__speed { animation: dash-car-speed-in 1.15s ease-out both; }
.dash-car.is-arriving .dash-car__label { animation: dash-car-label-in 1.3s ease-out both; }

/* leaving: a rev, a squat, then it is gone to the right and the dashboard opens */
.dash-car.is-leaving { pointer-events: none; }
.dash-car.is-leaving .dash-car__ride { animation: dash-car-leave 1.1s cubic-bezier(.55, 0, .85, .25) both; }
.dash-car.is-leaving .dash-car__body { animation: dash-car-rev 90ms linear 4; }
.dash-car.is-leaving .dash-car__spin { animation: dash-car-spin-out 1.1s cubic-bezier(.55, 0, .85, .25) both; }
.dash-car.is-leaving .dash-car__puffs circle { animation: dash-car-burst .55s ease-out both; }
.dash-car.is-leaving .dash-car__speed { animation: dash-car-speed-out 1.1s ease-in both; }
.dash-car.is-leaving .dash-car__label { opacity: 0; transition: opacity 200ms ease; }

@keyframes dash-car-idle { 0%, 80%, 100% { transform: none; } 83% { transform: translateY(-1.2px) rotate(-.4deg); } 87% { transform: none; } 90% { transform: translateY(-.6px); } 93% { transform: none; } }
@keyframes dash-car-puff { 0%, 80% { opacity: 0; transform: none; } 83% { opacity: .85; transform: scale(.7); } 100% { opacity: 0; transform: translate(-14px, -7px) scale(1.7); } }
@keyframes dash-car-burst { 0% { opacity: .95; transform: scale(.8); } 100% { opacity: 0; transform: translate(-22px, -9px) scale(2.2); } }
@keyframes dash-car-rev { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-.8px) rotate(-.25deg); } 75% { transform: translateY(.4px) rotate(.2deg); } }
@keyframes dash-car-charm { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes dash-car-arrive { 0% { transform: translateX(-165%); } 78% { transform: translateX(3%) rotate(.9deg); } 90% { transform: translateX(-.5%) rotate(-.3deg); } 100% { transform: none; } }
@keyframes dash-car-spin-in { 0% { transform: rotate(-1700deg); } 100% { transform: none; } }
@keyframes dash-car-speed-in { 0% { opacity: .9; } 55% { opacity: .6; } 100% { opacity: 0; } }
@keyframes dash-car-label-in { 0%, 55% { opacity: 0; transform: rotate(-2deg) translateY(.4rem); } 100% { opacity: 1; transform: rotate(-2deg); } }
@keyframes dash-car-leave { 0% { transform: none; } 24% { transform: translateX(-4%) rotate(-1.6deg); } 100% { transform: translateX(110vw) rotate(-.6deg); } }
@keyframes dash-car-spin-out { 0%, 18% { transform: none; } 100% { transform: rotate(3600deg); } }
@keyframes dash-car-speed-out { 0%, 25% { opacity: 0; } 45%, 100% { opacity: .9; } }
@keyframes dash-car-roll-back { 0% { transform: none; } 100% { transform: rotate(-720deg); } }
@keyframes dash-car-roll-in { 0% { transform: rotate(-720deg); } 100% { transform: none; } }

/* phones: a little smaller, so it covers less of what you read */
@media (max-width: 600px) {
  .dash-car { width: 6.5rem; }
  .dash-car__label { font-size: .56rem; padding: .36rem .5rem .34rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-car__ride, .dash-car__body, .dash-car__spin, .dash-car__puffs circle, .dash-car__speed, .dash-car__charm, .dash-car__label { animation: none !important; }
  .dash-car__beam, .dash-car__label { transition: none; }
  .dash-car { transition: opacity 220ms ease, visibility 220ms ease; }
  .dash-car.is-away { opacity: 0; transform: none; visibility: hidden; }
}
@media print { .dash-car { display: none; } }