.pack-3d-wrap {
  perspective: 1400px;
  width: 240px;
  height: 14rem;
  display: grid;
  place-items: center;
}

.pack-3d-spin {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: slideUpFlip3D var(--dur) ease-out forwards;
  will-change: transform;
}

/* BOTH faces */
.pack-face-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* FRONT must be exactly 0deg */
.pack-face-wrap.front {
  transform: rotateY(0deg) translateZ(2px);
}

/* BACK must be exactly 180deg */
.pack-face-wrap.back {
  transform: rotateY(180deg) translateZ(2px);
}

.pack-face-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* YOUR 3D flip */
@keyframes slideUpFlip3D {
  0% {
    transform: translateY(100vh) rotateY(0deg);
  }

  /* reach center */
  18% {
    transform: translateY(-40px) rotateY(0deg);
  }

  /* overshoot + flip STARTS here */
  26% {
    transform: translateY(-30px) rotateY(-90deg);
  }

  /* coming back while flipping */
  34% {
    transform: translateY(0) rotateY(-180deg);
  }

  /* continue flipping in place */
  50% {
    transform: translateY(0) rotateY(-360deg);
  }

  65% {
    transform: translateY(0) rotateY(-540deg);
  }

  100% {
    transform: translateY(0) rotateY(-720deg);
  }
}

.pack-glow {
  animation: packGlow 3.5s ease-out forwards;
}

@keyframes packGlow {
  0%,
  30% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(43, 90, 255, 0));
  }

  /* flip starts */
  40% {
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(43, 90, 255, 0.5));
  }

  50% {
    filter: brightness(1.4) drop-shadow(0 0 18px rgba(43, 90, 255, 0.8));
  }

  60% {
    filter: brightness(1.3) drop-shadow(0 0 14px rgba(43, 90, 255, 0.6));
  }

  /* flip end */
  70% {
    filter: brightness(1.1) drop-shadow(0 0 6px rgba(43, 90, 255, 0.3));
  }

  85% {
    filter: brightness(1.2) drop-shadow(0 0 20px rgba(43, 90, 255, 0.8));
  }

  100% {
    filter: brightness(1.5) drop-shadow(0 0 40px rgba(43, 90, 255, 0.9));
  }
}

@keyframes slideUpFlip {
  0% {
    transform: translateY(100vh) rotateY(0deg);
    /* opacity: 0; */
    /* filter: blur(0px) brightness(1); */
  }
  30% {
    transform: translateY(0) rotateY(0deg);
    opacity: 1;
    /* filter: blur(0px) brightness(1); */
  }
  40% {
    transform: translateY(0) rotateY(180deg);
    /* filter: blur(2px) brightness(1.5); */
  }
  50% {
    transform: translateY(0) rotateY(360deg);
    /* filter: blur(0px) brightness(1); */
  }
  60% {
    transform: translateY(0) rotateY(540deg);
    /* filter: blur(2px) brightness(1.5); */
  }
  70% {
    transform: translateY(0) rotateY(720deg);
    /* filter: blur(0px) brightness(1); */
  }
  85% {
    /* blur(1px) */
    filter: brightness(1) drop-shadow(0 0 20px rgba(43, 90, 255, 0.8));
  }
  100% {
    transform: translateY(0) rotateY(720deg) scale(1);
    /* opacity: 0; blur(2px) */
    filter: brightness(1.5) drop-shadow(0 0 40px rgba(43, 90, 255, 0.8));
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out forwards;
  opacity: 0;
}

/* NEW: glow + shine */
@keyframes card-glow {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  40% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes card-shine {
  0% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(43, 90, 255, 0));
  }
  50% {
    filter: brightness(1.9) drop-shadow(0 0 35px rgba(43, 90, 255, 0.9));
  }
  100% {
    filter: brightness(1.1) drop-shadow(0 0 10px rgba(43, 90, 255, 0.5));
  }
}

.animate-card-shine {
  animation: card-shine 1.2s ease-out forwards;
}

.animate-card-glow {
  animation: card-glow 1.2s ease-out forwards;
}

.shine-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

/* Diagonal shiny strip */
.shine-layer {
  position: absolute;
  top: -100%;
  left: 50%;
  width: 200%;
  height: 260%;
  /* narrow bright band in middle */
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.1) 55%,
    transparent 65%,
    transparent 100%
  );
  transform: translate3d(120%, -160%, 0) rotate(18deg); /* start top-right */
  filter: blur(3px);
  mix-blend-mode: screen; /* real “light” look */
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  animation: diagonal-shine 2.1s ease-out forwards infinite;
}

@keyframes diagonal-shine {
  0% {
    transform: translate3d(120%, -60%, 0) rotate(18deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate3d(-170%, 60%, 0) rotate(18deg); /* exit bottom-left */
    opacity: 0;
  }
}

@media (width <= 48rem /* 768px */) {
  .pack-face-img {
    width: 150px;
    height: 200px;
  }
}



.bg-img{
   background-image: url("/images/mystery-packs/bg-img.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}