/*
 * Shop card hover: a soft glow follows the cursor behind the card's contents, and the artwork tilts
 * towards it. Replaces Webflow's invert. Each card carries --accent (a colour picked from its own
 * artwork by scripts/accent_colors.py), set in src/lib/webflow.ts productCard();
 * src/scripts/card-spotlight.ts feeds the cursor position. Only on devices with a real pointer;
 * no tilt for reduced motion.
 */

/* Webflow's hover inverts the card and whitens its borders (so they read black once inverted) */
.product-list-item:hover { filter: none; border-left-color: #000; border-bottom-color: #000; }

/* The type flag's notch was an off-white square drawn over the flag; cut it out instead so the glow
   shows through it */
.type-label { clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%); }
.type-label-notch { display: none; }

@media (hover: hover) and (pointer: fine) {
  .product-list-item { --accent: #e8d7ff; --mx: 50%; --my: 30%; --rx: 0deg; --ry: 0deg; isolation: isolate; }
  .product-list-item::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    /* Wide, soft falloff: at most ~55% of the colour at the cursor, eased out to nothing */
    background: radial-gradient(650px circle at var(--mx) var(--my),
      color-mix(in srgb, var(--accent) 55%, transparent) 0%,
      color-mix(in srgb, var(--accent) 40%, transparent) 25%,
      color-mix(in srgb, var(--accent) 18%, transparent) 50%,
      color-mix(in srgb, var(--accent) 6%, transparent) 70%,
      transparent 85%);
  }
  .product-list-item:hover::before { opacity: 1; }

  .listview-image-wrapper { perspective: 900px; }
  .listview-image { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
  .product-list-item:hover .listview-image {
    transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1.02); transition-duration: .15s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-list-item:hover .listview-image { transform: none; }
}

/* Blog teasers (The Soundboard): Webflow inverted them on hover, which turns the photo and colour into a
   negative; instead the photo zooms in slightly and the card darkens a touch */
.blog-teaser-wrapper.blog:hover { filter: none; }
.blog-teaser-wrapper.blog { transition: background-color 0.3s ease; }
.blog-teaser-wrapper.blog img { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (hover: hover) and (pointer: fine) {
  .blog-teaser-wrapper.blog:hover { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.06); }
  .blog-teaser-wrapper.blog:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .blog-teaser-wrapper.blog:hover img { transform: none; } }