/* 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); }
}

/* /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;
  }
}