/* Shared pointer feedback for product, solution, application and resource surfaces. */
:root {
  --inno-interaction-ease: cubic-bezier(.16, 1, .3, 1);
  --inno-interaction-shadow: 0 14px 30px rgba(6, 39, 93, .14);
  --inno-interaction-shadow-soft: 0 10px 24px rgba(6, 39, 93, .11);
}

/* Keep the direct-measurement architecture cards tall enough for their full copy. */
.dhs-board-architecture .dhs-architecture-step {
  height: 250px !important;
  min-height: 250px !important;
}

@media (max-width: 760px) {
  .dhs-board-architecture .dhs-architecture-step {
    height: auto !important;
    min-height: 174px !important;
  }
}

/* Shared shell controls stay interactive on every route, including the floating contact dock. */
:is(.replica-talk, .header-cta, .service-dock > a, .replica-menu-toggle) {
  transition: transform 220ms var(--inno-interaction-ease), box-shadow 220ms var(--inno-interaction-ease), background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

@media (hover: hover) {
  :is(.replica-talk, .header-cta, .service-dock > a, .replica-menu-toggle):hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgba(6, 39, 93, .16);
  }
}

/* Interactive cards keep the same geometry while gaining a clear, restrained lift. */
main :is(
  .card:has(a, button),
  article[class*="card"]:has(a, button),
  a[class*="-card"],
  .category-featured-product,
  .contact-detail,
  .contact-engineer__actions > a,
  .about-industries > div > a,
  [class*="-grid"] > article:has(a, button),
  [class*="-grid"] > a:not(:has(> article)),
  [class*="-grid"] > a > article,
  .article-detail__related-posts > a,
  .about-certificates figure
) {
  transition: transform 260ms var(--inno-interaction-ease), box-shadow 260ms var(--inno-interaction-ease), border-color 220ms ease, background-color 220ms ease;
}

@media (hover: hover) {
  main :is(
    .card:has(a, button),
    article[class*="card"]:has(a, button),
    a[class*="-card"],
    .category-featured-product,
    .contact-detail,
    .contact-engineer__actions > a,
    .about-industries > div > a,
    [class*="-grid"] > article:has(a, button),
    [class*="-grid"] > a:not(:has(> article)),
    [class*="-grid"] > a > article,
    .article-detail__related-posts > a,
    .about-certificates figure
  ):hover {
    transform: translateY(-4px);
    box-shadow: var(--inno-interaction-shadow);
  }
}

main :is(
  .card:has(a, button),
  article[class*="card"]:has(a, button),
  a[class*="-card"],
  .category-featured-product,
  .contact-detail,
  .contact-engineer__actions > a,
  .about-industries > div > a,
  [class*="-grid"] > article:has(a, button),
  [class*="-grid"] > a:not(:has(> article)),
  [class*="-grid"] > a > article,
  .article-detail__related-posts > a,
  .about-certificates figure
):focus-within {
  transform: translateY(-3px);
  box-shadow: var(--inno-interaction-shadow-soft);
}

/* Image links receive a small optical zoom; the containing card supplies the lift. */
main :is(a:has(> img), a:has(> picture)):not(.card-media-link):not([class*="button"]) {
  transition: transform 260ms var(--inno-interaction-ease), box-shadow 260ms var(--inno-interaction-ease), border-color 220ms ease;
}

main :is(a.card-media-link, a:has(> img), a:has(> picture)) img {
  transition: transform 360ms var(--inno-interaction-ease), filter 260ms ease;
}

@media (hover: hover) {
  main :is(a:has(> img), a:has(> picture)):not(.card-media-link):not([class*="button"]):hover {
    transform: translateY(-3px);
    box-shadow: var(--inno-interaction-shadow-soft);
  }

  main :is(a.card-media-link, a:has(> img), a:has(> picture)):hover img,
  main img[role="button"]:hover {
    transform: scale(1.035);
    filter: saturate(1.04);
  }
}

main img[role="button"] {
  cursor: pointer;
  transition: transform 260ms var(--inno-interaction-ease), filter 220ms ease;
}

main img[role="button"]:focus-visible {
  outline: 3px solid var(--inno-cyan, #55c8e3);
  outline-offset: 3px;
}

/* CTA links and controls use the same physical response across route-specific stylesheets. */
main :is(
  a.button,
  button.button,
  a[class*="button"],
  button[class*="button"],
  [class*="actions"] > a,
  [class*="actions"] > button,
  [class*="-cta"] a,
  [class*="-cta"] button,
  [data-inquiry-open],
  .cases-filter button,
  .pd-thumbnails button,
  .about-video-frame
) {
  transition: transform 220ms var(--inno-interaction-ease), box-shadow 220ms var(--inno-interaction-ease), background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

@media (hover: hover) {
  main :is(
    a.button,
    button.button,
    a[class*="button"],
    button[class*="button"],
    [class*="actions"] > a,
    [class*="actions"] > button,
    [class*="-cta"] a,
    [class*="-cta"] button,
    [data-inquiry-open],
    .cases-filter button,
    .pd-thumbnails button,
    .about-video-frame
  ):not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgba(6, 39, 93, .16);
  }
}

/* A single optical sweep marks the highest-priority entry points without animating every card. */
main :is(
  .replica-home .product-grid > .product-card:nth-child(1),
  .product-replica .recommended-grid > article:nth-child(1),
  .product-category-page .category-featured-product,
  .applications-page .large-grid > a:nth-child(1),
  .applications-page .split > a:nth-child(1),
  .sol-card-grid > .sol-solution-card:nth-child(-n + 2),
  .cases-replica .cases-library-grid > article:nth-child(-n + 2),
  .blog-replica .blog-guide-grid > a:nth-child(1),
  .pd-page .pd-related-grid > article:nth-child(1),
  .ind-page .ind-featured-grid > a:nth-child(1)
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

main :is(
  .replica-home .product-grid > .product-card:nth-child(1),
  .product-replica .recommended-grid > article:nth-child(1),
  .product-category-page .category-featured-product,
  .applications-page .large-grid > a:nth-child(1),
  .applications-page .split > a:nth-child(1),
  .sol-card-grid > .sol-solution-card:nth-child(-n + 2),
  .cases-replica .cases-library-grid > article:nth-child(-n + 2),
  .blog-replica .blog-guide-grid > a:nth-child(1),
  .pd-page .pd-related-grid > article:nth-child(1),
  .ind-page .ind-featured-grid > a:nth-child(1)
)::after {
  position: absolute;
  z-index: 2;
  inset: -45% -60%;
  background: linear-gradient(108deg, transparent 40%, rgba(255, 255, 255, .62) 49%, rgba(255, 255, 255, .1) 56%, transparent 65%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-72%) rotate(9deg);
}

@media (hover: hover) {
  main :is(
    .replica-home .product-grid > .product-card:nth-child(1),
    .product-replica .recommended-grid > article:nth-child(1),
    .product-category-page .category-featured-product,
    .applications-page .large-grid > a:nth-child(1),
    .applications-page .split > a:nth-child(1),
    .sol-card-grid > .sol-solution-card:nth-child(-n + 2),
    .cases-replica .cases-library-grid > article:nth-child(-n + 2),
    .blog-replica .blog-guide-grid > a:nth-child(1),
    .pd-page .pd-related-grid > article:nth-child(1),
    .ind-page .ind-featured-grid > a:nth-child(1)
  ):hover::after {
    animation: inno-card-sheen 900ms var(--inno-interaction-ease) both;
  }
}

@keyframes inno-card-sheen {
  from { opacity: 0; transform: translateX(-72%) rotate(9deg); }
  18% { opacity: 1; }
  to { opacity: 0; transform: translateX(72%) rotate(9deg); }
}

@media (prefers-reduced-motion: reduce) {
  :is(.replica-talk, .header-cta, .service-dock > a, .replica-menu-toggle):hover,
  main :is(
    a.button,
    button.button,
    a[class*="button"],
    button[class*="button"],
    [class*="actions"] > a,
    [class*="actions"] > button,
    [class*="-cta"] a,
    [class*="-cta"] button,
    [data-inquiry-open],
    .cases-filter button,
    .pd-thumbnails button,
    .about-video-frame
  ):hover {
    transform: none;
  }

  main :is(
    .card:has(a, button),
    article[class*="card"]:has(a, button),
    a[class*="-card"],
    .category-featured-product,
    .contact-detail,
    .contact-engineer__actions > a,
    .about-industries > div > a,
    [class*="-grid"] > article:has(a, button),
    [class*="-grid"] > a:not(:has(> article)),
    [class*="-grid"] > a > article,
    .article-detail__related-posts > a,
    .about-certificates figure
  ):hover,
  main :is(a:has(> img), a:has(> picture)):not(.card-media-link):not([class*="button"]):hover,
  main :is(a.card-media-link, a:has(> img), a:has(> picture)):hover img,
  main img[role="button"]:hover {
    transform: none;
  }

  main :is(
    .replica-home .product-grid > .product-card:nth-child(1),
    .product-replica .recommended-grid > article:nth-child(1),
    .product-category-page .category-featured-product,
    .applications-page .large-grid > a:nth-child(1),
    .applications-page .split > a:nth-child(1),
    .sol-card-grid > .sol-solution-card:nth-child(-n + 2),
    .cases-replica .cases-library-grid > article:nth-child(-n + 2),
    .blog-replica .blog-guide-grid > a:nth-child(1),
    .pd-page .pd-related-grid > article:nth-child(1),
    .ind-page .ind-featured-grid > a:nth-child(1)
  )::after {
    animation: none;
    opacity: 0;
  }
}