/*
 * Redemption motion layer
 * - Progress rendering: Loading.io LoadingBar.js (MIT)
 * - Celebration particles: canvas-confetti (ISC)
 * - Party popper artwork: Google Noto Emoji U+1F389 (Apache-2.0 image resource)
 */

.ui-v2 .vendor-progress-track {
  height: 32px;
  display: flex;
  align-items: center;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ui-v2 .progress-loading-bar {
  width: 100%;
  height: 32px;
  display: block;
  background: transparent;
  transition: none;
  filter:
    drop-shadow(0 8px 18px rgba(194, 119, 13, .12))
    drop-shadow(0 0 8px rgba(244, 199, 79, .18));
}

.ui-v2 .progress-loading-bar svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ui-v2 .progress-loading-bar .frame {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .72));
}

.ui-v2 .progress-loading-bar .solid {
  filter:
    drop-shadow(0 0 3px rgba(255, 235, 156, .92))
    drop-shadow(0 0 9px rgba(240, 169, 42, .58));
}

.ui-v2 .progress-loading-bar .ldBar-label {
  display: none;
}

.ui-v2 .progress-loading-bar.is-fallback {
  position: relative;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #26231d;
}

.ui-v2 .progress-loading-bar.is-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #7b4906, #c48417, #f4c74f, #fff4b5, #d4931e);
  transform: scaleX(var(--progress-scale, 0));
  transform-origin: left center;
}

.ui-v2 .progress-panel.is-completing .progress-loading-bar {
  animation: vendorProgressComplete .68s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes vendorProgressComplete {
  0% { filter: drop-shadow(0 0 7px rgba(244, 199, 79, .3)); }
  48% { filter: drop-shadow(0 0 22px rgba(255, 236, 158, .95)) brightness(1.35); }
  100% { filter: drop-shadow(0 0 10px rgba(244, 199, 79, .38)); }
}

.ui-v2 .success-celebration {
  isolation: isolate;
}

.ui-v2 .confetti-canvas {
  position: absolute;
  z-index: 4;
  inset: -74px -62px -92px;
  width: calc(100% + 124px);
  height: calc(100% + 166px);
  pointer-events: none;
}

.ui-v2 .party-popper {
  position: absolute;
  z-index: 3;
  bottom: 18px;
  width: 118px;
  height: 118px;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  filter:
    drop-shadow(0 14px 24px rgba(0, 0, 0, .34))
    drop-shadow(0 0 12px rgba(255, 197, 75, .14));
  will-change: transform, opacity;
}

.ui-v2 .party-popper > svg,
.ui-v2 .party-popper > img {
  width: 100%;
  height: 100%;
  display: block;
}

.ui-v2 .party-popper > img {
  object-fit: contain;
}

.ui-v2 .party-popper.is-lottie-ready > img {
  display: none;
}

.ui-v2 .party-popper-left {
  left: -42px;
  transform: translate3d(-20px, 16px, 0) rotate(-15deg) scale(.72);
}

.ui-v2 .party-popper-right {
  right: -42px;
  transform: translate3d(20px, 16px, 0) rotate(15deg) scaleX(-1) scale(.72);
}

.ui-v2 .success-celebration.is-active .party-popper-left {
  animation: vendorPopperLeft .8s cubic-bezier(.18, 1.45, .32, 1) .28s both;
}

.ui-v2 .success-celebration.is-active .party-popper-right {
  animation: vendorPopperRight .8s cubic-bezier(.18, 1.45, .32, 1) .28s both;
}

@keyframes vendorPopperLeft {
  0% { opacity: 0; transform: translate3d(-20px, 16px, 0) rotate(-15deg) scale(.72); }
  45% { opacity: 1; transform: translate3d(7px, -5px, 0) rotate(4deg) scale(1.08); }
  72% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-3deg) scale(.98); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes vendorPopperRight {
  0% { opacity: 0; transform: translate3d(20px, 16px, 0) rotate(15deg) scaleX(-1) scale(.72); }
  45% { opacity: 1; transform: translate3d(-7px, -5px, 0) rotate(-4deg) scaleX(-1) scale(1.08); }
  72% { opacity: 1; transform: translate3d(0, 0, 0) rotate(3deg) scaleX(-1) scale(.98); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scaleX(-1) scale(1); }
}

@media (max-width: 560px) {
  .ui-v2 .progress-loading-bar,
  .ui-v2 .vendor-progress-track {
    height: 28px;
  }

  .ui-v2 .confetti-canvas {
    inset: -54px -24px -72px;
    width: calc(100% + 48px);
    height: calc(100% + 126px);
  }

  .ui-v2 .party-popper {
    bottom: 24px;
    width: 88px;
    height: 88px;
  }

  .ui-v2 .party-popper-left { left: -42px; }
  .ui-v2 .party-popper-right { right: -42px; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-v2 .progress-panel.is-completing .progress-loading-bar {
    animation: none;
  }

  .ui-v2 .party-popper {
    animation: none !important;
    opacity: 1;
  }

  .ui-v2 .party-popper > svg {
    display: none;
  }

  .ui-v2 .party-popper > img {
    display: block;
  }

  .ui-v2 .party-popper-left {
    transform: translate3d(0, 0, 0) rotate(0) scale(.9);
  }

  .ui-v2 .party-popper-right {
    transform: translate3d(0, 0, 0) rotate(0) scaleX(-1) scale(.9);
  }
}