/* Extra avatar frames (Pokémon types, Poké Balls, Pokémon, cards, extras).
   GENERATED by scripts/make-frames.mjs. Do not edit; the art is in scripts/frames/.

   Markup comes from js/level-badge.js (frameHtml): a .lvl-frame.lf-art holding the
   avatar, .lf-ring (the still art, an SVG drawn a little bigger than the avatar so
   the band sits round it) and, on the animated ones, .lf-fx (a second SVG whose
   only motion is transform or opacity). Small faces (xs, sm) get a plain ring in
   the frame's two accent colours instead, because the art is too fine to read there.
   The rules every frame shares are in css/pages/frames.css. */

/* ---- Art on faces from md up ---------------------------------------------- */
.lvl-frame.lf-art:is([data-s="md"], [data-s="lg"], [data-s="xl"]) { --of: var(--fo, .18); }
.lvl-frame.lf-art:is([data-s="md"], [data-s="lg"], [data-s="xl"]) > .lf-ring {
  -webkit-mask-image: none; mask-image: none; border-radius: 0; /* a rounded box would clip the art to a circle */
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
}
.lf-fx {
  position: absolute; inset: calc(var(--o) * -1); display: none; pointer-events: none;
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
}
.lvl-frame.lf-art:is([data-s="md"], [data-s="lg"], [data-s="xl"]) > .lf-fx { display: block; will-change: transform, opacity; }

/* ---- A plain ring on small faces ------------------------------------------- */
.lvl-frame.lf-art:is([data-s="xs"], [data-s="sm"]) { --of: .07; --e: 87.7%; }
.lvl-frame.lf-art[data-s="sm"] { --of: .09; --e: 84.7%; }
.lvl-frame.lf-art:is([data-s="xs"], [data-s="sm"]) > .lf-ring {
  background:
    radial-gradient(closest-side, transparent 96.5%, rgba(7, 6, 12, 0.6) 99%, transparent 100%),
    conic-gradient(from 140deg, var(--c1), var(--c2) 22%, var(--c1) 45%, var(--c2) 70%, var(--c1));
}

/* The online mark sits on the band, wherever the frame ends. */
.lvl-frame.lf-art > .lf-on { right: calc(var(--of) * -38.9% - 0.4%); bottom: calc(var(--of) * -38.9% - 0.4%); }

/* ---- Motion: transform and opacity only ----------------------------------- */
@keyframes lf-a-spin { to { transform: rotate(360deg); } }
@keyframes lf-a-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes lf-a-breathe { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.035); opacity: 1; } }
@keyframes lf-a-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes lf-a-fall { 0% { transform: translateY(-4%); opacity: 0; } 22% { opacity: 1; } 100% { transform: translateY(7%); opacity: 0; } }
@keyframes lf-a-drift { 0% { transform: translateY(3%); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-5%); opacity: 0; } }
.lf-fx[data-fx="spin"] { animation: lf-a-spin var(--fxs, 24s) linear infinite; }
.lf-fx[data-fx="pulse"] { animation: lf-a-pulse var(--fxs, 2.8s) ease-in-out infinite; }
.lf-fx[data-fx="breathe"] { animation: lf-a-breathe var(--fxs, 3.6s) ease-in-out infinite; }
.lf-fx[data-fx="sway"] { animation: lf-a-sway var(--fxs, 5s) ease-in-out infinite; }
.lf-fx[data-fx="drift"] { animation: lf-a-drift var(--fxs, 3.2s) ease-out infinite; }
.lf-fx[data-fx="fall"] { animation: lf-a-fall var(--fxs, 5s) ease-in-out infinite; }
.lf-fx { animation-delay: var(--fxd, 0s); }
.lf-fx.lf-fx2[data-fx] { animation-duration: var(--fxs2, 3.4s); animation-delay: var(--fxd2, 0s); }
/* At rest the moving layer shows where it looks best. */
@media (prefers-reduced-motion: reduce) { .lf-fx { animation: none !important; opacity: 0.85; } }
body.no-motion .lf-fx { animation: none !important; opacity: 0.85; }

/* ---- The frames ------------------------------------------------------------ */
.lvl-frame[data-frame="mon-pikachu"] { --fo: 0.24; --c1: #f6cf3e; --c2: #d6402f; --fxs: 11s; }
.lvl-frame[data-frame="mon-pikachu"] > .lf-ring { background-image: url("../../assets/frames/mon-pikachu-v2.svg"); }
.lvl-frame[data-frame="mon-pikachu"] > .lf-fx { background-image: url("../../assets/frames/mon-pikachu-fx-v2.svg"); }
.lvl-frame[data-frame="mon-eevee"] { --fo: 0.24; --c1: #b3702f; --c2: #f6e6c0; }
.lvl-frame[data-frame="mon-eevee"] > .lf-ring { background-image: url("../../assets/frames/mon-eevee-v2.svg"); }
.lvl-frame[data-frame="mon-jigglypuff"] { --fo: 0.24; --c1: #f08fb8; --c2: #fff1f6; }
.lvl-frame[data-frame="mon-jigglypuff"] > .lf-ring { background-image: url("../../assets/frames/mon-jigglypuff-v2.svg"); }
.lvl-frame[data-frame="mon-gengar"] { --fo: 0.24; --c1: #6a49b4; --c2: #d6405a; --fxs: 13s; }
.lvl-frame[data-frame="mon-gengar"] > .lf-ring { background-image: url("../../assets/frames/mon-gengar-v2.svg"); }
.lvl-frame[data-frame="mon-gengar"] > .lf-fx { background-image: url("../../assets/frames/mon-gengar-fx-v2.svg"); }
.lvl-frame[data-frame="mon-umbreon"] { --fo: 0.22; --c1: #383d6b; --c2: #ffd84a; --fxs: 6s; }
.lvl-frame[data-frame="mon-umbreon"] > .lf-ring { background-image: url("../../assets/frames/mon-umbreon-v2.svg"); }
.lvl-frame[data-frame="mon-umbreon"] > .lf-fx { background-image: url("../../assets/frames/mon-umbreon-fx-v2.svg"); }
.lvl-frame[data-frame="mon-mew"] { --fo: 0.22; --c1: #f4a3cb; --c2: #9fd8ff; --fxs: 6.5s; --fxd: -2s; }
.lvl-frame[data-frame="mon-mew"] > .lf-ring { background-image: url("../../assets/frames/mon-mew-v2.svg"); }
.lvl-frame[data-frame="mon-mew"] > .lf-fx { background-image: url("../../assets/frames/mon-mew-fx-v2.svg"); }
.lvl-frame[data-frame="mon-bulbasaur"] { --fo: 0.24; --c1: #4fb88e; --c2: #8fe36a; }
.lvl-frame[data-frame="mon-bulbasaur"] > .lf-ring { background-image: url("../../assets/frames/mon-bulbasaur-v2.svg"); }
.lvl-frame[data-frame="mon-charizard"] { --fo: 0.24; --c1: #f2792a; --c2: #2fa7b8; --fxs: 7.5s; --fxd: -2.5s; --fxs2: 2.6s; --fxd2: -0.8s; }
.lvl-frame[data-frame="mon-charizard"] > .lf-ring { background-image: url("../../assets/frames/mon-charizard-v2.svg"); }
.lvl-frame[data-frame="mon-charizard"] > .lf-fx2 { background-image: url("../../assets/frames/mon-charizard-fx2-v2.svg"); }
.lvl-frame[data-frame="mon-charizard"] > .lf-fx { background-image: url("../../assets/frames/mon-charizard-fx-v2.svg"); }
.lvl-frame[data-frame="mon-squirtle"] { --fo: 0.2; --c1: #4bb4ee; --c2: #b97a3a; --fxs: 6.4s; --fxd: -2.2s; }
.lvl-frame[data-frame="mon-squirtle"] > .lf-ring { background-image: url("../../assets/frames/mon-squirtle-v2.svg"); }
.lvl-frame[data-frame="mon-squirtle"] > .lf-fx { background-image: url("../../assets/frames/mon-squirtle-fx-v2.svg"); }
.lvl-frame[data-frame="mon-togepi"] { --fo: 0.24; --c1: #f4e8cf; --c2: #e5392f; }
.lvl-frame[data-frame="mon-togepi"] > .lf-ring { background-image: url("../../assets/frames/mon-togepi-v2.svg"); }
.lvl-frame[data-frame="mon-magikarp"] { --fo: 0.24; --c1: #ff8a2a; --c2: #ffd9a0; --fxs: 13s; --fxd: -3s; }
.lvl-frame[data-frame="mon-magikarp"] > .lf-ring { background-image: url("../../assets/frames/mon-magikarp-v2.svg"); }
.lvl-frame[data-frame="mon-magikarp"] > .lf-fx { background-image: url("../../assets/frames/mon-magikarp-fx-v2.svg"); }
.lvl-frame[data-frame="mon-snorlax"] { --fo: 0.22; --c1: #34616b; --c2: #f4e6bf; --fxs: 12s; --fxd: -3s; --fxs2: 14s; --fxd2: -9s; }
.lvl-frame[data-frame="mon-snorlax"] > .lf-ring { background-image: url("../../assets/frames/mon-snorlax-v2.svg"); }
.lvl-frame[data-frame="mon-snorlax"] > .lf-fx2 { background-image: url("../../assets/frames/mon-snorlax-fx2-v2.svg"); }
.lvl-frame[data-frame="mon-snorlax"] > .lf-fx { background-image: url("../../assets/frames/mon-snorlax-fx-v2.svg"); }
.lvl-frame[data-frame="card-yellow-border"] { --fo: 0.12; --c1: #f2c11c; --c2: #17151a; }
.lvl-frame[data-frame="card-yellow-border"] > .lf-ring { background-image: url("../../assets/frames/card-yellow-border-v2.svg"); }
.lvl-frame[data-frame="card-gold-star"] { --fo: 0.16; --c1: #d4a53a; --c2: #fff0b0; --fxs: 12s; }
.lvl-frame[data-frame="card-gold-star"] > .lf-ring { background-image: url("../../assets/frames/card-gold-star-v2.svg"); }
.lvl-frame[data-frame="card-gold-star"] > .lf-fx { background-image: url("../../assets/frames/card-gold-star-fx-v2.svg"); }
.lvl-frame[data-frame="card-holo-foil"] { --fo: 0.14; --c1: #c9d0de; --c2: #9a7bf0; --fxs: 8s; --fxs2: 21s; --fxd2: -7s; }
.lvl-frame[data-frame="card-holo-foil"] > .lf-ring { background-image: url("../../assets/frames/card-holo-foil-v2.svg"); }
.lvl-frame[data-frame="card-holo-foil"] > .lf-fx2 { background-image: url("../../assets/frames/card-holo-foil-fx2-v2.svg"); }
.lvl-frame[data-frame="card-holo-foil"] > .lf-fx { background-image: url("../../assets/frames/card-holo-foil-fx-v2.svg"); }
.lvl-frame[data-frame="card-reverse-holo"] { --fo: 0.14; --c1: #cfd6e2; --c2: #7fa4ff; --fxs: 9s; }
.lvl-frame[data-frame="card-reverse-holo"] > .lf-ring { background-image: url("../../assets/frames/card-reverse-holo-v2.svg"); }
.lvl-frame[data-frame="card-reverse-holo"] > .lf-fx { background-image: url("../../assets/frames/card-reverse-holo-fx-v2.svg"); }
.lvl-frame[data-frame="card-black-label"] { --fo: 0.14; --c1: #16161b; --c2: #e5b84a; --fxs: 13s; }
.lvl-frame[data-frame="card-black-label"] > .lf-ring { background-image: url("../../assets/frames/card-black-label-v2.svg"); }
.lvl-frame[data-frame="card-black-label"] > .lf-fx { background-image: url("../../assets/frames/card-black-label-fx-v2.svg"); }
.lvl-frame[data-frame="card-shiny"] { --fo: 0.16; --c1: #a9d2ea; --c2: #ffffff; --fxs: 3.3s; --fxs2: 4.7s; --fxd2: -2s; }
.lvl-frame[data-frame="card-shiny"] > .lf-ring { background-image: url("../../assets/frames/card-shiny-v2.svg"); }
.lvl-frame[data-frame="card-shiny"] > .lf-fx2 { background-image: url("../../assets/frames/card-shiny-fx2-v2.svg"); }
.lvl-frame[data-frame="card-shiny"] > .lf-fx { background-image: url("../../assets/frames/card-shiny-fx-v2.svg"); }
.lvl-frame[data-frame="gen-laurel"] { --fo: 0.2; --c1: #f5d56a; --c2: #b8801c; }
.lvl-frame[data-frame="gen-laurel"] > .lf-ring { background-image: url("../../assets/frames/gen-laurel-v2.svg"); }
.lvl-frame[data-frame="gen-crown"] { --fo: 0.24; --c1: #ffd95a; --c2: #b8801c; --fxs: 12s; --fxs2: 5.6s; --fxd2: -2s; }
.lvl-frame[data-frame="gen-crown"] > .lf-ring { background-image: url("../../assets/frames/gen-crown-v2.svg"); }
.lvl-frame[data-frame="gen-crown"] > .lf-fx2 { background-image: url("../../assets/frames/gen-crown-fx2-v2.svg"); }
.lvl-frame[data-frame="gen-crown"] > .lf-fx { background-image: url("../../assets/frames/gen-crown-fx-v2.svg"); }
.lvl-frame[data-frame="gen-neon"] { --fo: 0.16; --c1: #ff3fa4; --c2: #2de2f0; --fxs: 3.4s; }
.lvl-frame[data-frame="gen-neon"] > .lf-ring { background-image: url("../../assets/frames/gen-neon-v2.svg"); }
.lvl-frame[data-frame="gen-neon"] > .lf-fx { background-image: url("../../assets/frames/gen-neon-fx-v2.svg"); }
.lvl-frame[data-frame="gen-pixel"] { --fo: 0.16; --c1: #9bbc0f; --c2: #306230; }
.lvl-frame[data-frame="gen-pixel"] > .lf-ring { background-image: url("../../assets/frames/gen-pixel-v2.svg"); }
.lvl-frame[data-frame="gen-sakura"] { --fo: 0.22; --c1: #ffb3cf; --c2: #8a5232; --fxs: 5s; --fxs2: 7.3s; --fxd2: -3s; }
.lvl-frame[data-frame="gen-sakura"] > .lf-ring { background-image: url("../../assets/frames/gen-sakura-v2.svg"); }
.lvl-frame[data-frame="gen-sakura"] > .lf-fx2 { background-image: url("../../assets/frames/gen-sakura-fx2-v2.svg"); }
.lvl-frame[data-frame="gen-sakura"] > .lf-fx { background-image: url("../../assets/frames/gen-sakura-fx-v2.svg"); }
.lvl-frame[data-frame="gen-starry"] { --fo: 0.2; --c1: #3a2a9a; --c2: #ffd75e; --fxs: 3.7s; --fxs2: 5.3s; --fxd2: -2.1s; }
.lvl-frame[data-frame="gen-starry"] > .lf-ring { background-image: url("../../assets/frames/gen-starry-v2.svg"); }
.lvl-frame[data-frame="gen-starry"] > .lf-fx2 { background-image: url("../../assets/frames/gen-starry-fx2-v2.svg"); }
.lvl-frame[data-frame="gen-starry"] > .lf-fx { background-image: url("../../assets/frames/gen-starry-fx-v2.svg"); }