/* The car-service pack's own styles, loaded right after site.css and blocking, like it (src/page.js).
   The first screen: a studio photo of a brake assembly, cut out (its studio white is transparency, its shadow a soft
   grey), on the page's dots with an amber glow and a dial behind it, a scan line that passes once and two readouts.
   It moves only under html.motion; in still mode (and with reduced motion) everything stands. */
.moto { position: absolute; inset: 0; }
.moto-glow, .moto-dial, .moto-part { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.moto-glow { width: 74%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--teal-glow) 70%, transparent), color-mix(in srgb, var(--teal-glow) 22%, transparent) 62%, transparent); }
.moto-dial { width: 92%; height: auto; color: color-mix(in srgb, var(--teal-ink) 55%, transparent); overflow: visible; }
.moto-part { width: 80%; height: auto; }
.moto-scan { position: absolute; left: 12%; right: 12%; top: 14%; height: 2px; border-radius: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--teal) 25%, var(--teal) 75%, transparent);
  box-shadow: 0 0 18px 3px color-mix(in srgb, var(--teal) 45%, transparent); }
.moto-tag { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line)); background: rgba(255, 255, 255, .88); backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px -18px rgba(11, 31, 34, .45); font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.moto-tag i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 24%, transparent); }
.moto-tag-a { top: 19%; right: 4%; }
.moto-tag-b { bottom: 18%; left: 4%; }
@media (max-width: 900px) {
  .moto-tag { gap: 6px; padding: 6px 10px 6px 8px; font-size: 10px; }
  .moto-tag-a { top: 14%; right: 2%; } .moto-tag-b { bottom: 13%; left: 2%; }
}

html.motion .moto-part { animation: moto-lift 7s ease-in-out infinite alternate; }
@keyframes moto-lift { from { transform: translateY(4px); } to { transform: translateY(-4px); } }
html.motion .moto-dial { animation: moto-turn 120s linear infinite; }
@keyframes moto-turn { to { rotate: 360deg; } }
html.motion .moto-scan { animation: moto-scan 2.4s var(--ease) .4s both; }
@keyframes moto-scan { 0% { top: 14%; opacity: 0; } 12%, 86% { opacity: 1; } 100% { top: 86%; opacity: 0; } }
html.motion .moto-tag { animation: moto-tag .7s var(--ease) both; }
html.motion .moto-tag-a { animation-delay: 1s; }
html.motion .moto-tag-b { animation-delay: 1.9s; }
@keyframes moto-tag { from { opacity: 0; transform: translateY(8px); } }

/* the service photos: a dark card under them, so the white text reads before a lazy photo arrives, and each keeps its
   subject in view as the card changes shape (wide or tall on a laptop, square on a phone) */
.svc.has-img { border-color: transparent; background: var(--dark); }
.svc-img img[src$="/card-tires.webp"] { object-position: 50% 30%; }
.svc-img img[src$="/card-to.webp"] { object-position: 45% 40%; }
.svc-img img[src$="/card-diag.webp"] { object-position: 50% 64%; } /* the gauge above the title of the wide card */