/* TCG Stockpile: logo wobble, Poké Ball clicks and the page-change ball wipe · Shannon Cain */

/* The logo wobbles like a ball about to break open. */
.brand img, .spine-mark img { transform-origin: 18% 70%; transition: filter .3s; }
.brand:hover img, .spine-mark:hover img { animation: ball-wobble .9s cubic-bezier(.36,.07,.19,.97) both; filter: drop-shadow(0 6px 14px rgba(215,31,36,.35)); }
.brand:active img, .spine-mark:active img { transform: scale(.94); }
@keyframes ball-wobble { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-9deg); } 30% { transform: rotate(7deg); } 45% { transform: rotate(-5deg); } 60% { transform: rotate(3deg); } 75% { transform: rotate(-1deg); } }
.brand { position: relative; }
.brand::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 58%) -150% 0 / 250% 100% no-repeat;
  -webkit-mask: url(/static/brand/logo-full-600.webp) left center / contain no-repeat; mask: url(/static/brand/logo-full-600.webp) left center / contain no-repeat; }
footer .brand::after { -webkit-mask-image: url(/static/brand/logo-full-ondark-600.webp); mask-image: url(/static/brand/logo-full-ondark-600.webp); }
.brand:hover::after { animation: logo-shine 1s ease .1s; }
@keyframes logo-shine { 0% { opacity: 1; background-position: -150% 0; } 100% { opacity: 1; background-position: 150% 0; } }

/* A little ball where you tap a button. */
.pop-ball { position: fixed; z-index: 10000; width: 44px; height: 44px; margin: -22px 0 0 -22px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); pointer-events: none; }
.pop-ball svg { width: 100%; height: 100%; display: block; }
.pop-star { position: fixed; z-index: 10000; width: 10px; height: 10px; margin: -5px 0 0 -5px; pointer-events: none; background: #ffcb05;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* The page change: a ball closes over the screen, and opens on the next page. */
.ball-wipe { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.ball-wipe i { position: absolute; left: 0; right: 0; height: 50%; }
.ball-wipe .bw-top { top: 0; background: radial-gradient(circle at 50% 100%, #fff 0 34px, #16204a 35px 46px, transparent 47px), linear-gradient(#ff4d3a, #c8170f);
  border-bottom: 7px solid #16204a; transform: translateY(-101%); }
.ball-wipe .bw-bot { bottom: 0; background: radial-gradient(circle at 50% 0, #fff 0 34px, #16204a 35px 46px, transparent 47px), linear-gradient(#fff, #dfe4f0);
  border-top: 7px solid #16204a; transform: translateY(101%); }
.ball-wipe b { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #f4f6fc; box-shadow: 0 0 0 4px #16204a; opacity: 0; }
.ball-wipe.closing i { transition: transform .34s cubic-bezier(.5,0,.75,0); transform: none; }
.ball-wipe.closing b { transition: opacity .1s .3s; opacity: 1; }
html.wipe-in .ball-wipe i { transform: none; }
html.wipe-in .ball-wipe b { opacity: 1; animation: bw-blink .32s ease-in-out 2; }
html.wipe-in .ball-wipe.opening i { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
html.wipe-in .ball-wipe.opening .bw-top { transform: translateY(-101%); }
html.wipe-in .ball-wipe.opening .bw-bot { transform: translateY(101%); }
html.wipe-in .ball-wipe.opening b { transition: opacity .15s; opacity: 0; animation: none; }
@keyframes bw-blink { 50% { background: #ffe58a; box-shadow: 0 0 0 4px #16204a, 0 0 30px 10px #ffe58a; } }
@media (prefers-reduced-motion: reduce) { .ball-wipe { display: none; } .brand:hover img, .spine-mark:hover img { animation: none; } }