/* PICK YOUR RIDE — one stage, not a grid of four cards.
   The car that is leaving drives out of the viewport and the next one drives in
   from the opposite side. On touch the car tracks the finger and springs to the
   nearest category on release. */

.fleet {
  position: relative;
  z-index: 1;
  padding-block: var(--chapter) 0;
  overflow: clip;
}

.fleet__head {
  display: grid;
  gap: 1.1rem;
  margin-bottom: clamp(1.4rem, 4vh, 2.6rem);
}
.fleet__head h2 {
  font-size: var(--t-xl);
  line-height: .82;
  letter-spacing: -.045em;
}
.fleet__head h2 span { display: block; }
.fleet__head h2 span:nth-child(2) { padding-inline-start: .34em; }
.fleet__head h2 span:nth-child(3) { padding-inline-start: .68em; color: var(--accent); }

/* --- the stage ---------------------------------------------------------- */

.stage {
  position: relative;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.stage__ground {
  position: absolute;
  left: 50%;
  bottom: clamp(52px, 9vh, 96px);
  z-index: 0;
  width: min(88vw, 900px);
  height: clamp(120px, 20vh, 220px);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(25,184,216,.26), rgba(25,184,216,0) 72%);
  transition: background .6s var(--ease-brake);
}

.stage__viewport {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* generous side bleed so the car really does leave the frame */
  margin-inline: calc(var(--gut) * -1);
}
.stage__track {
  display: flex;
  will-change: transform;
}
.stage__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  justify-items: center;
  padding-inline: var(--gut);
}
.stage__car {
  position: relative;
  width: min(88%, 760px);
  filter: drop-shadow(0 34px 28px rgba(7, 45, 60, .26));
  transition: transform .55s var(--ease-brake);
}
.stage__slide[data-on='false'] .stage__car { transform: scale(.9); }

/* --- the little floating specs ------------------------------------------ */

.spec {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .7rem;
  border-radius: 999px;
  background: rgba(250, 248, 242, .93);
  box-shadow: 0 12px 26px -14px rgba(7, 45, 60, .6);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transform: translate(calc(var(--px, 0) * var(--d, 10px)), calc(6px + var(--py, 0) * var(--d, 10px)));
  transition: opacity .4s linear, transform .6s var(--ease-brake);
}
.spec::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.stage__slide[data-on='true'] .spec { opacity: 1; }
.stage__slide[data-on='true'] .spec:nth-of-type(1) { transition-delay: .06s; }
.stage__slide[data-on='true'] .spec:nth-of-type(2) { transition-delay: .12s; }
.stage__slide[data-on='true'] .spec:nth-of-type(3) { transition-delay: .18s; }
.stage__slide[data-on='true'] .spec:nth-of-type(4) { transition-delay: .24s; }

.spec.s1 { left: 2%;  top: 14%; --d: 14px; }
.spec.s2 { right: 1%; top: 30%; --d: -11px; }
.spec.s3 { left: 6%;  bottom: 24%; --d: 9px; }
.spec.s4 { right: 5%; bottom: 12%; --d: -15px; }

@media (max-width: 767px) {
  .spec { font-size: .6rem; padding: .34rem .55rem; }
  .spec.s1 { left: 0; top: 8%; }
  .spec.s2 { right: 0; top: 26%; }
  .spec.s3 { left: 0; bottom: 30%; }
  .spec.s4 { right: 0; bottom: 20%; }
}

/* --- controls ----------------------------------------------------------- */

.stage__bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.4rem);
  justify-content: center;
  margin-top: clamp(.6rem, 2vh, 1.4rem);
}

.stage__arrow {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink-14);
  transition: transform .3s var(--ease-drive), box-shadow .3s linear,
              background-color .3s linear, color .3s linear;
}
.stage__arrow svg { width: 18px; height: 10px; }
.stage__arrow:hover { background: var(--ink); color: var(--offwhite); box-shadow: none; }
.stage__arrow--prev:hover { transform: translateX(-4px); }
.stage__arrow--next:hover { transform: translateX(4px); }

.stage__tabs {
  display: flex;
  gap: clamp(.15rem, 1vw, .8rem);
  overflow-x: auto;
  scrollbar-width: none;
  padding: .2rem;
}
.stage__tabs::-webkit-scrollbar { display: none; }
.stage__tab {
  position: relative;
  padding: .55rem .85rem;
  font-family: var(--display);
  font-size: clamp(.85rem, 1.9vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--ink-52);
  white-space: nowrap;
  transition: color .35s linear;
}
.stage__tab::after {
  content: '';
  position: absolute;
  left: .85rem; right: .85rem; bottom: .18rem;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .42s var(--ease-brake);
}
.stage__tab[aria-selected='true'] { color: var(--ink); }
.stage__tab[aria-selected='true']::after { transform: scaleX(1); }

/* --- the read-out under the stage --------------------------------------- */

.fleet__read {
  position: relative;
  z-index: 2;
  margin-top: clamp(1.2rem, 4vh, 2.4rem);
  padding-bottom: var(--chapter);
  display: grid;
  gap: 1.2rem;
  align-items: end;
}
.fleet__name {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.9rem);
  text-transform: uppercase;
  line-height: .9;
}
.fleet__best {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-52);
}
.fleet__best b { display: block; color: var(--ink); font-size: .82rem; margin-top: .3rem; }
.fleet__price {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.2vw, 2.3rem);
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
.fleet__price small {
  display: block;
  font-family: var(--body);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--ink-52);
  margin-bottom: .35rem;
}

.fleet__scene {
  position: relative;
  z-index: 0;
  height: clamp(160px, 30vh, 340px);
  overflow: hidden;
}
.fleet__scene img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  will-change: transform;
}
.fleet__scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--paper), rgba(250,248,242,0) 46%);
}

@media (min-width: 860px) {
  .fleet__read { grid-template-columns: 1.1fr .9fr auto; gap: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .stage__track { transition: none; }
  .spec { opacity: 1; transform: none; transition: none; }
  .stage__car { transform: none !important; }
}