/* Cartoon effects of the pack opening (see toon.js). Everything sits above the page and never catches the pointer */
.toon { position: fixed; z-index: 62; pointer-events: none; }
@property --iris { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* Comic bubble : a spiky burst of colour inked in black, its word stamped on it, then gone */
.toon-pow { translate: -50% -50%; rotate: var(--rot); display: grid; place-items: center; width: calc(var(--size) * 3.4); aspect-ratio: 1.25; animation: toon-stamp 1.3s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.toon-pow::before, .toon-pow::after { content: ""; position: absolute; inset: 0;
  clip-path: polygon(50% 0, 59% 22%, 79% 6%, 75% 30%, 100% 24%, 84% 45%, 100% 62%, 78% 66%, 86% 92%, 63% 77%, 52% 100%, 42% 78%, 18% 95%, 23% 68%, 0 70%, 15% 50%, 0 30%, 24% 31%, 18% 6%, 40% 22%); }
.toon-pow::before { background: #0b0b1e; }
.toon-pow::after { inset: 5%; background: radial-gradient(#fff8 1.5px, transparent 2px) 0 0 / 8px 8px, var(--c); }
.toon-pow span { position: relative; z-index: 1; color: #fff; font: italic 900 var(--size) / 1 var(--comic, "Comic Sans MS"), "Arial Black", sans-serif; text-transform: uppercase; white-space: nowrap;
  -webkit-text-stroke: calc(var(--size) * .14) #0b0b1e; paint-order: stroke fill; text-shadow: calc(var(--size) * .06) calc(var(--size) * .08) 0 #0b0b1e; }

/* Ben-Day dots of a printed comic, flashing over the screen and fading from the middle out */
.toon-dots { inset: 0; left: 0 !important; top: 0 !important; z-index: 59;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 80%, transparent) 30%, transparent 34%) 0 0 / 12px 12px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, transparent 12%, #000 72%); mask-image: radial-gradient(circle at 50% 45%, transparent 12%, #000 72%); animation: toon-fade .7s ease-out forwards; }

/* A word or a mark popping above a card : « ! », « ?! », « @#$% » */
.toon-mark { translate: -50% -50%; rotate: var(--rot); color: var(--c); font: 900 var(--size) / 1 var(--comic, "Comic Sans MS"), "Arial Black", sans-serif; white-space: nowrap;
  -webkit-text-stroke: calc(var(--size) * .12) #0b0b1e; paint-order: stroke fill; animation: toon-pop .9s cubic-bezier(.2, .9, .3, 1.4) forwards; }

/* Speed lines : white streaks running past a card */
.toon-streak { height: var(--h); width: var(--w); border-radius: 99px; background: linear-gradient(90deg, transparent, var(--c)); animation: toon-run var(--t) linear forwards; }

/* The shadow of what falls on a card, growing as it comes */
.toon-shadow { translate: -50% -50%; width: var(--w); height: calc(var(--w) * .28); border-radius: 50%; background: radial-gradient(closest-side, #000c, #0000); animation: toon-grow var(--t) ease-in forwards; }

/* ACME anvil falling from the sky onto the card */
.toon-anvil { translate: -50% -100%; width: var(--w); animation: toon-fall .32s cubic-bezier(.6, 0, 1, .8) forwards, toon-fade .5s .5s forwards; }
.toon-anvil svg { display: block; width: 100%; filter: drop-shadow(3px 4px 0 #0b0b1e); }

/* Dust cloud : puffs of smoke swelling and fading */
.toon-puff { translate: -50% -50%; width: var(--s); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--c) 70%); border: 3px solid #0b0b1e;
  animation: toon-puff var(--t) ease-out forwards; }

/* Dizzy stars turning over the head of the card */
.toon-dizzy { translate: -50% -50%; width: var(--w); height: calc(var(--w) * .3); animation: toon-fade 1.8s 1s forwards; }
.toon-dizzy i { position: absolute; left: 50%; top: 50%; font-style: normal; font-size: calc(var(--w) * .16); filter: drop-shadow(1px 2px 0 #0b0b1e);
  offset-path: ellipse(48% 45% at 50% 50%); animation: toon-orbit 1.1s linear infinite; }
.toon-dizzy i:nth-child(2) { animation-delay: -.37s; }
.toon-dizzy i:nth-child(3) { animation-delay: -.73s; }

/* Lit fuse : a spark running around the card */
.toon-spark { translate: -50% -50%; width: 18px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(#fff 20%, #ffd400 45%, #ff5a36 70%, transparent 72%);
  box-shadow: 0 0 14px 6px #ffb300aa; animation: toon-around var(--t) linear forwards, toon-flicker .08s steps(2) infinite; }

/* Iris : the screen goes black but for a circle around the card, like the end of an old cartoon */
.toon-iris { inset: 0; left: 0 !important; top: 0 !important; z-index: 58; --iris: 150vmax;
  background: radial-gradient(circle at var(--x) var(--y), transparent var(--iris), #0b0b1e calc(var(--iris) + 1px)); transition: --iris var(--t) cubic-bezier(.6, 0, .4, 1); }

/* Trails of three flying heroes, pink, blue and green */
.toon-trail { width: var(--len); height: 14px; translate: 0 -50%; transform-origin: left center; rotate: var(--rot); border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--c) 70%, #fff); box-shadow: 0 0 16px var(--c); animation: toon-swoosh .55s cubic-bezier(.3, 0, .2, 1) forwards; }
/* While charging, the three colours spin around the card */
.pcard.toon-ring::after { content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, #ff5fa2 13%, transparent 14% 33%, #3fb6ff 46%, transparent 47% 66%, #6fdc3c 79%, transparent 80%);
  -webkit-mask: radial-gradient(closest-side, transparent 76%, #000 79% 92%, transparent 95%); mask: radial-gradient(closest-side, transparent 76%, #000 79% 92%, transparent 95%);
  animation: spin var(--spin, .6s) linear infinite; }

/* Squash and stretch : the card lands like a rubber ball */
.toon-squash { animation: toon-squash .7s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 50% 100%; }

@keyframes toon-stamp { 0% { opacity: 0; scale: 2.6; } 12% { opacity: 1; scale: .85; } 20% { scale: 1.08; } 28%, 72% { scale: 1; opacity: 1; } 100% { opacity: 0; scale: 1.1; } }
@keyframes toon-pop { 0% { opacity: 0; transform: translateY(14px) scale(.3); } 25% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px) scale(1.1); } }
@keyframes toon-fade { to { opacity: 0; } }
@keyframes toon-run { from { transform: translateX(0); opacity: 1; } to { transform: translateX(var(--dist)); opacity: 0; } }
@keyframes toon-grow { from { scale: .2; opacity: .2; } to { scale: 1; opacity: 1; } }
@keyframes toon-fall { from { transform: translateY(calc(var(--drop) * -1)); } to { transform: none; } }
@keyframes toon-puff { 0% { scale: .2; opacity: 0; } 25% { opacity: 1; } 100% { scale: 1.3; opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes toon-orbit { to { offset-distance: 100%; } }
@keyframes toon-around { 0% { left: var(--l); top: var(--t0); } 25% { left: var(--r); top: var(--t0); } 50% { left: var(--r); top: var(--b); } 75% { left: var(--l); top: var(--b); } 100% { left: var(--l); top: var(--t0); } }
@keyframes toon-flicker { 50% { scale: 1.35; } }
@keyframes toon-swoosh { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1) translateX(30%); opacity: 0; } }
@keyframes toon-squash { 0% { scale: 1.25 .7; } 30% { scale: .85 1.2; } 55% { scale: 1.08 .94; } 80% { scale: .98 1.02; } 100% { scale: 1; } }
@keyframes spin { to { rotate: 1turn; } }

/* Investigation : the screen goes dark but for a magnifying glass wandering over it, leaving paw prints, before it settles on the card and opens wide.
   The dark is the iris with a moving hole (--x, --y set by toon.js), the glass a brass rim with its handle drawn over the hole */
.toon-lens { animation: toon-in .3s ease-out; }
.toon-glass { translate: -50% -50%; width: var(--d); aspect-ratio: 1; z-index: 59; border-radius: 50%; border: calc(var(--d) * .07) solid #d9a83a; outline: 3px solid #0b0b1e; outline-offset: -1px;
  box-shadow: inset 0 0 0 3px #0b0b1e, 0 0 0 3px #0b0b1e, inset 0 0 calc(var(--d) * .2) #ffffff40; transition: scale .6s cubic-bezier(.6, 0, .4, 1), opacity .5s; }
.toon-glass::before { content: ""; position: absolute; top: 12%; left: 16%; width: 26%; height: 14%; border-radius: 50%; background: #ffffff8c; rotate: -35deg; }
.toon-glass::after { content: ""; position: absolute; left: 88%; top: 88%; width: 52%; height: 14%; border: 3px solid #0b0b1e; border-radius: 8px; background: linear-gradient(#8b5a2b, #5c3a17); rotate: 45deg; transform-origin: left center; }
.toon-glass.out { scale: 6; opacity: 0; }
/* Paw prints left behind the glass */
.toon-print { translate: -50% -50%; rotate: var(--rot); font-size: var(--size); filter: drop-shadow(1px 1px 0 #0b0b1e); animation: toon-print 1.4s ease-out forwards; }

@keyframes toon-in { from { opacity: 0; } }
@keyframes toon-print { 0% { opacity: 0; scale: .4; } 15% { opacity: 1; scale: 1; } 70% { opacity: .9; } 100% { opacity: 0; } }