/* CarCompanion OBD marketing visual tuning.
   Keeps the approved device artwork intact; only layout and motion are adjusted. */

@keyframes cc-obd-product-scroll-drift {
  from { transform: translateY(8px); }
  to { transform: translateY(-8px); }
}

@keyframes cc-obd-small-scroll-drift {
  from { transform: translateY(7px); }
  to { transform: translateY(-7px); }
}

@keyframes cc-obd-feature-scroll-drift {
  from { transform: translateY(12px) rotate(-4deg); }
  to { transform: translateY(-12px) rotate(-4deg); }
}

/* Homepage OBD rail.
   Important: do not move the homepage to make room for the product.
   The middle column remains exactly centered and the OBD rail lives only in
   the symmetric free space on the right. No :has() dependency here. */
@media (min-width: 1350px) {
  main.flex-1 > div[class*="max-w-[1480px]"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1024px) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    column-gap: 12px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  main.flex-1 > div[class*="max-w-[1480px]"] > .min-w-0 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  main.flex-1 > div[class*="max-w-[1480px]"] > aside[aria-label="CarCompanion OBD"] {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: block !important;
    position: sticky !important;
    top: 104px !important;
    align-self: start !important;
    justify-self: start !important;
    width: min(260px, calc(100% - 8px)) !important;
    min-width: 0 !important;
    z-index: 20 !important;
  }
}

/* On narrower desktop previews, compact only the product card. */
@media (min-width: 1350px) and (max-width: 1499.98px) {
  main.flex-1 > div[class*="max-w-[1480px]"] > aside[aria-label="CarCompanion OBD"] > div {
    padding: 10px !important;
    border-radius: 14px !important;
  }

  main.flex-1 > div[class*="max-w-[1480px]"] > aside[aria-label="CarCompanion OBD"] img[src$="/marketing/carcompanion-obd-device-v3.svg"] {
    width: 92px !important;
    margin-top: 6px !important;
  }

  main.flex-1 > div[class*="max-w-[1480px]"] > aside[aria-label="CarCompanion OBD"] p {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  main.flex-1 > div[class*="max-w-[1480px]"] > aside[aria-label="CarCompanion OBD"] a {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 10px !important;
  }
}

/* /boitier-obd hero: the device should support the packaging, not hide it. */
div[class*="max-w-[620px]"] > img[src$="/marketing/carcompanion-obd-device-v3.svg"] {
  width: 68% !important;
  max-width: 390px !important;
  left: 5% !important;
  bottom: 4% !important;
}

/* /suivi-vehicules OBD feature: rebalance the device against the data card. */
div[class*="min-h-[390px]"] > img[src$="/marketing/carcompanion-obd-device-v3.svg"] {
  width: 66% !important;
  max-width: 380px !important;
  left: 4% !important;
  top: 12% !important;
}

@media (min-width: 640px) {
  div[class*="max-w-[620px]"] > img[src$="/marketing/carcompanion-obd-device-v3.svg"] {
    width: 64% !important;
    left: 7% !important;
    bottom: 5% !important;
  }
}

@media (min-width: 1024px) {
  div[class*="max-w-[620px]"] > img[src$="/marketing/carcompanion-obd-device-v3.svg"] {
    width: 60% !important;
    max-width: 372px !important;
    left: 8% !important;
    bottom: 7% !important;
  }

  div[class*="min-h-[390px]"] > img[src$="/marketing/carcompanion-obd-device-v3.svg"] {
    width: 56% !important;
    max-width: 360px !important;
    left: 8% !important;
    top: 16% !important;
  }
}

/* Replace the old autonomous up/down loops with a subtle scroll-linked drift. */
@supports (animation-timeline: view()) {
  div[class*="max-w-[620px]"] > img[src$="/marketing/carcompanion-obd-device-v3.svg"] {
    animation: cc-obd-product-scroll-drift linear both !important;
    animation-timeline: view(block) !important;
    animation-range: entry 5% exit 95% !important;
  }

  div[class*="w-[38%]"]:has(> img[src$="/marketing/carcompanion-obd-device-v3.svg"]) {
    animation: cc-obd-small-scroll-drift linear both !important;
    animation-timeline: view(block) !important;
    animation-range: entry 5% exit 95% !important;
  }

  div[class*="min-h-[390px]"] > img[src$="/marketing/carcompanion-obd-device-v3.svg"] {
    animation: cc-obd-feature-scroll-drift linear both !important;
    animation-timeline: view(block) !important;
    animation-range: entry 5% exit 95% !important;
  }
}

/* Browsers without scroll-driven animations: remove the old rebound and stay still. */
@supports not (animation-timeline: view()) {
  div[class*="w-[38%]"]:has(> img[src$="/marketing/carcompanion-obd-device-v3.svg"]) {
    transform: none !important;
  }

  div[class*="min-h-[390px]"] > img[src$="/marketing/carcompanion-obd-device-v3.svg"] {
    transform: rotate(-4deg) !important;
  }
}