/* Pentamarket Banner Zone Animated Background V1
   Scoped ONLY to .penta-banner-zone. No category/product/checkout styling. */

.penta-banner-zone {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% -18%, rgba(190,36,220,.10), transparent 42%),
    #0a0a0a !important;
}

.penta-banner-zone > .penta-banner-meteor-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}

.penta-banner-zone > :not(.penta-banner-meteor-bg) {
  position: relative;
  z-index: 1;
}

.penta-banner-meteor-grid {
  position: absolute;
  inset: -52px;
  opacity: .14;
  background-image:
    linear-gradient(rgba(190,36,220,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190,36,220,.075) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.96), transparent 96%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.96), transparent 96%);
  animation: pentaBannerGridDrift 18s ease-in-out infinite;
  will-change: transform;
}

@keyframes pentaBannerGridDrift {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-14px,0); }
}

.penta-banner-meteor-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(72px);
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.penta-banner-meteor-orb--1 {
  width: 360px;
  height: 360px;
  top: -175px;
  left: -90px;
  opacity: .18;
  background: rgba(190,36,220,.95);
  animation: pentaBannerOrbOne 16s infinite;
}

.penta-banner-meteor-orb--2 {
  width: 320px;
  height: 320px;
  top: -65px;
  right: -125px;
  opacity: .14;
  background: rgba(168,85,247,.95);
  animation: pentaBannerOrbTwo 20s infinite;
}

.penta-banner-meteor-orb--3 {
  width: 280px;
  height: 280px;
  left: 38%;
  bottom: -185px;
  opacity: .12;
  background: rgba(217,70,239,.95);
  animation: pentaBannerOrbThree 18s infinite;
}

.penta-banner-meteor-orb--4 {
  width: 210px;
  height: 210px;
  left: 8%;
  bottom: -90px;
  opacity: .075;
  background: rgba(190,36,220,.85);
  animation: pentaBannerOrbFour 22s infinite;
}

@keyframes pentaBannerOrbOne {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(55px,38px,0) scale(1.08); }
}
@keyframes pentaBannerOrbTwo {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-60px,28px,0) scale(1.10); }
}
@keyframes pentaBannerOrbThree {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-30px,-42px,0) scale(1.07); }
}
@keyframes pentaBannerOrbFour {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(40px,-24px,0) scale(1.08); }
}

.penta-banner-meteor-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.penta-banner-meteor {
  position: absolute;
  top: -240px;
  width: var(--meteor-width, 2px);
  height: var(--meteor-height, 150px);
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    rgba(190,36,220,0) 0%,
    rgba(190,36,220,.18) 18%,
    rgba(168,85,247,.40) 48%,
    rgba(217,70,239,.78) 78%,
    rgba(255,255,255,.90) 100%
  );
  box-shadow:
    0 0 8px rgba(217,70,239,.18),
    0 0 16px rgba(190,36,220,.10);
  transform: rotate(var(--meteor-angle,16deg));
  will-change: transform, opacity;
  animation: pentaBannerMeteorFall var(--meteor-duration,8s) linear infinite;
  animation-delay: var(--meteor-delay,0s);
}

.penta-banner-meteor::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: var(--head-size,5px);
  height: var(--head-size,5px);
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow:
    0 0 5px rgba(255,255,255,.55),
    0 0 10px rgba(217,70,239,.48),
    0 0 18px rgba(190,36,220,.30);
  filter: blur(.2px);
}

@keyframes pentaBannerMeteorFall {
  0% {
    transform: translate3d(0,-180px,0) rotate(var(--meteor-angle,16deg));
    opacity: 0;
  }
  5% { opacity: var(--meteor-opacity,.75); }
  82% { opacity: calc(var(--meteor-opacity,.75) * .70); }
  100% {
    transform: translate3d(var(--meteor-drift,-130px), 820px, 0) rotate(var(--meteor-angle,16deg));
    opacity: 0;
  }
}

.penta-banner-meteor-particles {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: radial-gradient(circle, rgba(255,255,255,.50) .55px, transparent .65px);
  background-size: 31px 31px;
  animation: pentaBannerParticlesMove 28s linear infinite;
  will-change: transform;
}

@keyframes pentaBannerParticlesMove {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-31px,31px,0); }
}

.penta-banner-meteor-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    transparent 34%,
    rgba(0,0,0,.10) 74%,
    rgba(0,0,0,.46) 100%
  );
}

@media (max-width: 640px) {
  .penta-banner-meteor-grid {
    background-size: 30px 30px;
    opacity: .10;
  }

  .penta-banner-meteor-orb {
    filter: blur(58px);
  }

  .penta-banner-meteor-orb--1 {
    width: 250px;
    height: 250px;
    top: -115px;
    left: -85px;
  }

  .penta-banner-meteor-orb--2 {
    width: 210px;
    height: 210px;
    top: -55px;
    right: -80px;
  }

  .penta-banner-meteor-orb--3 {
    width: 190px;
    height: 190px;
    left: 24%;
    bottom: -130px;
  }

  .penta-banner-meteor-orb--4 {
    width: 150px;
    height: 150px;
    bottom: -85px;
  }

  .penta-banner-meteor {
    top: -200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .penta-banner-meteor-grid,
  .penta-banner-meteor-orb,
  .penta-banner-meteor,
  .penta-banner-meteor-particles {
    animation: none !important;
  }
}