/* 100 boops: pupD bursts (js/boom.js) */
.mascot.boom-zoom { z-index: 2; }                            /* the view creeps in on him only; the page and its UI stay put */
.boom-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 33; pointer-events: none; }
.boom-ring { position: fixed; z-index: 34; width: 120px; height: 120px; border-radius: 50%; pointer-events: none;
  border: 3px solid #ff2b3f; box-shadow: 0 0 30px #ff2b3f, inset 0 0 20px rgba(255,43,63,.6); }
/* he's gone: no snoot to boop, no glow behind him */
.mascot.gone #snoot { display: none; }
.mascot.gone::after { opacity: 0; transition: opacity .6s; }

/* the coupon left where he stood */
.boom-coupon { position: absolute; left: 50%; top: 50%; z-index: 14; width: min(290px, 76%); transform: translate(-50%, -50%); }
.boom-coupon.in { animation: coupon-in .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes coupon-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-200deg); } }
.bc-paper { position: relative; padding: 16px 16px 14px; text-align: center; background: #ece8df; color: #1c1c23; border-radius: 6px;
  font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em;
  box-shadow: 0 0 0 2px #ff2b3f, 0 0 34px rgba(255,43,63,.55), 0 18px 40px rgba(0,0,0,.6);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 11px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 11px, #000 12px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 11px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 11px, #000 12px) right / 51% 100% no-repeat;
  animation: coupon-float 4s ease-in-out .9s infinite; }
@keyframes coupon-float { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
.bc-title { margin: 2px 0 6px; font: 700 27px/1.05 var(--font-display); letter-spacing: .04em; color: #1c1c23; text-wrap: balance; }
.bc-off { margin: 2px 0; font: 700 64px/1 var(--font-display); color: #c8102a; text-shadow: 0 2px 0 rgba(0,0,0,.08); }
.bc-code { margin: 4px auto 8px; padding: 6px 10px; width: max-content; border: 2px dashed #c8102a; border-radius: 6px; }
.bc-code span { font: 700 22px var(--font-mono); letter-spacing: .22em; color: #1c1c23; }
.bc-small { color: #6e6b66; font-size: 10px; }
.bc-btns { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.bc-btns button { padding: 6px 12px; border-radius: 6px; cursor: pointer; font: 700 12px var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  border: 1.5px solid #c8102a; background: transparent; color: #c8102a; }
.bc-btns .bc-use { background: #ff2b3f; border-color: #ff2b3f; color: #fff; box-shadow: 0 0 12px rgba(255,43,63,.5); }
.bc-btns button:hover, .bc-btns button:focus-visible { outline: none; box-shadow: 0 0 16px rgba(255,43,63,.7); }
.bc-msg { min-height: 14px; margin-top: 6px; font-size: 10px; color: #c8102a; }
@media (prefers-reduced-motion: reduce) { .boom-coupon.in, .bc-paper { animation: none; } }