/* Pizza Planet intro — truck drive, caption, then claw delivers the photo. */

.ppi {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.ppi--active {
  opacity: 1;
}

.ppi--exiting {
  opacity: 0;
}

/* Keep shopping usable — overlay is pointer-events: none; do not lock scroll. */

body.ppi-playing #main-image,
body.ppi-awaiting-photo #main-image {
  opacity: 0 !important;
}

body.ppi-photo-placed #main-image {
  opacity: 1 !important;
  transition: opacity 0.3s ease;
}

.ppi__stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ppi__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 65% 50% at 50% 45%,
    rgba(255, 255, 255, 0.18) 0%,
    transparent 72%
  );
  opacity: 0;
  animation: ppi-veil 5.5s ease forwards;
}

@keyframes ppi-veil {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.ppi__truck-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  height: min(36vh, 260px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: translateX(-120%);
  animation: ppi-truck-drive 1.7s cubic-bezier(0.22, 0.8, 0.3, 1) 0.45s forwards;
  z-index: 2;
}

@keyframes ppi-truck-drive {
  0% {
    transform: translateX(-120%);
    opacity: 1;
  }
  42% {
    transform: translateX(0);
    opacity: 1;
  }
  68% {
    transform: translateX(12%);
    opacity: 1;
  }
  100% {
    transform: translateX(115%);
    opacity: 0;
  }
}

.ppi__truck {
  width: min(70vw, 360px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.25));
}

.ppi__aliens-wrap {
  position: absolute;
  left: 50%;
  bottom: 24%;
  z-index: 3;
  width: min(42vw, 220px);
  transform: translate(-50%, 16px) scale(0.9);
  opacity: 0;
  animation:
    ppi-aliens-in 0.45s ease 1.45s forwards,
    ppi-aliens-glow 1.2s ease 2.2s forwards,
    ppi-aliens-out 0.35s ease 3.4s forwards;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.22));
}

@keyframes ppi-aliens-in {
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes ppi-aliens-glow {
  0% {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.22));
  }
  40% {
    filter:
      drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2))
      drop-shadow(0 -10px 18px rgba(190, 230, 255, 0.55));
  }
  100% {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.22));
  }
}

@keyframes ppi-aliens-out {
  to {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.92);
  }
}

.ppi__aliens {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 85%;
  animation: ppi-aliens-look 1.6s ease-in-out 1.55s 2;
}

@keyframes ppi-aliens-look {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  35% {
    transform: translateY(-5px) rotate(-1.5deg);
  }
  70% {
    transform: translateY(-3px) rotate(1.2deg);
  }
}

.ppi__caption {
  position: absolute;
  left: 50%;
  top: 14%;
  z-index: 7;
  transform: translate(-50%, 8px);
  margin: 0;
  padding: 0.55rem 1.1rem;
  font-size: clamp(0.95rem, 2.5vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  color: #16301c;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  opacity: 0;
  animation: ppi-caption 1.7s ease 1.9s forwards;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  max-width: min(90vw, 28rem);
  box-sizing: border-box;
}

@keyframes ppi-caption {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -4px);
  }
}

.ppi__prize {
  position: fixed;
  left: var(--ppi-x, 50%);
  top: var(--ppi-y, 30%);
  width: var(--ppi-w, min(48vw, 280px));
  height: var(--ppi-h, auto);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transform: translate(-50%, calc(-100% - 40px));
  opacity: 0;
  animation: ppi-prize-place 2.5s cubic-bezier(0.33, 0.8, 0.35, 1) 2.85s forwards;
  pointer-events: none;
}

@keyframes ppi-prize-place {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-120% - 60px)) scale(0.92);
  }
  12% {
    opacity: 1;
  }
  48% {
    opacity: 1;
    transform: translate(-50%, -6%) scale(1);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-110% - 40px)) scale(0.96);
  }
}

.ppi__claw {
  display: block;
  width: 52%;
  max-width: 140px;
  height: auto;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
  animation: ppi-claw-retract 0.65s ease 4.6s forwards;
}

@keyframes ppi-claw-retract {
  to {
    opacity: 0;
    transform: translateY(-40px);
  }
}

.ppi__prize-product {
  display: block;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  position: relative;
  z-index: 1;
  margin-top: -8%;
  opacity: 1;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.28));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
  padding: 0.35rem;
  box-sizing: border-box;
  animation: ppi-product-release 0.28s ease 4.5s forwards;
}

@keyframes ppi-product-release {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ppi,
  .ppi * {
    animation: none !important;
    transition: none !important;
  }

  body.ppi-playing #main-image,
  body.ppi-awaiting-photo #main-image {
    opacity: 1 !important;
  }
}

@media (max-width: 640px) {
  .ppi__caption {
    top: auto;
    bottom: max(22%, calc(env(safe-area-inset-bottom) + 4.5rem));
    white-space: normal;
    line-height: 1.25;
    font-size: 0.95rem;
    padding: 0.55rem 0.9rem;
    border-radius: 1rem;
  }

  .ppi__aliens-wrap {
    bottom: 30%;
    width: min(48vw, 180px);
  }

  .ppi__truck-wrap {
    bottom: 6%;
    height: min(28vh, 200px);
  }

  .ppi__truck {
    width: min(72vw, 280px);
  }

  .ppi__claw {
    max-width: 110px;
  }
}