/* Product 30: perspective-matched event horizon and inward-moving data particles. */
@property --ms-dev-null-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes ms-dev-null-horizon {
  from {
    --ms-dev-null-angle: 0deg;
    filter: blur(2px) hue-rotate(0deg) saturate(1.15);
  }

  to {
    --ms-dev-null-angle: 360deg;
    filter: blur(2px) hue-rotate(120deg) saturate(1.4);
  }
}

@keyframes ms-dev-null-particles {
  0% {
    opacity: .82;
    transform: translate(-50%, -50%) rotate(-5deg) scale(1.1);
    filter: hue-rotate(0deg) saturate(1.2);
  }

  72% {
    opacity: .28;
    transform: translate(-50%, -50%) rotate(-5deg) scale(.8);
    filter: hue-rotate(105deg) saturate(1.45);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-5deg) scale(.7);
    filter: hue-rotate(120deg) saturate(1.5);
  }
}

@keyframes ms-dev-null-breathe {
  0%, 100% {
    filter: brightness(.98) contrast(1.02) saturate(1);
  }

  50% {
    filter: brightness(1.055) contrast(1.1) saturate(1.16);
  }
}

body.product-id-30 .product-cover,
.product-miniature[data-id-product="30"] .product-thumbnail {
  position: relative;
  isolation: isolate;
}

body.product-id-30 .product-cover .js-qv-product-cover,
.product-miniature[data-id-product="30"] .product-thumbnail img {
  animation: ms-dev-null-breathe 4.8s ease-in-out infinite;
  will-change: filter;
}

body.product-id-30 .product-cover::before,
.product-miniature[data-id-product="30"] .product-thumbnail::before {
  position: absolute;
  top: 39%;
  left: 50.5%;
  width: 51%;
  height: 27%;
  z-index: 1;
  pointer-events: none;
  content: "";
  background:
    conic-gradient(from var(--ms-dev-null-angle) at 50% 50%,
      transparent 0 8deg,
      rgba(64, 247, 255, .92) 16deg,
      transparent 28deg 72deg,
      rgba(255, 77, 216, .78) 84deg,
      transparent 98deg 148deg,
      rgba(64, 247, 255, .86) 160deg,
      transparent 174deg 224deg,
      rgba(255, 77, 216, .82) 238deg,
      transparent 252deg 310deg,
      rgba(64, 247, 255, .8) 324deg,
      transparent 338deg 360deg);
  -webkit-mask-image: radial-gradient(ellipse at center,
    transparent 0 62%,
    rgba(0, 0, 0, .18) 68%,
    rgba(0, 0, 0, .76) 76%,
    #000 82%,
    rgba(0, 0, 0, .66) 89%,
    rgba(0, 0, 0, .16) 96%,
    transparent 100%);
  mask-image: radial-gradient(ellipse at center,
    transparent 0 62%,
    rgba(0, 0, 0, .18) 68%,
    rgba(0, 0, 0, .76) 76%,
    #000 82%,
    rgba(0, 0, 0, .66) 89%,
    rgba(0, 0, 0, .16) 96%,
    transparent 100%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) rotate(-5deg);
  transform-origin: center;
  animation: ms-dev-null-horizon 7.5s linear infinite;
  will-change: filter;
}

body.product-id-30 .product-cover::after,
.product-miniature[data-id-product="30"] .product-thumbnail::after {
  position: absolute;
  top: 39%;
  left: 50.5%;
  width: 58%;
  height: 34%;
  z-index: 1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 47%, rgba(64, 247, 255, .13) 58%, rgba(255, 77, 216, .2) 69%, transparent 82%),
    radial-gradient(circle at 16% 48%, rgba(64, 247, 255, .95) 0 1%, rgba(64, 247, 255, .28) 1.8%, transparent 4.4%),
    radial-gradient(circle at 26% 18%, rgba(64, 247, 255, .9) 0 .9%, rgba(64, 247, 255, .24) 1.7%, transparent 4.2%),
    radial-gradient(circle at 50% 7%, rgba(64, 247, 255, .95) 0 .9%, rgba(64, 247, 255, .26) 1.7%, transparent 4.3%),
    radial-gradient(circle at 75% 18%, rgba(64, 247, 255, .88) 0 .9%, rgba(64, 247, 255, .23) 1.7%, transparent 4.1%),
    radial-gradient(circle at 88% 48%, rgba(64, 247, 255, .92) 0 1%, rgba(64, 247, 255, .25) 1.8%, transparent 4.4%),
    radial-gradient(circle at 72% 80%, rgba(64, 247, 255, .9) 0 .9%, rgba(64, 247, 255, .24) 1.7%, transparent 4.2%),
    radial-gradient(circle at 30% 82%, rgba(64, 247, 255, .95) 0 .9%, rgba(64, 247, 255, .26) 1.7%, transparent 4.3%);
  mix-blend-mode: screen;
  transform-origin: center;
  animation: ms-dev-null-particles 4.8s ease-in infinite;
  will-change: transform, opacity, filter;
}

body.product-id-30 .product-cover .layer {
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  body.product-id-30 .product-cover .js-qv-product-cover,
  .product-miniature[data-id-product="30"] .product-thumbnail img,
  body.product-id-30 .product-cover::before,
  .product-miniature[data-id-product="30"] .product-thumbnail::before,
  body.product-id-30 .product-cover::after,
  .product-miniature[data-id-product="30"] .product-thumbnail::after {
    animation: none !important;
  }

  body.product-id-30 .product-cover::before,
  .product-miniature[data-id-product="30"] .product-thumbnail::before {
    filter: blur(2px);
  }

  body.product-id-30 .product-cover::after,
  .product-miniature[data-id-product="30"] .product-thumbnail::after {
    opacity: .38;
    transform: translate(-50%, -50%) rotate(-5deg);
  }
}