/* 360 eMarket - animated stickers (service pages). Pieces + per-piece values are generated by _src/anim_build.py into stickers-gen.css */
.st { position: relative; display: block; width: 100%; max-width: 100%; translate: 0 var(--py, 0px); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s ease; filter: drop-shadow(0 12px 14px rgba(15, 18, 24, .16)); -webkit-tap-highlight-color: transparent; }
.st.is-hot { transition: transform .08s linear; }
.st__in { position: relative; display: block; width: 100%; height: 100%; }
.st.is-in:not(.is-still) .st__in { animation: stFloat var(--fs, 7s) ease-in-out var(--fd, 1.4s) infinite; }
.st .pc { position: absolute; inset: 0; display: block; background: var(--src) 0 0 / 100% 100% no-repeat; opacity: 0; transform: translate(var(--dx, 0), var(--dy, 40px)) rotate(var(--r, 0deg)) scale(var(--s, 1)); transform-origin: var(--to, 50% 50%); transition: opacity .55s ease calc(var(--d, 0s) + var(--sd, 0s)), transform .95s cubic-bezier(.2, .9, .25, 1.12) calc(var(--d, 0s) + var(--sd, 0s)); will-change: transform, opacity; }
.st.is-in .pc { opacity: 1; transform: none; }
.st.is-tap { animation: stTap .6s ease; }
@keyframes stFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(var(--fr, .5deg)); } }
@keyframes stTap { 0%, 100% { transform: none; } 25% { transform: rotate(-2.4deg) scale(1.03); } 55% { transform: rotate(2deg) scale(1.03); } 80% { transform: rotate(-.8deg); } }
@keyframes stShine { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(230%) skewX(-18deg); } }
/* a soft light sweep over the finished banner / final strip */
.st--shine::after { content: ""; position: absolute; inset: 0; pointer-events: none; overflow: hidden; background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%); mix-blend-mode: soft-light; opacity: 0; transform: translateX(-130%) skewX(-18deg); }
.st--shine.is-in:not(.is-still)::after { opacity: 1; animation: stShine 1.4s ease 1.9s 1 both; }
/* phones: shorter flights, no float */
@media (max-width: 700px) {
  .st .pc { transform: translate(calc(var(--dx, 0px) * .45), calc(var(--dy, 40px) * .45)) rotate(var(--r, 0deg)) scale(var(--s, 1)); transition-duration: .5s, .75s; }
  .st.is-in .pc { transform: none; }
  .st.is-in:not(.is-still) .st__in { animation-duration: calc(var(--fs, 7s) * 1.2); }
  .st { filter: drop-shadow(0 8px 10px rgba(15, 18, 24, .14)); transform: none; }
}
@media (prefers-reduced-motion: reduce) { .st .pc { transition: none; opacity: 1; transform: none; } .st, .st__in { animation: none !important; } }

/* generic cut: three paper strips that slide together (portrait stickers: horizontal bands, wide ones: vertical bands) */
.st--b .pc1 { clip-path: inset(0 0 61% 0); --dx: -40px; --dy: -34px; --r: -4deg; --d: 0s; --to: 0 0; }
.st--b .pc2 { clip-path: inset(38% 0 27% 0); --dx: 60px; --dy: 0px; --r: 3deg; --d: .14s; }
.st--b .pc3 { clip-path: inset(72% 0 0 0); --dx: -50px; --dy: 46px; --r: -3deg; --d: .28s; --to: 0 100%; }
.st--v .pc1 { clip-path: inset(0 62% 0 0); --dx: -60px; --dy: -14px; --r: -4deg; --d: 0s; --to: 0 50%; }
.st--v .pc2 { clip-path: inset(0 30% 0 38%); --dx: 0px; --dy: 40px; --r: 3deg; --d: .14s; }
.st--v .pc3 { clip-path: inset(0 0 0 70%); --dx: 60px; --dy: -14px; --r: 4deg; --d: .28s; --to: 100% 50%; }

/* perf: no float while off screen */
.st.is-off .st__in { animation-play-state: paused !important; }