/* Magic UI Magic Card interaction, adapted for this native HTML/CSS/JS project.
   Source reference: https://magicui.design/docs/components/magic-card */

.customer-theme.home-page .package-preview-card.magic-card {
  --magic-x: -240px;
  --magic-y: -240px;
  --magic-size: 240px;
  --magic-color: 135, 87, 255;
  isolation: isolate;
}

.customer-theme.home-page .package-preview-card.magic-card.blue {
  --magic-color: 47, 157, 255;
}

.customer-theme.home-page .package-preview-card.magic-card.red {
  --magic-color: 255, 55, 91;
}

.customer-theme.home-page .package-preview-card.magic-card > :not(.magic-card-layer) {
  position: relative;
  z-index: 7;
}

.customer-theme.home-page .package-preview-card .magic-card-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: var(--arena-frame-shape);
  opacity: 0;
  transition: opacity 220ms ease;
}

.customer-theme.home-page .package-preview-card .magic-card-glow {
  z-index: 2;
  background: radial-gradient(
    var(--magic-size) circle at var(--magic-x) var(--magic-y),
    rgba(var(--magic-color), 0.2) 0%,
    rgba(var(--magic-color), 0.085) 35%,
    transparent 72%
  );
  mix-blend-mode: screen;
}

.customer-theme.home-page .package-preview-card .magic-card-border {
  z-index: 6;
  padding: 2px;
  background: radial-gradient(
    calc(var(--magic-size) * 0.82) circle at var(--magic-x) var(--magic-y),
    rgba(255, 255, 255, 0.98) 0%,
    rgba(var(--magic-color), 0.96) 24%,
    rgba(var(--magic-color), 0.38) 52%,
    transparent 76%
  );
  filter: drop-shadow(0 0 5px rgba(var(--magic-color), 0.58));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

@media (hover: hover) and (pointer: fine) {
  .customer-theme.home-page .package-preview-card.magic-card[data-magic-active="true"] .magic-card-layer {
    opacity: 1;
  }
}

@media (max-width: 767px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .customer-theme.home-page .package-preview-card .magic-card-layer {
    display: none;
  }
}