/* Home model showcase: car drives in on a white stage, turns on its 360° frames, drag to rotate. */
.showcase { --dir: 1; background: #fff; overflow: hidden; }
[dir="rtl"] .showcase { --dir: -1; }
.showcase__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; margin-block-end: clamp(20px, 3vw, 40px); }
.showcase__head h2 { margin-block-end: 0; }
.showcase__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px; background: var(--g-surface); }
.showcase__tab { border: 0; background: transparent; color: var(--g-muted); font: inherit; font-weight: 600; font-size: 0.95rem; padding: 10px 20px; border-radius: 999px; cursor: pointer; transition: background 0.3s var(--g-ease), color 0.3s, box-shadow 0.3s; }
.showcase__tab:hover { color: var(--g-ink); }
.showcase__tab.is-active { background: var(--g-ink); color: #fff; box-shadow: 0 6px 18px rgba(14, 18, 24, 0.18); }
.showcase__tab:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; }

.showcase__stage { position: relative; display: grid; grid-template-areas: "stage"; isolation: isolate; }
.showcase__road { position: absolute; inset-inline: -10%; inset-block-end: clamp(48px, 8vw, 110px); block-size: 1px; background: linear-gradient(90deg, transparent, var(--g-line-strong) 20%, var(--g-line-strong) 80%, transparent); z-index: 0; pointer-events: none; }
.showcase__road::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 100%; background: repeating-linear-gradient(90deg, transparent 0 60px, var(--g-ink) 60px 120px); opacity: 0; }
.showcase__item { grid-area: stage; display: grid; gap: clamp(16px, 3vw, 48px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .showcase__item { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
  [dir="rtl"] .showcase__item { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
  .showcase__car { order: 2; }
}
.showcase__item[hidden] { display: none; }

.showcase__car { position: relative; z-index: 1; aspect-ratio: 16 / 9; touch-action: pan-y; cursor: grab; user-select: none; outline: none; }
.showcase__car:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 8px; border-radius: var(--g-radius); }
.showcase__item.is-dragging .showcase__car { cursor: grabbing; }
/* No CSS filters on the frames: a drop-shadow/blur filter on a 1400px image is re-rasterised on every
   frame swap and made the rotation stutter. The ground shadow is the separate ellipse below. */
.showcase__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; object-position: center bottom; -webkit-user-drag: none; backface-visibility: hidden; }
.showcase__frames { position: absolute; inset: 0; will-change: transform, opacity; }
.showcase__frames .frames-canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; pointer-events: none; }
.showcase__shadow { position: absolute; inset-inline: 12%; inset-block-end: 2%; block-size: 8%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(14, 18, 24, 0.22), rgba(14, 18, 24, 0) 70%); filter: blur(6px); z-index: -1; }
.showcase__hint { position: absolute; inset-block-end: -6px; inset-inline-start: 50%; translate: -50% 0; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--g-surface); color: var(--g-muted); font-size: 0.8rem; white-space: nowrap; transition: opacity 0.4s; }
.showcase__hint .icon { inline-size: 14px; block-size: 14px; fill: none; }
.showcase__item.is-touched .showcase__hint { opacity: 0; }

.showcase__info { position: relative; z-index: 2; display: grid; gap: 14px; justify-items: start; align-content: center; padding-block-end: clamp(24px, 6vw, 96px); }
.showcase__title { margin: 0; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 0.98; letter-spacing: -0.035em; }
html[dir="rtl"] .showcase__title { letter-spacing: 0; line-height: 1.15; }
.showcase__tagline { margin: 0; color: var(--g-muted); font-size: 1.1rem; max-width: 34ch; }
.showcase__specs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 32px; }
.showcase__specs li { display: grid; gap: 2px; }
.showcase__spec-value { font-size: 1.3rem; font-weight: 600; color: var(--g-ink); letter-spacing: -0.02em; }
.showcase__spec-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--g-muted); font-weight: 600; }
.showcase__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 12px; }
.showcase__all { margin: clamp(16px, 3vw, 32px) 0 0; text-align: center; }
@media (max-width: 899px) {
  .showcase__info { justify-items: center; text-align: center; padding-block-end: 0; padding-block-start: 24px; }
  .showcase__specs { justify-content: center; }
  .showcase__actions { justify-content: center; }
  .showcase__road { inset-block-end: auto; inset-block-start: calc(56.25vw - 4px); }
}

/* ---------- Motion: drive in / drive out ---------- */
.showcase__item.is-entering .showcase__frames { animation: showcase-drive-in 1.05s cubic-bezier(0.16, 1, 0.3, 1) both; }
.showcase__item.is-entering .showcase__shadow { animation: showcase-shadow-in 1.05s cubic-bezier(0.16, 1, 0.3, 1) both; }
.showcase__item.is-leaving .showcase__frames { animation: showcase-drive-out 0.7s cubic-bezier(0.7, 0, 0.84, 0) both; }
.showcase__item.is-leaving .showcase__shadow { animation: showcase-shadow-out 0.7s ease-in both; }
.showcase__item.is-leaving .showcase__info { animation: showcase-info-out 0.35s ease-in both; }
.showcase__item.is-entering .showcase__info > * { animation: showcase-info-in 0.7s var(--g-ease) both; }
.showcase__item.is-entering .showcase__info > *:nth-child(2) { animation-delay: 0.08s; }
.showcase__item.is-entering .showcase__info > *:nth-child(3) { animation-delay: 0.16s; }
.showcase__item.is-entering .showcase__info > *:nth-child(4) { animation-delay: 0.24s; }
.showcase__stage.is-moving .showcase__road::after { animation: showcase-road 0.5s linear infinite; opacity: 0.35; }
/* transform + opacity only: both run on the compositor, no re-rasterisation. */
@keyframes showcase-drive-in {
  0%   { transform: translateX(calc(80% * var(--dir))) scale(0.94); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes showcase-drive-out {
  0%   { transform: translateX(0) scale(1); opacity: 1; }
  100% { transform: translateX(calc(-80% * var(--dir))) scale(0.94); opacity: 0; }
}
@keyframes showcase-shadow-in { 0% { opacity: 0; transform: translateX(calc(80% * var(--dir))) scaleX(0.6); } 100% { opacity: 1; transform: none; } }
@keyframes showcase-shadow-out { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(calc(-80% * var(--dir))) scaleX(0.6); } }
@keyframes showcase-info-in { 0% { opacity: 0; transform: translateY(22px); } 100% { opacity: 1; transform: none; } }
@keyframes showcase-info-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes showcase-road { 0% { background-position: 0 0; } 100% { background-position: calc(-120px * var(--dir)) 0; } }
@media (prefers-reduced-motion: reduce) {
  .showcase__item.is-entering .showcase__frames, .showcase__item.is-leaving .showcase__frames, .showcase__item.is-entering .showcase__shadow, .showcase__item.is-leaving .showcase__shadow, .showcase__item.is-entering .showcase__info > *, .showcase__item.is-leaving .showcase__info, .showcase__stage.is-moving .showcase__road::after { animation: none; }
}