.rv--banner[data-tier="normal"], .rv--banner[data-tier="comun"] { --rv-c: var(--color-rarity-normal); }
.rv--items[data-tier="raro"] { --rv-c: var(--color-rarity-rara); }
.rv--auras[data-tier="raro"], .rv--finishers[data-tier="raro"] { --rv-c: var(--color-web-violet); }
.rv--banner[data-tier="epico"] { --rv-c: var(--color-web-pink); }
.rv--banner[data-tier="legendario"] { --rv-c: var(--color-web-gold); }
.rv--banner[data-tier="mitico"] { --rv-c: var(--color-web-red); }

.rv--banner { --pull-power: 1; }
.rv--banner:is([data-tier="normal"], [data-tier="comun"]) { --pull-power: .45; }
.rv--banner[data-tier="raro"] { --pull-power: .65; }
.rv--banner[data-tier="epico"] { --pull-power: .85; }
.rv--banner .rv__glow { opacity: calc(.1 + .3 * var(--pull-power)); }
.rv--banner[data-stage="open"] .rv__flash { animation: pull-flash calc(var(--motion-pull-open) * .7) var(--motion-ease-out); }
@keyframes pull-flash { 30% { opacity: calc(.15 + .6 * var(--pull-power)); } 100% { opacity: 0; } }

.rv--banner:is([data-stage="wait"], [data-stage="climb"], [data-stage="open"]) { overflow: hidden; }


.pull { position: relative; display: grid; place-items: center; width: min(28rem, 80vw, 50vh); aspect-ratio: 1; }
.pull > * { grid-area: 1 / 1; }

.pull__glow, .pull__rays, .pull__ring { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.pull__body { position: relative; display: grid; place-items: center; animation: pull-drop var(--motion-pull-arrive) var(--motion-ease-back) both; }
.pull--aura .pull__body, .pull--charge .pull__body { animation-name: pull-rise; }
@keyframes pull-drop { from { transform: translateY(-45vh); } }
@keyframes pull-rise { from { opacity: 0; transform: translateY(2.5rem) scale(.6); } }


.pull__glow { width: 95%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--rv-c) 55%, transparent), transparent); opacity: .2; scale: .55; pointer-events: none; animation: pull-charge calc(var(--motion-pull-knock) * 4) var(--motion-ease-out) forwards; }
@keyframes pull-charge { to { opacity: calc(.25 + .5 * var(--pull-power)); scale: 1; } }
.pull.is-open .pull__glow { animation: pull-flare var(--motion-pull-open) var(--motion-ease-out) forwards; }
@keyframes pull-flare { 0% { opacity: calc(.25 + .5 * var(--pull-power)); scale: 1; } 25% { opacity: calc(.2 + .75 * var(--pull-power)); scale: calc(1 + .6 * var(--pull-power)); } 100% { opacity: calc(.2 + .4 * var(--pull-power)); scale: calc(1 + .25 * var(--pull-power)); } }

.pull__rays { width: 170%; aspect-ratio: 1; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rv-c) 50%, transparent) 0 7deg, transparent 7deg 20deg); -webkit-mask-image: radial-gradient(closest-side, var(--color-web-ink) 15%, transparent 72%); mask-image: radial-gradient(closest-side, var(--color-web-ink) 15%, transparent 72%); opacity: 0; scale: .3; pointer-events: none; }
.pull.is-open .pull__rays { animation: pull-rays var(--motion-pull-open) var(--motion-ease-out) forwards, rv-spin calc(var(--motion-pull-open) * 14) linear infinite; }
@keyframes pull-rays { to { opacity: var(--pull-power); scale: calc(.6 + .4 * var(--pull-power)); } }


.pull__ring { width: 62%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 .3rem var(--rv-c), 0 0 2.2rem .4rem var(--rv-c); opacity: 0; pointer-events: none; }
.pull.is-step .pull__ring { animation: pull-ring var(--motion-pull-step) var(--motion-ease-out) 1; }
@keyframes pull-ring { 0% { opacity: 1; scale: .35; } 100% { opacity: 0; scale: 1.55; } }
.pull.is-step .pull__body { animation: pull-pop var(--motion-pull-step) var(--motion-ease-back) 1; }
@keyframes pull-pop { 0% { scale: .9; filter: brightness(2.2); } 35% { scale: 1.12; filter: brightness(1.5); } 100% { scale: 1; filter: none; } }


.pull--chest .pull__body { width: 100%; }
.pull__chest { position: relative; display: grid; width: 100%; transform-origin: 50% 100%; }
.pull__img { grid-area: 1 / 1; width: 100%; height: auto; opacity: 0; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.pull__img.is-on { opacity: 1; }
.pull__shadow { position: absolute; left: 14%; right: 14%; bottom: -4%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, var(--color-web-shade), transparent); }

.pull--chest.is-knock .pull__chest, .pull--gem.is-knock .rv__gem { animation: pull-knock var(--motion-pull-knock-move) var(--motion-ease-out) 1; }
@keyframes pull-knock { 0%, 100% { transform: none; } 12% { transform: rotate(-8deg) translateY(-.35rem); } 26% { transform: rotate(6deg) translateY(-.15rem); } 40% { transform: rotate(-3deg); } 56% { transform: scale(1.04, .95); } 72% { transform: none; } }

.pull--chest.is-open .pull__chest { animation: pull-jolt var(--motion-pull-open) var(--motion-ease-back) 1; }
@keyframes pull-jolt { 0% { transform: none; } 18% { transform: scale(1.14, .9); } 40% { transform: scale(.96, 1.06) translateY(-.4rem); } 100% { transform: none; } }
.pull--chest.is-open .pull__img.is-on { filter: drop-shadow(0 0 1.6rem var(--rv-c)); }
.pull--gem.is-open .rv__gem { animation: rv-burst calc(var(--motion-pull-open) * .6) ease-in forwards; }


.pull .stand { --fw: calc(var(--sw, 13rem) * 1.25); --fh: calc(var(--fw) * .26); }
.pull .stand .floor { position: relative; }
.pull--aura .stand .floor, .pull--charge .stand .floor { background: radial-gradient(closest-side, color-mix(in srgb, var(--rv-c) 35%, transparent), transparent); }

.pull__disc { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 1; translate: 0 -50%; transform: scaleY(.26); border-radius: 50%; box-shadow: 0 0 2.4rem .5rem color-mix(in srgb, var(--rv-c) 50%, transparent), inset 0 0 1.6rem color-mix(in srgb, var(--rv-c) 60%, transparent); pointer-events: none; }
.pull__disc-in { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 6%, var(--rv-c) 16%, transparent 28% 40%, var(--color-web-paper) 50%, transparent 62% 72%, var(--rv-c) 84%, transparent 96%); -webkit-mask-image: radial-gradient(closest-side, transparent 62%, var(--color-web-ink) 68% 88%, transparent 94%); mask-image: radial-gradient(closest-side, transparent 62%, var(--color-web-ink) 68% 88%, transparent 94%); animation: rv-spin calc(var(--motion-pull-knock) * 3) linear infinite; }
.pull--aura.is-knock .pull__disc { animation: pull-throb var(--motion-pull-knock-move) var(--motion-ease-out) 1; }
@keyframes pull-throb { 30% { scale: 1.1; filter: brightness(1.8); } }

.pull__spark { position: absolute; bottom: 50%; left: calc(14% + var(--i) / (var(--n) - 1) * 72%); width: .32rem; height: .9rem; border-radius: .2rem; background: var(--rv-c); box-shadow: 0 0 .6rem var(--rv-c); opacity: 0; pointer-events: none; animation: pull-spark calc(var(--motion-pull-knock) * 2.6) var(--motion-ease-out) calc(var(--i) * var(--motion-pull-knock) * 2.6 / var(--n)) infinite; }
@keyframes pull-spark { 0% { opacity: 0; transform: translateY(0) scaleY(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10rem) scaleY(1.1); } }

.pull__pillar { position: absolute; left: 50%; bottom: 50%; width: 62%; height: 75vh; translate: -50% 0; transform-origin: 50% 100%; background: linear-gradient(to top, var(--color-web-paper), color-mix(in srgb, var(--rv-c) 75%, transparent) 30%, transparent 92%); -webkit-mask-image: linear-gradient(to right, transparent, var(--color-web-ink) 30% 70%, transparent); mask-image: linear-gradient(to right, transparent, var(--color-web-ink) 30% 70%, transparent); opacity: 0; scale: 1 0; pointer-events: none; }
.pull.is-open .pull__pillar { animation: pull-pillar var(--motion-pull-open) var(--motion-ease-out) forwards; }
@keyframes pull-pillar { 0% { opacity: 1; scale: .3 0; } 30% { opacity: 1; scale: 1.15 var(--pull-power); } 100% { opacity: calc(.2 + .3 * var(--pull-power)); scale: .85 var(--pull-power); } }


.pull__orbs { position: absolute; inset: 0; pointer-events: none; }
.pull__orb { position: absolute; left: 50%; top: 42%; width: 1.1rem; aspect-ratio: 1; margin: -.55rem; border-radius: 50%; background: radial-gradient(circle, var(--color-web-paper) 0 28%, var(--rv-c) 55%, transparent 72%); box-shadow: 0 0 1.2rem .25rem color-mix(in srgb, var(--rv-c) 70%, transparent); opacity: 0; rotate: var(--a); animation: pull-orb calc(var(--motion-pull-knock) * 1.4) var(--motion-ease-out) calc(var(--i) * var(--motion-pull-knock) * 1.4 / var(--n)) infinite; }
@keyframes pull-orb { 0% { opacity: 0; transform: translateX(9rem) scale(1.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(0) scale(.2); } }
.pull--charge.is-knock .pull__mon { animation: pull-jitter calc(var(--motion-pull-knock-move) * .6) linear 1; }
@keyframes pull-jitter { 20% { translate: -.14rem 0; } 40% { translate: .14rem 0; } 60% { translate: -.08rem 0; } 80% { translate: .08rem 0; } }
.pull--charge.is-open .pull__orbs { display: none; }

.pull__slash { position: absolute; left: 0; right: 0; top: calc(var(--slash-y, 50vh) - 50vh); height: 100vh; background: linear-gradient(-16deg, transparent calc(50% - 1.6rem), color-mix(in srgb, var(--rv-c) 45%, transparent) calc(50% - .9rem), var(--rv-c) calc(50% - .4rem), var(--color-web-paper) 50%, var(--rv-c) calc(50% + .4rem), color-mix(in srgb, var(--rv-c) 45%, transparent) calc(50% + .9rem), transparent calc(50% + 1.6rem)); opacity: 0; clip-path: inset(0 100% 0 0); pointer-events: none; }
.rv[data-stage="open"] .pull__slash { animation: pull-slash var(--motion-pull-open) var(--motion-ease-out) forwards; }
@keyframes pull-slash { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 22% { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1.6); } 45% { opacity: 1; clip-path: inset(0 0 0 0); filter: none; } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
.rv[data-stage="done"] .pull__slash { display: none; }


.rv:is([data-stage="fail"], [data-stage="pending"]) .pull { opacity: .55; }
.rv:is([data-stage="fail"], [data-stage="pending"]) .pull * { animation-play-state: paused; }