/* Redeem Maker overlay animations: CSS only. Layers: .rm-pos (place on screen) > .rm-anim (in / out) > .rm-loop (while shown) > media */
.rm-pos { position: absolute; pointer-events: none; }
.rm-pos.center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.rm-pos.top { left: 50%; top: 3vh; transform: translateX(-50%); }
.rm-pos.bottom { left: 50%; bottom: 3vh; transform: translateX(-50%); }
.rm-pos.left { left: 3vw; top: 50%; transform: translateY(-50%); }
.rm-pos.right { right: 3vw; top: 50%; transform: translateY(-50%); }
.rm-pos.random { transform: translate(-50%, -50%); }
.rm-anim, .rm-loop { display: block; }
.rm-media { display: block; max-width: 95vw; object-fit: contain; }

.rm-anim.in { animation: .7s cubic-bezier(.2, .9, .3, 1.15) both; }
.rm-anim.in.pop { animation-name: rm-in-pop; }
.rm-anim.in.fade { animation-name: rm-in-fade; animation-timing-function: ease-out; }
.rm-anim.in.slide-left { animation-name: rm-in-slide-left; }
.rm-anim.in.slide-right { animation-name: rm-in-slide-right; }
.rm-anim.in.slide-top { animation-name: rm-in-slide-top; }
.rm-anim.in.slide-bottom { animation-name: rm-in-slide-bottom; }
.rm-anim.in.zoom { animation-name: rm-in-zoom; }
.rm-anim.in.spin { animation-name: rm-in-spin; animation-duration: .9s; }
.rm-anim.in.drop { animation-name: rm-in-drop; animation-duration: .9s; animation-timing-function: ease-out; }
.rm-anim.in.scare { animation-name: rm-in-scare; animation-duration: .28s; animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); }

.rm-anim.out { animation: .6s ease-in both; }
.rm-anim.out.fade { animation-name: rm-out-fade; }
.rm-anim.out.pop { animation-name: rm-out-pop; }
.rm-anim.out.slide { animation-name: rm-out-slide; }
.rm-anim.out.zoom { animation-name: rm-out-zoom; }
.rm-anim.out.drop { animation-name: rm-out-drop; animation-timing-function: cubic-bezier(.5, -0.4, .9, .6); }

.rm-loop.float { animation: rm-float 3s ease-in-out infinite; }
.rm-loop.shake { animation: rm-shake .45s linear infinite; }
.rm-loop.pulse { animation: rm-pulse 1.2s ease-in-out infinite; }
.rm-loop.wobble { animation: rm-wobble 1.4s ease-in-out infinite; }

@keyframes rm-in-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 80% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes rm-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rm-in-slide-left { from { transform: translateX(-120vw); } to { transform: none; } }
@keyframes rm-in-slide-right { from { transform: translateX(120vw); } to { transform: none; } }
@keyframes rm-in-slide-top { from { transform: translateY(-120vh); } to { transform: none; } }
@keyframes rm-in-slide-bottom { from { transform: translateY(120vh); } to { transform: none; } }
@keyframes rm-in-zoom { from { transform: scale(3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rm-in-spin { from { transform: rotate(-540deg) scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rm-in-drop { 0% { transform: translateY(-120vh); } 60% { transform: translateY(4vh); } 75% { transform: translateY(-2vh); } 90% { transform: translateY(1vh); } 100% { transform: none; } }
@keyframes rm-in-scare { from { transform: scale(.05); opacity: .2; } to { transform: scale(1); opacity: 1; } }
@keyframes rm-out-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes rm-out-pop { 0% { transform: scale(1); } 30% { transform: scale(1.15); } 100% { transform: scale(0); opacity: 0; } }
@keyframes rm-out-slide { from { transform: none; } to { transform: translateY(120vh); } }
@keyframes rm-out-zoom { from { transform: none; opacity: 1; } to { transform: scale(2.5); opacity: 0; } }
@keyframes rm-out-drop { from { transform: none; } to { transform: translateY(130vh) rotate(25deg); } }
@keyframes rm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5vh); } }
@keyframes rm-shake { 0%, 100% { transform: none; } 20% { transform: translate(-1vw, .5vh) rotate(-3deg); } 40% { transform: translate(1vw, -.5vh) rotate(3deg); } 60% { transform: translate(-.8vw, -.3vh) rotate(-2deg); } 80% { transform: translate(.8vw, .3vh) rotate(2deg); } }
@keyframes rm-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes rm-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

/* shapes per redeem (2026-10-22 owner: "Pedro in a circle, Shrek as he is"). Round shapes crop the picture/video to a square. */
.rm-media.sq { aspect-ratio: 1; object-fit: cover; }
.rm-media.mask-circle { border-radius: 50%; }
.rm-media.mask-rounded { border-radius: 12%; }
.rm-media.mask-heart { clip-path: polygon(50% 96%, 10% 58%, 3% 42%, 3% 27%, 10% 13%, 22% 5%, 35% 5%, 46% 12%, 50% 20%, 54% 12%, 65% 5%, 78% 5%, 90% 13%, 97% 27%, 97% 42%, 90% 58%); }
.rm-media.mask-star { clip-path: polygon(50% 1%, 61% 35%, 98% 35%, 68% 56%, 79% 96%, 50% 72%, 21% 96%, 32% 56%, 2% 35%, 39% 35%); }
.rm-media.mask-hexagon { clip-path: polygon(25% 2%, 75% 2%, 99% 50%, 75% 98%, 25% 98%, 1% 50%); }
.rm-media.mask-diamond { clip-path: polygon(50% 1%, 99% 50%, 50% 99%, 1% 50%); }