/* =========================================================
   PRODUCTS
   ========================================================= */

.products-section {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(3.75rem, 5vw, 5rem);
  overflow: hidden;
  background: #eef2f5;
}

/* Dotted decoration */

.products-section::after {
  position: absolute;
  right: 2.25rem;
  bottom: 2rem;
  width: 7rem;
  height: 6rem;
  content: "";
  opacity: 0.14;
  background-image: radial-gradient(var(--color-brand) 1px, transparent 1px);
  background-size: 10px 10px;
  pointer-events: none;
}

/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.products-showcase {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(28rem, 1.1fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center;
  min-height: clamp(22rem, 31vw, 28rem);
}

/* =========================================================
   LEFT CONTENT
   ========================================================= */

.products-copy {
  max-width: 40rem;
}

.products-copy .section-label {
  margin-bottom: 0.7rem;
}

.products-copy h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 750;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.products-title-line {
  display: block;
  width: 2.6rem;
  height: 2px;
  margin-top: 1.45rem;
  background: var(--color-brand);
}

.products-summary {
  max-width: 38rem;
  margin: 1.25rem 0 0;
  color: var(--color-muted);
  font-size: clamp(0.88rem, 1.05vw, 1rem);
  line-height: 1.7;
}

/* =========================================================
   STATS
   ========================================================= */

.products-stats {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 1.8rem;
}

.product-stat {
  display: grid;
  gap: 0.15rem;
  min-width: 8.5rem;
  padding: 0 1.4rem;
}

.product-stat:first-child {
  padding-left: 0;
}

.product-stat + .product-stat {
  border-left: 1px solid rgba(17, 19, 23, 0.12);
}

.product-stat strong {
  color: var(--color-ink);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 800;
  line-height: 1;
}

.product-stat span {
  color: var(--color-muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

/* =========================================================
   SHOW ALL PRODUCTS BUTTON
   ========================================================= */

.products-view-all {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 3rem;
  margin-top: 2rem;
  padding: 0.7rem 1.4rem;
  color: #ffffff;
  background: linear-gradient(135deg, #087fd0, #0b9be7);
  border: 0;
  border-radius: 0.55rem;
  box-shadow: 0 12px 28px rgba(7, 136, 207, 0.18);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.products-view-all-arrow {
  font-size: 1rem;
  transition: transform 180ms ease;
}

.products-view-all:is(:hover, :focus-visible) {
  transform: translateY(-0.12rem);
  box-shadow: 0 16px 32px rgba(7, 136, 207, 0.24);
}

.products-view-all:is(:hover, :focus-visible) .products-view-all-arrow {
  transform: translateX(0.25rem);
}

.products-view-all:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

/* =========================================================
   VEHICLE AREA
   ========================================================= */

.products-visual {
  position: relative;
  display: grid;
  align-items: center;
  min-width: 0;
  min-height: clamp(20rem, 29vw, 27rem);
  isolation: isolate;
  overflow: visible;
}

/* Technical background panel */

.products-visual::before {
  position: absolute;
  inset: 8% 2% 10% 8%;
  z-index: 0;
  content: "";
  border: 1px solid rgba(7, 136, 207, 0.08);
  border-radius: 1.25rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(243, 248, 252, 0.97));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 18px 40px rgba(17, 19, 23, 0.04);
  pointer-events: none;
}

/* Ground shadow */

.products-visual::after {
  position: absolute;
  right: 8%;
  bottom: 12%;
  z-index: 1;
  width: 72%;
  height: 9%;
  content: "";
  background: radial-gradient(ellipse, rgba(17, 19, 23, 0.18), transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}

/* =========================================================
   VEHICLE STAGE
   ========================================================= */

.products-vehicle-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: clamp(20rem, 29vw, 27rem);
  overflow: visible;
  isolation: isolate;
}

/* Technical grid */

.products-vehicle-stage::before {
  position: absolute;
  inset: 10% 5% 14% 10%;
  z-index: 0;
  content: "";
  border-radius: 1rem;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(7, 136, 207, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 136, 207, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: grid-breathe 6s ease-in-out infinite;
  pointer-events: none;
}

/* Soft blue glow */

.products-vehicle-stage::after {
  position: absolute;
  top: 50%;
  left: 55%;
  z-index: 0;
  width: 62%;
  height: 58%;
  content: "";
  background: radial-gradient(circle, rgba(7, 136, 207, 0.13), rgba(7, 136, 207, 0.045) 38%, transparent 72%);
  transform: translate(-50%, -50%);
  filter: blur(22px);
  pointer-events: none;
}

/* =========================================================
   LIGHT SWEEP
   ========================================================= */

.products-light-sweep {
  position: absolute;
  top: 9%;
  bottom: 12%;
  left: -35%;
  z-index: 1;
  width: 18%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  filter: blur(6px);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: products-light-sweep 9s ease-in-out infinite;
}

/* =========================================================
   VEHICLES
   ========================================================= */

.products-vehicle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: var(--vehicle-width, min(105%, 48rem));
  max-height: 94%;
  object-fit: contain;
  opacity: 0;

  --vehicle-x: -47%;
  --vehicle-y: -50%;
  --vehicle-inactive-scale: 0.97;
  --vehicle-active-scale: 1;

  transform:
    translate(var(--vehicle-x), var(--vehicle-y))
    translateX(2rem)
    scale(var(--vehicle-inactive-scale));

  filter: blur(2px);
  pointer-events: none;
  transition: opacity 650ms ease, transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 650ms ease;
}

.products-vehicle.is-active {
  z-index: 3;
  opacity: 1;
  transform:
    translate(var(--vehicle-x), var(--vehicle-y))
    translateX(0)
    scale(var(--vehicle-active-scale));
  filter: blur(0);
  /* animation: vehicle-float 5s ease-in-out infinite; */
}

/* Individual vehicle sizes */

.vehicle-mini {
  --vehicle-width: min(105%, 48rem);
  --vehicle-active-scale: 1;
}

.vehicle-pickup {
  --vehicle-width: min(118%, 53rem);
  --vehicle-active-scale: 1.15;
  --vehicle-y: -51%;
}

.vehicle-lcv {
  --vehicle-width: min(116%, 52rem);
  --vehicle-active-scale: 1.16;
  --vehicle-y: -50%;
}

/* =========================================================
   DOTS
   ========================================================= */

.products-dots {
  position: absolute;
  left: 50%;
  bottom: 0.4rem;
  z-index: 5;
  display: flex;
  gap: 0.45rem;
  transform: translateX(-50%);
}

.products-dot {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  background: #cbd7e1;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}

.products-dot.is-active {
  background: var(--color-brand);
  transform: scale(1.15);
}

.products-dot:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes grid-breathe {
  0%, 100% {
    opacity: 0.34;
  }

  50% {
    opacity: 0.52;
  }
}

/* @keyframes vehicle-float {
  0%, 100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -6px;
  }
} */

@keyframes products-light-sweep {
  0%, 68% {
    left: -35%;
    opacity: 0;
  }

  72% {
    opacity: 0.28;
  }

  88% {
    left: 115%;
    opacity: 0.12;
  }

  100% {
    left: 115%;
    opacity: 0;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 761px) and (max-width: 1050px) {
  .products-showcase {
    grid-template-columns: minmax(0, 0.95fr) minmax(22rem, 1.05fr);
    gap: 2rem;
  }

  .product-stat {
    min-width: 7rem;
    padding-inline: 1rem;
  }

  .products-vehicle {
    max-height: 90%;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .products-section {
    padding-block: 4rem 3.5rem;
  }

  .products-section::after {
    right: -1rem;
    bottom: 0.5rem;
    width: 7rem;
  }

  .products-showcase {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    min-height: 0;
  }

  .products-copy {
    max-width: none;
  }

  .products-copy h2 {
    font-size: clamp(2.8rem, 13vw, 3.8rem);
  }

  .products-summary {
    max-width: 29rem;
    font-size: 0.84rem;
  }

  .products-stats {
    margin-top: 1.4rem;
  }

  .product-stat {
    flex: 1;
    min-width: 0;
    padding-inline: 0.8rem;
  }

  .product-stat strong {
    font-size: 1.35rem;
  }

  .product-stat span {
    font-size: 0.58rem;
  }

  .products-view-all {
    min-height: 2.8rem;
    margin-top: 1.5rem;
    font-size: 0.76rem;
  }

  .products-visual {
    min-height: clamp(15rem, 67vw, 22rem);
  }

  .products-visual::before {
    inset: 8% 0 9% 0;
  }

  .products-vehicle-stage {
    min-height: clamp(15rem, 67vw, 22rem);
  }

  .products-vehicle-stage::before {
    inset: 10% 3% 13% 3%;
    background-size: 22px 22px;
  }

  .products-vehicle-stage::after {
    width: 80%;
    height: 62%;
  }

  .products-vehicle {
    --vehicle-x: -50%;
    --vehicle-y: -48%;
    max-height: 96%;
  }

  .vehicle-mini {
    --vehicle-width: 112%;
    --vehicle-active-scale: 1;
  }

  .vehicle-pickup {
    --vehicle-width: 120%;
    --vehicle-active-scale: 1.08;
    --vehicle-y: -49%;
  }

  .vehicle-lcv {
    --vehicle-width: 118%;
    --vehicle-active-scale: 1.08;
    --vehicle-y: -48%;
  }

  .products-dots {
    bottom: 0.25rem;
  }

  .products-light-sweep {
    display: none;
  }
}

/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 430px) {
  .product-stat {
    padding-inline: 0.6rem;
  }

  .product-stat:first-child {
    padding-left: 0;
  }

  .product-stat strong {
    font-size: 1.2rem;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .products-vehicle,
  .products-dot,
  .products-view-all,
  .products-view-all-arrow {
    transition: none;
  }

  .products-vehicle.is-active,
  .products-vehicle-stage::before,
  .products-light-sweep {
    animation: none;
  }
}