/* Mr Pep — ethereal floating pack (clinical-magic) */
@keyframes mp-float-turn {
  0%   { transform: perspective(1100px) rotateY(-16deg) rotateX(5deg) translateY(0) scale(1); }
  35%  { transform: perspective(1100px) rotateY(6deg) rotateX(2deg) translateY(-8px) scale(1.015); }
  50%  { transform: perspective(1100px) rotateY(16deg) rotateX(3deg) translateY(-10px) scale(1.02); }
  75%  { transform: perspective(1100px) rotateY(-4deg) rotateX(4deg) translateY(-5px) scale(1.01); }
  100% { transform: perspective(1100px) rotateY(-16deg) rotateX(5deg) translateY(0) scale(1); }
}

@keyframes mp-aura-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.22),
      0 0 18px 2px rgba(155, 108, 255, 0.28),
      0 0 36px 6px rgba(212, 175, 55, 0.12),
      0 22px 40px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.38),
      0 0 28px 6px rgba(155, 108, 255, 0.42),
      0 0 52px 10px rgba(212, 175, 55, 0.22),
      0 26px 48px rgba(0, 0, 0, 0.55);
  }
}

@keyframes mp-shimmer-sweep {
  0%   { background-position: 140% 0; opacity: 0.35; }
  40%  { opacity: 0.7; }
  100% { background-position: -60% 0; opacity: 0.25; }
}

@keyframes mp-sparkle {
  0%, 100% { opacity: 0.15; transform: scale(0.85); }
  50%      { opacity: 0.85; transform: scale(1.15); }
}

img.pack-photo {
  position: relative;
  object-fit: contain !important;
  object-position: center !important;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(55, 42, 78, 0.95) 0%, #0c0a0f 70%),
    radial-gradient(circle at 30% 25%, rgba(212, 175, 55, 0.12), transparent 45%),
    radial-gradient(circle at 75% 20%, rgba(155, 108, 255, 0.14), transparent 40%);
  padding: 1.15rem !important;
  box-sizing: border-box;
  transform-style: preserve-3d;
  will-change: transform, filter, box-shadow;
  filter:
    drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(155, 108, 255, 0.22))
    drop-shadow(0 0 10px rgba(212, 175, 55, 0.14));
  border-radius: 0.75rem;
  animation: mp-aura-pulse 5.5s ease-in-out infinite;
}

/* Soft gold/violet ring + ethereal float on catalog links */
a:has(> img.pack-photo) {
  position: relative;
  isolation: isolate;
}

a:has(> img.pack-photo)::before {
  content: "";
  position: absolute;
  inset: -6% -4% -4%;
  border-radius: 1rem;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(155, 108, 255, 0.22) 0%, transparent 62%),
    radial-gradient(ellipse at 40% 35%, rgba(212, 175, 55, 0.16) 0%, transparent 55%);
  z-index: -1;
  pointer-events: none;
  filter: blur(10px);
  opacity: 0.9;
}

a:has(> img.pack-photo)::after {
  content: "";
  position: absolute;
  inset: 8% 10% 18%;
  border-radius: 0.65rem;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 245, 210, 0.0) 42%,
    rgba(255, 245, 210, 0.22) 50%,
    rgba(201, 164, 255, 0.12) 56%,
    transparent 64%,
    transparent 100%
  );
  background-size: 220% 100%;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
}

/* Tiny sparkle dots (CSS-only) */
a.shrink-0:has(> img.pack-photo) {
  --spark: radial-gradient(circle, rgba(255, 236, 180, 0.95) 0 1.2px, transparent 1.6px);
}

.pack-photo.h-36,
img.pack-photo.h-36 {
  height: 12rem !important;
  width: 9.25rem !important;
}

@media (min-width: 40rem) {
  .pack-photo.sm\:h-44,
  img.pack-photo.sm\:h-44 {
    height: 14.5rem !important;
    width: 11rem !important;
  }
}

.pack-photo.aspect-\[3\/4\],
img.pack-photo.aspect-\[3\/4\] {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
  padding: 1.3rem !important;
}

@media (prefers-reduced-motion: no-preference) {
  a img.pack-photo,
  a:hover img.pack-photo {
    animation:
      mp-float-turn 8s ease-in-out infinite,
      mp-aura-pulse 5.5s ease-in-out infinite;
  }
  a:has(> img.pack-photo)::after {
    animation: mp-shimmer-sweep 4.8s ease-in-out infinite;
  }
  a:hover img.pack-photo {
    animation-duration: 4.4s, 3.2s;
    filter:
      drop-shadow(0 24px 40px rgba(0, 0, 0, 0.62))
      drop-shadow(0 0 22px rgba(155, 108, 255, 0.38))
      drop-shadow(0 0 16px rgba(212, 175, 55, 0.28));
  }
  a:hover:has(> img.pack-photo)::before {
    opacity: 1;
    filter: blur(14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  a img.pack-photo {
    animation: none;
  }
  a:has(> img.pack-photo)::after {
    animation: none;
    opacity: 0.25;
  }
  a:hover img.pack-photo {
    transform: perspective(900px) rotateY(-10deg) scale(1.02);
  }
}

/* Fallback when :has() unsupported — still float + glow on img */
@supports not selector(:has(*)) {
  @media (prefers-reduced-motion: no-preference) {
    img.pack-photo {
      animation:
        mp-float-turn 8s ease-in-out infinite,
        mp-aura-pulse 5.5s ease-in-out infinite;
    }
  }
}

#lounge-banner canvas.lounge-canvas{display:none!important}
body,html{opacity:1!important;visibility:visible!important}