/* Manga effects of the pack opening (see fx.js). Everything sits above the page and never catches the pointer */
.fx-canvas { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.fx { position: fixed; z-index: 62; pointer-events: none; }

/* Onomatopoeia : heavy letters, black outline, a hard shadow, stamped then gone */
.fx-sfx, .fx-menace { translate: -50% -50%; rotate: var(--rot); color: var(--c); font: 900 var(--size) / 1 "Arial Black", "Segoe UI Black", "Yu Gothic", "Hiragino Sans", system-ui, sans-serif;
  white-space: nowrap; -webkit-text-stroke: calc(var(--size) * .06) #000; paint-order: stroke fill; text-shadow: calc(var(--size) * .07) calc(var(--size) * .07) 0 #000; }
.fx-sfx { animation: fx-stamp 1.3s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.fx-menace { animation: fx-rise 1.1s ease-out forwards; }

/* Screentone : halftone dots that flash over the screen and fade from the middle out */
.fx-tone { inset: 0; left: 0 !important; top: 0 !important; z-index: 59;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 85%, transparent) 32%, transparent 36%) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, transparent 10%, #000 70%); mask-image: radial-gradient(circle at 50% 45%, transparent 10%, #000 70%);
  animation: fx-tone .6s ease-out forwards; }

/* Impact frame : the page in negative for an instant */
html.fx-impact { filter: invert(1) grayscale(1) contrast(1.6); }

/* Katana cut : a blade of light drawn across, then gone */
.fx-slash { width: var(--len); height: 6px; translate: -50% -50%; rotate: var(--rot); border-radius: 50%; background: var(--c);
  box-shadow: 0 0 12px 3px var(--c), 0 0 30px 8px color-mix(in srgb, var(--c) 50%, transparent); transform-origin: left center; animation: fx-cut .45s ease-out forwards; }
/* The two halves of the black cover sliding apart along the cut */
.fx-half { border-radius: 14px; background: radial-gradient(circle at 50% 35%, #1a161a, #000 70%); }
.fx-half.a { clip-path: polygon(0 0, 100% 0, 100% 22%, 0 78%); animation: fx-half-a .7s ease-in forwards; }
.fx-half.b { clip-path: polygon(0 78%, 100% 22%, 100% 100%, 0 100%); animation: fx-half-b .7s ease-in forwards; }

/* Aura of a charging card : flames of its colour licking up around it */
.pcard.charge.aura::before { content: ""; position: absolute; inset: -18% -22% -6%; z-index: -1; pointer-events: none; border-radius: 50% 50% 40% 40%;
  background: radial-gradient(ellipse at 50% 85%, var(--glow), transparent 62%), conic-gradient(from 180deg at 50% 100%, transparent 0 20%, color-mix(in srgb, var(--glow) 70%, transparent) 25% 30%, transparent 35% 45%, color-mix(in srgb, var(--glow) 70%, transparent) 50% 55%, transparent 60% 70%, color-mix(in srgb, var(--glow) 70%, transparent) 75% 80%, transparent 85%);
  filter: blur(6px); animation: fx-flame .18s ease-in-out infinite alternate; }

@keyframes fx-stamp { 0% { opacity: 0; scale: 2.4; } 12% { opacity: 1; scale: .9; } 20% { scale: 1.05; } 26%, 75% { scale: 1; opacity: 1; } 100% { opacity: 0; scale: 1.08; } }
@keyframes fx-rise { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-46px) scale(1.1); } }
@keyframes fx-tone { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes fx-cut { 0% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes fx-half-a { 0%, 25% { transform: none; opacity: 1; } 100% { transform: translate(-18%, -26%) rotate(-6deg); opacity: 0; } }
@keyframes fx-half-b { 0%, 25% { transform: none; opacity: 1; } 100% { transform: translate(18%, 26%) rotate(6deg); opacity: 0; } }
@keyframes fx-flame { from { transform: scaleY(.94) skewX(-2deg); opacity: .75; } to { transform: scaleY(1.08) skewX(2deg); opacity: 1; } }