/* =============================================================
   INTERACTIVE SERVICE BAY
   ============================================================= */
.service-bay-stage {
  min-height: 112vh;
  align-items: stretch;
  padding: 112px 0 86px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 16%, rgba(0,0,0,.96) 58%, #050505 100%);
}
.service-bay-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: stretch;
  width: min(1440px, calc(100% - 48px));
}
.service-bay-copy {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  padding: 0;
}
.service-bay-copy p:not(.eyebrow) {
  color: #e3e3e3;
  margin: 0;
  max-width: 760px;
}
.service-bay-app {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  border: 1px solid rgba(255,212,0,.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 60%, rgba(255,212,0,.12), transparent 35%),
    linear-gradient(180deg, rgba(18,18,18,.88), rgba(0,0,0,.95));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
.service-bay-app::before,
.service-bay-app::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.service-bay-app::before {
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 72%);
}
.service-bay-app::after {
  background: linear-gradient(90deg, transparent, rgba(255,212,0,.12), transparent);
  transform: translateX(-120%);
  animation: serviceBaySweep 18s ease-in-out infinite;
  opacity: .7;
}
@keyframes serviceBaySweep {
  0%, 35%, 100% { transform: translateX(-120%); }
  62% { transform: translateX(120%); }
}
.bay-topline {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bay-topline strong {
  color: #fff;
  text-align: right;
}
.car-stage {
  position: relative;
  z-index: 2;
  min-height: 540px;
  margin: 12px 24px 24px;
  isolation: isolate;
  perspective: 1200px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  background: #070707;
  --spot-x: 50%;
  --spot-y: 50%;
}
.car-scene-stack {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.car-scene-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 68% at 52% 58%, transparent 45%, rgba(0,0,0,.36) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18), transparent 34%, rgba(0,0,0,.3));
  opacity: .78;
  transition: opacity .48s ease, background .48s ease;
}
/* "Fake it till you make it" focus effect: darken the edges and drop a
   soft yellow spotlight over the hovered hotspot's known position
   (--spot-x/--spot-y, set inline by booking.js) instead of any real
   camera move. */
.car-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(260px circle at var(--spot-x) var(--spot-y), rgba(255,212,0,.16), transparent 62%),
    radial-gradient(120% 120% at 50% 50%, transparent 52%, rgba(0,0,0,.58) 100%);
  opacity: 0;
  transition: opacity .4s ease;
}
.service-bay-app.is-previewing .car-scene-stack::after {
  opacity: .6;
}
.service-bay-app.is-previewing .car-stage::before {
  opacity: 1;
}
.bay-car-state {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.035);
  /* Warm/desaturate slightly toward the hero photo's amber bay-light
     palette so the car reads as "the same garage" even though the
     interactive renders are a different vehicle than the hero shot. */
  filter: contrast(1.06) saturate(.88) sepia(.08) hue-rotate(-6deg) brightness(.98);
  transition:
    opacity .62s cubic-bezier(.22,.72,.2,1),
    transform .86s cubic-bezier(.2,.8,.2,1),
    filter .62s ease;
}
.bay-car-idle {
  opacity: 1;
}
.service-bay-app[data-active="Oil Change"] .bay-car-idle,
.service-bay-app[data-active="Brakes"] .bay-car-idle,
.service-bay-app[data-active="Diagnostics"] .bay-car-idle,
.service-bay-app[data-active="Dashboard Diagnostics"] .bay-car-idle {
  opacity: 0;
}
.service-bay-app[data-active="Oil Change"] .bay-car-under,
.service-bay-app[data-active="Brakes"] .bay-car-brakes,
.service-bay-app[data-active="Diagnostics"] .bay-car-hood,
.service-bay-app[data-active="Dashboard Diagnostics"] .bay-car-dash {
  opacity: 1;
  transform: scale(1.055);
}
.service-bay-app[data-active="Oil Change"] .bay-car-under {
  transform: translateY(-1%) rotateX(2deg) scale(1.06);
  filter: contrast(1.08) saturate(.98) brightness(1.02);
}
.service-bay-app[data-active="Diagnostics"] .bay-car-hood {
  transform: translateX(-1.4%) scale(1.06);
  filter: contrast(1.08) saturate(.98) brightness(1.03);
}
.service-bay-app[data-active="Brakes"] .bay-car-brakes {
  transform: translateX(.8%) scale(1.055);
  filter: contrast(1.08) saturate(.98) brightness(1.03);
}
.service-bay-app[data-active="Dashboard Diagnostics"] .bay-car-dash {
  transform: translateX(1%) scale(1.055);
  filter: contrast(1.08) saturate(.98) brightness(1.02);
}
.service-bay-app[data-active="Alignment"] .bay-car-idle {
  transform: translateX(-1.2%) rotateY(-4deg) scale(1.055);
}
.service-bay-app[data-active="General Repair"] .bay-car-idle {
  transform: translateY(-1%) rotateZ(.35deg) scale(1.055);
}
.car-hotspot {
  position: absolute;
  z-index: 5;
  width: 82px;
  height: 82px;
  border: 1px solid rgba(255,212,0,.7);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,212,0,.32), rgba(0,0,0,.42) 58%, rgba(0,0,0,.78));
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 28px rgba(255,212,0,.22);
  transition:
    opacity .28s ease,
    transform .28s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease;
}
.car-hotspot::before,
.car-hotspot::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(255,212,0,.34);
  border-radius: inherit;
}
.car-hotspot::after {
  inset: 50%;
  width: 1px;
  height: 34px;
  border: 0;
  background: var(--yellow);
  transform: translate(-50%, 36px);
  opacity: .56;
}
.car-hotspot span {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Other hotspots dim (not vanish) so the eye reads one active area
   while still being free to glide the cursor straight to another. */
.service-bay-app.is-previewing .car-hotspot:not(.is-selected) {
  opacity: .4;
  filter: saturate(.5) brightness(.8);
  transform: translate(-50%, -50%) scale(.94);
}
.car-hotspot:hover,
.car-hotspot:focus-visible,
.car-hotspot.is-selected {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: #fff;
  background: radial-gradient(circle, rgba(255,212,0,.52), rgba(255,185,0,.2) 52%, rgba(0,0,0,.78));
  box-shadow: 0 0 0 4px rgba(255,212,0,.12), 0 0 34px rgba(255,212,0,.4);
  outline: none;
  animation: hotspotPulse 1.8s ease-in-out infinite;
}
@keyframes hotspotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,212,0,.12), 0 0 34px rgba(255,212,0,.4); }
  50% { box-shadow: 0 0 0 6px rgba(255,212,0,.2), 0 0 46px rgba(255,212,0,.58); }
}
.hotspot-oil { left: 50%; top: 82%; }
.hotspot-align-front { left: 84%; top: 66%; }
.hotspot-brakes { left: 17%; top: 68%; }
.hotspot-suspension { left: 34%; top: 48%; }
.hotspot-hood { left: 15%; top: 37%; }
.hotspot-dash { left: 57%; top: 35%; }

/* =============================================================
   WORK ORDER SIDEBAR — a full-height dock (like a game stats
   panel) that slides in from whichever edge is opposite the
   hovered/focused hotspot, rather than a floating centered card.
   ============================================================= */
.bay-panel {
  position: absolute;
  z-index: 7;
  top: 0;
  bottom: 0;
  width: max(280px, 25%);
  /* Stays click-through until open — otherwise this full-height dock
     (parked on whichever side last opened, even after closing) sits
     over the hotspot column on that side and swallows its hover/click
     before it ever reaches the button underneath. */
  pointer-events: none;
}
.bay-panel.is-open {
  pointer-events: auto;
}
.bay-panel-placeholder {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 16px;
  max-width: 78%;
  border-radius: 999px;
  background: rgba(5,5,5,.62);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  text-align: center;
  pointer-events: none;
  transition: opacity .24s ease;
}
.service-bay-app.is-previewing .bay-panel-placeholder {
  opacity: 0;
}
.bay-panel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 24px 24px;
  border: 1px solid rgba(255,212,0,.4);
  background: linear-gradient(160deg, rgba(14,14,14,.96), rgba(0,0,0,.94));
  backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateX(52px);
  opacity: 0;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.22,.8,.2,1), opacity .28s ease;
}
.bay-panel-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--yellow);
}
.bay-panel[data-side="right"] { right: 0; }
.bay-panel[data-side="left"] { left: 0; }
.bay-panel[data-side="left"] .bay-panel-card::before {
  left: auto;
  right: 0;
}
.bay-panel[data-side="left"] .bay-panel-card {
  transform: translateX(-52px);
}
.bay-panel.is-open .bay-panel-card {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.bay-panel-kicker {
  margin: 0 0 8px;
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bay-panel-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: 1.5rem;
  line-height: 1.04;
  text-transform: uppercase;
  color: #fff;
}
.bay-panel-card p {
  margin: 0 0 16px;
  color: #e2e2e2;
  font-size: .92rem;
  line-height: 1.5;
}
.bay-panel-media {
  position: relative;
  overflow: hidden;
  margin-top: auto;
  height: 220px;
  border: 1px solid rgba(255,212,0,.34);
  border-radius: 6px;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.bay-panel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 45%, rgba(0,0,0,.7) 100%),
    radial-gradient(circle at 78% 18%, rgba(255,212,0,.18), transparent 35%);
}
.bay-panel-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(.95);
  transform: scale(1.01);
}
.bay-panel-media-label {
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 12px;
  bottom: 10px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
}
.bay-panel-cta { margin-top: 14px; min-height: 46px; font-size: .88rem; flex-shrink: 0; }