:root {
  --card-motion-ease: cubic-bezier(.4, 0, .2, 1);
  --card-motion-fast: 340ms;
  --card-motion-slow: 560ms;
}

.global-clickable-card {
  cursor: pointer;
  outline: 0;
}

/* RONA-style motion: the shell stays fixed; media, copy and arrows move inside it. */
html body :is(
  .stats article,
  .core-advantage-cards article,
  .core-card-hotspot,
  .image-card,
  .case-card,
  .resource-panels > article,
  .contact-grid > article,
  .about-stat,
  .more-grid a,
  .benefit-grid article,
  .type-matrix article,
  .application-column article,
  .catalog-card,
  .case-track article,
  .solution-case-track article,
  .solution-case-grid article,
  .solution-use-grid article,
  .application-grid article,
  .support-grid article,
  .events-grid article,
  .service-product-grid a,
  .product-card,
  .product-row article,
  .news-grid article,
  .blog-card,
  .download-card,
  .news-related-card,
  .related-card,
  .related-grid article,
  .news-feature,
  .news-preview,
  .news-row,
  .sd-gallery-grid article,
  .sd-media-card,
  .sd-case-grid article,
  .sd-application-card,
  .sd-product-grid article,
  .solution-benefits article,
  .solution-products article,
  .global-clickable-card
) {
  transform: none !important;
  transform-origin: center !important;
}

html body :is(
  .stats article,
  .core-advantage-cards article,
  .core-card-hotspot,
  .image-card,
  .case-card,
  .resource-panels > article,
  .contact-grid > article,
  .about-stat,
  .more-grid a,
  .benefit-grid article,
  .type-matrix article,
  .application-column article,
  .catalog-card,
  .case-track article,
  .solution-case-track article,
  .solution-case-grid article,
  .solution-use-grid article,
  .application-grid article,
  .support-grid article,
  .events-grid article,
  .service-product-grid a,
  .product-card,
  .product-row article,
  .news-grid article,
  .blog-card,
  .download-card,
  .news-related-card,
  .related-card,
  .related-grid article,
  .news-feature,
  .news-preview,
  .news-row,
  .sd-gallery-grid article,
  .sd-media-card,
  .sd-case-grid article,
  .sd-application-card,
  .sd-product-grid article,
  .solution-benefits article,
  .solution-products article,
  .global-clickable-card
):is(:hover, :focus-within, :focus-visible) {
  transform: none !important;
}

.global-clickable-card:focus-visible {
  outline: 2px solid #1f6fe0;
  outline-offset: 4px;
}

/* Preserve rounded clipping while the photograph scales inside the card. */
html body :is(
  .image-card,
  .case-card,
  .news-grid article,
  .events-grid article,
  .case-track article,
  .solution-case-track article,
  .solution-case-grid article,
  .solution-use-grid article,
  .application-grid article,
  .blog-card,
  .news-related-card,
  .related-card,
  .related-grid article,
  .news-feature,
  .news-preview,
  .sd-gallery-media,
  .sd-media-card,
  .sd-case-grid article,
  .sd-application-card
) {
  overflow: hidden;
  isolation: isolate;
}

html body :is(
  .image-card > img,
  .case-card > img,
  .news-grid article > img,
  .events-grid article > img,
  .case-track article > img,
  .solution-case-track article > img,
  .solution-case-grid article img,
  .solution-use-grid article > img,
  .application-grid article > img,
  .blog-card > img,
  .news-related-card img,
  .related-card img,
  .related-grid article > img,
  .news-feature > img,
  .news-preview > img,
  .sd-gallery-media > img,
  .sd-media-card > img,
  .sd-case-grid article > img:first-of-type,
  .sd-application-card > img
) {
  transition: transform var(--card-motion-slow) var(--card-motion-ease), filter var(--card-motion-slow) var(--card-motion-ease) !important;
  transform: scale(1) !important;
  transform-origin: center !important;
  will-change: transform;
}

/* Keep product cut-outs, service icons and line icons fully visible and centred. */
html body :is(
  .product-row .product-art img,
  .catalog-card .catalog-stage img,
  .service-product-grid img,
  .product-card .product-visual img,
  .product-gallery img,
  .solution-products img,
  .sd-product-grid img,
  .resource-panels img,
  .core-advantage-cards article:not(.core-flatness) img,
  .contact-grid .line-icon,
  .benefit-grid img,
  .type-matrix img
) {
  scale: 1 !important;
}

html body .catalog-card .catalog-stage img {
  transform: translateX(-50%) !important;
}

/* Copy motion is intentionally subtler than the media motion. */
html body :is(
  .stats article,
  .core-advantage-cards article,
  .core-card-hotspot,
  .image-card,
  .case-card,
  .resource-panels > article,
  .contact-grid > article,
  .about-stat,
  .more-grid a,
  .benefit-grid article,
  .type-matrix article,
  .application-column article,
  .catalog-card,
  .case-track article,
  .solution-case-track article,
  .solution-case-grid article,
  .solution-use-grid article,
  .application-grid article,
  .support-grid article,
  .events-grid article,
  .service-product-grid a,
  .product-card,
  .product-row article,
  .news-grid article,
  .blog-card,
  .download-card,
  .news-related-card,
  .related-card,
  .related-grid article,
  .news-feature,
  .news-preview,
  .news-row,
  .sd-gallery-grid article,
  .sd-media-card,
  .sd-case-grid article,
  .sd-application-card,
  .sd-product-grid article,
  .solution-benefits article,
  .solution-products article,
  .global-clickable-card
) :is(h2, h3, h4, b, strong, p, time, small) {
  transition: transform var(--card-motion-fast) var(--card-motion-ease), color var(--card-motion-fast) ease, opacity var(--card-motion-fast) ease !important;
  transform: translate3d(0, 0, 0) !important;
  will-change: transform;
}

html body .news-row :is(a, span),
html body .more-grid a > :is(span, b) {
  transition: transform var(--card-motion-fast) var(--card-motion-ease), color var(--card-motion-fast) ease, opacity var(--card-motion-fast) ease !important;
  transform: translate3d(0, 0, 0) !important;
  will-change: transform;
}

html body .core-advantage-cards .core-flatness {
  overflow: hidden;
  isolation: isolate;
}

html body .core-advantage-cards .core-flatness img {
  transition: transform var(--card-motion-slow) var(--card-motion-ease), filter var(--card-motion-slow) var(--card-motion-ease) !important;
  transform: scale(1) !important;
  transform-origin: center !important;
}

html body :is(
  .catalog-title > span,
  .case-card > div > span,
  .events-grid article a span,
  .application-column article a span,
  .resource-links a span,
  .related-card b,
  .solution-case-grid article > span
) {
  transition: transform var(--card-motion-fast) var(--card-motion-ease), opacity var(--card-motion-fast) ease, color var(--card-motion-fast) ease !important;
  transform: translate3d(0, 0, 0) !important;
}

@media (hover: hover) and (pointer: fine) {
  html body :is(
    .image-card,
    .case-card,
    .news-grid article,
    .events-grid article,
    .case-track article,
    .solution-case-track article,
    .solution-use-grid article,
    .application-grid article,
    .blog-card,
    .related-grid article,
    .news-feature,
    .news-preview,
    .sd-media-card,
    .sd-application-card
  ):is(:hover, :focus-within, :focus-visible) > img,
  html body :is(
    .solution-case-grid article,
    .news-related-card,
    .related-card
  ):is(:hover, :focus-within, :focus-visible) img {
    transform: scale(1.026) !important;
  }

  html body .sd-gallery-grid article:is(:hover, :focus-within, :focus-visible) .sd-gallery-media > img {
    transform: scale(1.026) !important;
  }

  html body .core-advantage-cards .core-flatness:is(:hover, :focus-within, :focus-visible) img {
    transform: scale(1.026) !important;
  }

  /* A case card can contain a second overlay image; only zoom the photographic base. */
  html body .sd-case-grid article:is(:hover, :focus-within, :focus-visible) > img:first-of-type {
    transform: scale(1.026) !important;
  }

  /* Top-level headings lead, supporting copy follows by a smaller amount. */
  html body :is(
    .stats article,
    .core-advantage-cards article,
    .core-card-hotspot,
    .image-card,
    .case-card,
    .resource-panels > article,
    .contact-grid > article,
    .about-stat,
    .more-grid a,
    .benefit-grid article,
    .type-matrix article,
    .application-column article,
    .catalog-card,
    .case-track article,
    .solution-case-track article,
    .solution-case-grid article,
    .solution-use-grid article,
    .application-grid article,
    .support-grid article,
    .events-grid article,
    .service-product-grid a,
    .product-card,
    .product-row article,
    .news-grid article,
    .blog-card,
    .download-card,
    .news-related-card,
    .related-card,
    .related-grid article,
    .news-feature,
    .news-preview,
    .news-row,
    .sd-gallery-grid article,
    .sd-media-card,
    .sd-case-grid article,
    .sd-application-card,
    .sd-product-grid article,
    .solution-benefits article,
    .solution-products article,
    .global-clickable-card
  ):is(:hover, :focus-within, :focus-visible) :is(h2, h3, h4, b, strong) {
    transform: translate3d(0, -5px, 0) !important;
  }

  html body :is(
    .stats article,
    .core-advantage-cards article,
    .core-card-hotspot,
    .image-card,
    .case-card,
    .resource-panels > article,
    .contact-grid > article,
    .about-stat,
    .more-grid a,
    .benefit-grid article,
    .application-column article,
    .catalog-card,
    .case-track article,
    .solution-case-track article,
    .solution-case-grid article,
    .solution-use-grid article,
    .application-grid article,
    .support-grid article,
    .events-grid article,
    .service-product-grid a,
    .product-card,
    .product-row article,
    .news-grid article,
    .blog-card,
    .download-card,
    .news-related-card,
    .related-card,
    .related-grid article,
    .news-feature,
    .news-preview,
    .news-row,
    .sd-gallery-grid article,
    .sd-media-card,
    .sd-case-grid article,
    .sd-application-card,
    .sd-product-grid article,
    .solution-benefits article,
    .solution-products article,
    .global-clickable-card
  ):is(:hover, :focus-within, :focus-visible) :is(p, time, small) {
    transform: translate3d(0, -3px, 0) !important;
  }

  html body :is(
    .catalog-card,
    .events-grid article,
    .application-column article,
    .resource-links a,
    .related-card,
    .solution-case-grid article
  ):is(:hover, :focus-within, :focus-visible) :is(
    .catalog-title > span,
    a span,
    div > span,
    b
  ) {
    transform: translate3d(0, 0, 0) !important;
  }

  html body .news-row:is(:hover, :focus-within, :focus-visible) {
    padding-left: 20px !important;
  }

  html body .news-row:is(:hover, :focus-within, :focus-visible) :is(a, span) {
    transform: translate3d(0, -3px, 0) !important;
  }

  html body .more-grid a:is(:hover, :focus-within, :focus-visible) > span {
    transform: translate3d(0, -5px, 0) !important;
  }

  html body .more-grid a:is(:hover, :focus-within, :focus-visible) > b {
    transform: translate3d(0, -3px, 0) !important;
  }

  html body .more-grid a:not(.active):is(:hover, :focus-within, :focus-visible) {
    border-radius: 10px !important;
  }

  /* RONA uses stronger title colour on light editorial cards. */
  html body :is(
    .product-row article,
    .news-grid article,
    .events-grid article,
    .blog-card,
    .download-card,
    .catalog-card,
    .solution-benefits article,
    .solution-products article
  ):is(:hover, :focus-within, :focus-visible) :is(h2, h3, h4) {
    color: #1f6fe0 !important;
  }

  /* Explicitly lock non-photographic artwork and icons during hover. */
  html body :is(
    .product-row article,
    .catalog-card,
    .service-product-grid a,
    .product-card,
    .solution-products article,
    .sd-product-grid article,
    .contact-grid article,
    .benefit-grid article,
    .type-matrix article
  ):is(:hover, :focus-within, :focus-visible) :is(
    .product-art img,
    .catalog-stage img,
    .product-visual img,
    img.line-icon,
    img[class*="icon"]
  ) {
    scale: 1 !important;
  }

  html body .catalog-card:is(:hover, :focus-within, :focus-visible) .catalog-stage img {
    transform: translateX(-50%) !important;
  }

  html body .product-row article:is(:hover, :focus-within, :focus-visible) .product-art img,
  html body .service-product-grid a:is(:hover, :focus-within, :focus-visible) img,
  html body .product-card:is(:hover, :focus-within, :focus-visible) .product-visual img,
  html body .solution-products article:is(:hover, :focus-within, :focus-visible) img {
    transform: none !important;
  }

  html body .sd-product-grid article:is(:hover, :focus-within, :focus-visible) img {
    scale: 1 !important;
    transform: none !important;
  }

  html body .contact-grid article:is(:hover, :focus-within, :focus-visible) .line-icon {
    transform: translateX(-50%) !important;
  }

  html body .sd-case-grid article:is(:hover, :focus-within, :focus-visible) > img:not(:first-of-type) {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body :is(
    .image-card,
    .case-card,
    .news-grid article,
    .events-grid article,
    .case-track article,
    .solution-case-track article,
    .solution-case-grid article,
    .solution-use-grid article,
    .blog-card,
    .news-related-card,
    .related-card,
    .related-grid article,
    .global-clickable-card
  ) * {
    transition-duration: 0.01ms !important;
  }
}