/* Local to the packaging scene. The final printed state is the no-script default. */
.packaging-scene {
  position: relative;
  isolation: isolate;
  --packaging-reveal-total: 2600;
}
.packaging-print {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  font-family: Inter, Arial, sans-serif;
}
.packaging-print-mobile {
  display: none;
}
.packaging-ink {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
}
.packaging-ink-card,
.packaging-ink-label {
  mix-blend-mode: multiply;
}
.packaging-scene[data-reveal-state="ready"] .packaging-ink {
  opacity: 0;
}
.packaging-scene[data-reveal-state="running"] .packaging-ink {
  animation: packaging-print-in 700ms cubic-bezier(.22,.65,.3,1) both;
}
.packaging-scene[data-reveal-state="running"] .packaging-ink-box {
  animation-delay: 120ms;
}
.packaging-scene[data-reveal-state="running"] .packaging-ink-label {
  animation-delay: 900ms;
  animation-duration: 650ms;
}
.packaging-scene[data-reveal-state="running"] .packaging-ink-card {
  animation-delay: 1660ms;
  animation-duration: 600ms;
}
@keyframes packaging-print-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes packaging-print-mobile {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 640px) {
  .packaging-scene { --packaging-reveal-total: 2400; }
  .packaging-print-desktop { display: none; }
  .packaging-print-mobile { display: block; }
  .packaging-scene[data-reveal-state="running"] .packaging-ink {
    animation-name: packaging-print-mobile;
    animation-duration: 600ms;
  }
  .packaging-scene[data-reveal-state="running"] .packaging-ink-box { animation-delay: 100ms; }
  .packaging-scene[data-reveal-state="running"] .packaging-ink-label { animation-delay: 850ms; }
  .packaging-scene[data-reveal-state="running"] .packaging-ink-card { animation-delay: 1550ms; }
}
@media (prefers-reduced-motion: reduce) {
  .packaging-scene[data-reveal-state] .packaging-ink {
    opacity: 1;
    transform: none;
    animation: none;
  }
}