/* 2D sticker system: die-cut border + boil via #sticker filter, part micro-animations */
.sticker { position: relative; }
.stk { display: block; width: 100%; height: 100%; overflow: visible; }
.stk__art { }
/* die-cut border + hard shadow: GPU-composited CSS drop-shadows (no per-frame SVG filter work) */
.sticker { filter: var(--die-cut); }
.stk * { transform-box: fill-box; }
.stk .eye .pupil { transition: transform .12s linear; }

@keyframes stk-twinkle { 0%, 100% { transform: scale(.55) rotate(0deg); } 50% { transform: scale(1.15) rotate(45deg); } }
@keyframes stk-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px) rotate(-3deg); } 60% { transform: translateY(2px); } }
@keyframes stk-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes stk-float { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(4px, -10px) rotate(6deg); } }
@keyframes stk-flicker { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-4deg) scale(1.04); } 20% { transform: rotate(3deg); } 30% { transform: rotate(0); } }
@keyframes stk-spark { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes stk-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.72); } }
@keyframes stk-wave { 0% { opacity: 0; transform: translateX(-10px) scale(.8); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(10px) scale(1.08); } }
@keyframes stk-click { 0%, 60%, 100% { transform: translate(0, 0) scale(1); } 70% { transform: translate(-2px, -2px) scale(.88); } 80% { transform: translate(0, 0) scale(1); } }
@keyframes stk-ripple { 0%, 65% { transform: scale(.2); opacity: 0; } 72% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes stk-dart { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-6deg); } 84% { transform: rotate(4deg); } 92% { transform: rotate(-2deg); } }

.stk .twinkle { animation: stk-twinkle 2.4s ease-in-out infinite; }
.stk .twinkle:nth-of-type(2n) { animation-delay: -.8s; animation-duration: 3s; }
.stk .bounce { animation: stk-bounce 1.6s cubic-bezier(.3,.7,.4,1) infinite; }
.stk .pulse { animation: stk-pulse 1.4s ease-in-out infinite; }
.stk .floaty { animation: stk-float 3s ease-in-out infinite; }
.stk .floaty--b { animation-delay: -1.4s; }
.stk .flicker { animation: stk-flicker 2.2s steps(1, end) infinite; transform-origin: 50% 50%; }
.stk .sparks { animation: stk-spark .5s steps(2) infinite; }
.stk .bar { animation: stk-bar 2.4s ease-in-out infinite; }
.stk .bar--2 { animation-delay: -.6s; }
.stk .bar--3 { animation-delay: -1.2s; }
.stk .waves { animation: stk-wave 1.4s ease-out infinite; }
.stk .waves--b { animation-delay: -.7s; }
.stk .clicker { animation: stk-click 2.2s ease-in-out infinite; }
.stk .ripple { animation: stk-ripple 2.2s ease-out infinite; }
.stk .dart { animation: stk-dart 2.6s ease-out infinite; }

/* hover: everything gets a little extra energy */
.svc:hover .stk *, .buddy:hover .stk *, .sticker:hover .stk * { animation-duration: .9s; }

@media (prefers-reduced-motion: reduce) { .stk * { animation: none !important; } }