/* Interactive branded media effects */
:root {
  --pc-media-shadow: 0 12px 30px rgba(20, 20, 35, 0.22);
  --pc-media-shadow-hover: 0 20px 45px rgba(20, 20, 35, 0.3);
}

img.pc-interactive-media {
  transform-style: preserve-3d;
  will-change: transform, filter, box-shadow;
  transition: transform 280ms ease, filter 280ms ease, box-shadow 280ms ease;
  box-shadow: var(--pc-media-shadow);
  backface-visibility: hidden;
  --pc-tilt-x: 0deg;
  --pc-tilt-y: 0deg;
  --pc-scale: 1;
  --pc-brightness: 1;
  transform: perspective(900px) rotateX(var(--pc-tilt-x)) rotateY(var(--pc-tilt-y)) scale(var(--pc-scale));
  filter: saturate(1.08) contrast(1.03) brightness(var(--pc-brightness));
}

img.pc-interactive-media:hover {
  box-shadow: var(--pc-media-shadow-hover);
}

img.pc-interactive-media.pc-click-pulse {
  animation: pcPulse 480ms ease;
}

@keyframes pcPulse {
  0% { transform: perspective(900px) rotateX(0deg) rotateY(0deg) scale(1); }
  50% { transform: perspective(900px) rotateX(var(--pc-tilt-x)) rotateY(var(--pc-tilt-y)) scale(1.04); }
  100% { transform: perspective(900px) rotateX(var(--pc-tilt-x)) rotateY(var(--pc-tilt-y)) scale(var(--pc-scale)); }
}

@media (hover: none), (pointer: coarse) {
  img.pc-interactive-media {
    transform: none !important;
    transition: filter 220ms ease, box-shadow 220ms ease;
  }
}