/* Celebration: the head of a purchase's page the moment it first shows the
   order paid (orders/show). The status icon springs in with a ring pulsing
   out of it, the title and the thanks rise after it, the rest of the page
   follows, and confetti in the shop's colours bursts from the icon
   (celebration_controller.js). It plays once: settled (data-celebrated), it
   stays still. With reduced motion nothing moves. */
@media (prefers-reduced-motion: no-preference) {
  .celebration:not([data-celebrated]) {
    .status__icon {
      animation: celebration-pop var(--duration-slow) var(--ease-spring) both;
      position: relative;

      &::after {
        animation: celebration-ring 900ms var(--ease-out) 200ms both;
        border-radius: inherit;
        box-shadow: 0 0 0 0 oklch(from var(--status-tone) l c h / 0.5);
        content: "";
        inset: 0;
        position: absolute;
      }
    }

    h1 {
      animation: celebration-rise var(--duration-slow) var(--ease-out) 120ms both;
    }

    p {
      animation: celebration-rise var(--duration-slow) var(--ease-out) 200ms both;
    }

    ~ * {
      animation: celebration-rise var(--duration-slow) var(--ease-out) 320ms both;
    }
  }
}

@keyframes celebration-pop {
  from {
    opacity: 0;
    scale: 0.4;
  }
}

@keyframes celebration-ring {
  to {
    box-shadow: 0 0 0 1.25rem oklch(from var(--status-tone) l c h / 0);
  }
}

@keyframes celebration-rise {
  from {
    opacity: 0;
    translate: 0 0.75rem;
  }
}

/* The confetti: a layer over the window that takes no clicks, its pieces
   placed at the icon and thrown from there */
.celebration__confetti {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: var(--z-overlay);
}

.celebration__piece {
  position: absolute;
  will-change: transform, opacity;
}