/*
 * Shared product interaction contract.
 *
 * Product surfaces opt in with .product-interaction. The Home Hero uses the
 * same contract, with its existing product offset/scale supplied through the
 * variables below so the reveal and final positioning stay independent.
 */
.product-interaction {
  --product-interaction-duration: .35s;
  --product-interaction-ease: cubic-bezier(.22, .8, .24, 1);
  --product-interaction-lift: -5px;
  --product-interaction-scale: 1.025;
  --product-interaction-transform: translateY(var(--product-interaction-lift));
  --product-interaction-glow: var(--copper);
  --product-interaction-glow-soft: var(--copper);
  --product-interaction-glow-opacity: .72;
  --product-interaction-image-filter: drop-shadow(0 18px 19px #00000057);
  --product-interaction-image-hover-filter: drop-shadow(0 25px 25px #0000006b) drop-shadow(0 0 22px var(--product-interaction-glow));
  --product-interaction-image-transform: scale(var(--product-interaction-scale));
  --product-interaction-focus-offset: 3px;
  isolation: isolate;
  position: relative;
  transition:
    transform var(--product-interaction-duration) var(--product-interaction-ease),
    border-color var(--product-interaction-duration) var(--product-interaction-ease),
    box-shadow var(--product-interaction-duration) var(--product-interaction-ease);
}

/* The glow is a soft, product-shaped pool rather than a generic card shadow. */
.product-interaction::before {
  content: "";
  z-index: 0;
  pointer-events: none;
  position: absolute;
  inset: auto 8% 7%;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--product-interaction-glow) 0%, transparent 74%);
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--product-interaction-glow) 72%, transparent) 0%,
    color-mix(in srgb, var(--product-interaction-glow-soft) 28%, transparent) 42%,
    transparent 74%
  );
  filter: blur(17px);
  opacity: 0;
  transform: scale(.8);
  transition:
    opacity var(--product-interaction-duration) var(--product-interaction-ease),
    transform .45s var(--product-interaction-ease);
}

/* Keep content above the glow while allowing the glow to sit inside the card. */
.product-interaction > * {
  z-index: 1;
  position: relative;
}

.product-interaction > img,
.product-interaction .home-product-image img,
.product-interaction .product-image img {
  filter: var(--product-interaction-image-filter);
  transition:
    transform var(--product-interaction-duration) var(--product-interaction-ease),
    filter var(--product-interaction-duration) var(--product-interaction-ease);
}

/* One state selector keeps hover, keyboard focus, and touch focus aligned. */
body .product-interaction:is(:hover, :focus-within, :focus-visible) {
  border-color: var(--copper);
  transform: var(--product-interaction-transform);
}

body .product-interaction:is(:hover, :focus-within, :focus-visible)::before {
  opacity: var(--product-interaction-glow-opacity);
  transform: scale(1);
}

body .product-interaction:is(:hover, :focus-within, :focus-visible) > img,
body .product-interaction:is(:hover, :focus-within, :focus-visible) .home-product-image img,
body .product-interaction:is(:hover, :focus-within, :focus-visible) .product-image img {
  filter: var(--product-interaction-image-hover-filter);
  transform: var(--product-interaction-image-transform);
}

body .product-interaction:active > img,
body .product-interaction:active .home-product-image img,
body .product-interaction:active .product-image img {
  transition-duration: .14s;
  transform: var(--product-interaction-active-image-transform, scale(1.015));
}

@supports (color: color-mix(in srgb, red, red)) {
  body .product-interaction:is(:hover, :focus-within, :focus-visible) {
    box-shadow:
      0 14px 30px color-mix(in srgb, var(--copper) 18%, transparent),
      0 4px 18px color-mix(in srgb, var(--ink) 8%, transparent);
  }
}

@supports not (color: color-mix(in srgb, red, red)) {
  body .product-interaction:is(:hover, :focus-within, :focus-visible) {
    box-shadow: 0 14px 30px #0000001c;
  }
}

/* Keyboard users get a visible ring without forcing one on mouse hover. */
body .product-interaction:focus-visible {
  outline: 2px solid var(--hero-accent, var(--copper));
  outline-offset: var(--product-interaction-focus-offset);
}

/* Article-based cards use their nested links for focus; mirror the same ring
 * without showing it for ordinary pointer focus. */
body .product-interaction:has(:focus-visible) {
  outline: 2px solid var(--hero-accent, var(--copper));
  outline-offset: var(--product-interaction-focus-offset);
}

/* Preserve the Home Hero's existing tone, scale, and product offsets. */
.home-hero-product.product-interaction {
  --product-interaction-transform: translateY(calc(var(--product-offset, 0px) - 8px)) scale(calc(var(--product-scale, .88) * 1.025));
  --product-interaction-image-transform: none;
  --product-interaction-active-image-transform: translateY(-4px) scale(1.015);
  --product-interaction-glow: var(--product-glow, var(--copper));
  --product-interaction-glow-soft: var(--product-glow-soft, var(--copper));
  --product-interaction-focus-offset: 6px;
}

.home-hero-product.product-interaction::before {
  left: 8%;
  right: 8%;
  bottom: 7%;
}

.home-hero-product.product-interaction--mixed::before {
  background:
    radial-gradient(at 35% 53%, #d77a2cb8 0%, #0000 52%),
    radial-gradient(at 68% 53%, #ca4630ad 0%, #0000 52%),
    radial-gradient(#f4c66957 0%, #0000 76%);
}

@media (prefers-reduced-motion: reduce) {
  .product-interaction,
  .product-interaction::before,
  .product-interaction > img,
  .product-interaction .home-product-image img,
  .product-interaction .product-image img {
    transition: none;
  }

  body .product-interaction:is(:hover, :focus-within, :focus-visible) {
    transform: none;
  }

  body .product-interaction:is(:hover, :focus-within, :focus-visible)::before {
    transform: none;
  }

  body .product-interaction:is(:hover, :focus-within, :focus-visible) > img,
  body .product-interaction:is(:hover, :focus-within, :focus-visible) .home-product-image img,
  body .product-interaction:is(:hover, :focus-within, :focus-visible) .product-image img {
    transform: none;
  }
}