/* Cast motion library. Each still sticker gets one signature move chosen for the character
   (manifest "anim"). Animated GIFs (anim "gif") move on their own and get only the entrance.
   Rules: transform/opacity/filter only; every move loops gently; nothing moves over text.
   `.ck` is the sticker box; the <img> inside carries the motion so pseudo-elements on the box
   can draw dust, notes, hearts, speed lines and glows around it. */

.ck { position: relative; display: inline-block; pointer-events: none; animation: ck-enter .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.ck img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 100%; }
/* a GPU layer only where a sticker actually moves, not on 123 tiles in Settings */
.pk-nest .ck img, .ck-walker .ck img, .ck-peek .ck img, .toast-cast .ck img, .pk-empty-cast .ck img { will-change: transform; }
@keyframes ck-enter { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; transform: none; } }
.ck::before, .ck::after { position: absolute; pointer-events: none; font-style: normal; }

/* ---------- Snoopy ---------- */
/* Suppertime: the happy dance. Quick alternating hops with a lean, ears-up bounce rhythm. */
.ck-suppertime img { animation: ck-suppertime .9s steps(1, end) infinite, ck-suppertime-bounce .45s ease-in-out infinite; }
@keyframes ck-suppertime { 0% { transform: rotate(-7deg) translateX(-3px); } 50% { transform: rotate(7deg) translateX(3px); } 100% { transform: rotate(-7deg) translateX(-3px); } }
@keyframes ck-suppertime-bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.ck-suppertime::after { content: "♪"; right: -8px; top: 6px; font-size: 16px; color: var(--accent, #E94B84); animation: ck-note 1.8s ease-out infinite; }
.ck-suppertime::before { content: "♫"; left: -10px; top: 18px; font-size: 13px; color: var(--accent, #E94B84); animation: ck-note 1.8s ease-out .9s infinite; }
@keyframes ck-note { 0% { opacity: 0; transform: translateY(6px) rotate(-10deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px) rotate(12deg); } }

/* Squeeze: a hug that tightens, with hearts rising. */
.ck-squeeze img { animation: ck-squeeze 2.4s ease-in-out infinite; transform-origin: 50% 70%; }
@keyframes ck-squeeze { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.04, .96) rotate(-2deg); } 55% { transform: scale(.98, 1.03) rotate(1deg); } }
.ck-squeeze::after { content: "💗"; right: -6px; top: -4px; font-size: 14px; animation: ck-heart-rise 2.4s ease-out infinite; }
.ck-squeeze::before { content: "💕"; left: -8px; top: 10px; font-size: 11px; animation: ck-heart-rise 2.4s ease-out 1.2s infinite; }
@keyframes ck-heart-rise { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px) scale(1.1); } }

/* Stroll: used for walkers crossing the screen; the sticker itself does a walk bob. */
.ck-stroll img { animation: ck-walkbob .5s ease-in-out infinite; }
@keyframes ck-walkbob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }

/* Buddies: two friends leaning into each other. */
.ck-buddies img { animation: ck-buddies 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-buddies { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

/* Heartbeat: a double thump, like a real heartbeat. */
.ck-heartbeat img { animation: ck-heartbeat 1.6s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes ck-heartbeat { 0%, 30%, 100% { transform: scale(1); } 10% { transform: scale(1.1); } 20% { transform: scale(.97); } 40% { transform: scale(1.07); } }

/* Shy: Charlie Brown's foot scuff and sigh. */
.ck-shy img { animation: ck-shy 4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-shy { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-3deg) translateY(1px); } 30% { transform: rotate(0); } 70% { transform: translateY(2px) scaleY(.98); } 80% { transform: translateY(0); } }

/* Flutter: Woodstock's wobbly flight path. */
.ck-flutter img { animation: ck-flutter 2.6s ease-in-out infinite; }
@keyframes ck-flutter { 0% { transform: translate(0, 0) rotate(-4deg); } 25% { transform: translate(6px, -7px) rotate(3deg); } 50% { transform: translate(-2px, -11px) rotate(-5deg); } 75% { transform: translate(-7px, -4px) rotate(4deg); } 100% { transform: translate(0, 0) rotate(-4deg); } }

/* Hop: small quick hops. */
.ck-hop img { animation: ck-hop 1.1s cubic-bezier(.3, 1.3, .5, 1) infinite; }
@keyframes ck-hop { 0%, 100% { transform: translateY(0) scale(1); } 20% { transform: translateY(-10px) scale(1.03, .97); } 45% { transform: translateY(0) scale(.97, 1.04); } 55% { transform: translateY(0) scale(1); } }

/* Tumble: Woodstock upside down, slowly rotating as he drifts. */
.ck-tumble img { animation: ck-tumble 5s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes ck-tumble { 0% { transform: rotate(0) translateY(0); } 50% { transform: rotate(180deg) translateY(-6px); } 100% { transform: rotate(360deg) translateY(0); } }

/* Sassy: Lucy's hands-on-hips head turn and hair flick. */
.ck-sassy img { animation: ck-sassy 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes ck-sassy { 0%, 60%, 100% { transform: rotate(0) scaleX(1); } 65% { transform: rotate(-6deg) scaleX(1.02); } 72% { transform: rotate(4deg); } 80% { transform: rotate(0); } }

/* Sway: Linus with his blanket, a slow pendulum. */
.ck-sway img { animation: ck-sway 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* Skip: Sally skipping along, bounce with a little kick. */
.ck-skip img { animation: ck-skip .7s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-skip { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }

/* Fist pump: Peppermint Patty punches the air. */
.ck-fistpump img { animation: ck-fistpump 1.8s cubic-bezier(.3, 1.4, .5, 1) infinite; transform-origin: 50% 100%; }
@keyframes ck-fistpump { 0%, 100% { transform: translateY(0) scale(1); } 15% { transform: translateY(-12px) scale(1.04, .98); } 32% { transform: translateY(0) scale(.98, 1.03); } 40% { transform: translateY(0) scale(1); } }

/* Piano: Schroeder rocking at the keys, notes drifting up. */
.ck-piano img { animation: ck-piano 1.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-piano { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-1px); } }
.ck-piano::after { content: "♪"; right: -4px; top: -2px; font-size: 14px; color: var(--accent, #E94B84); animation: ck-note 2s ease-out infinite; }
.ck-piano::before { content: "♩"; right: 10px; top: 8px; font-size: 11px; color: var(--accent, #E94B84); animation: ck-note 2s ease-out 1s infinite; }

/* Dust: Pig-Pen's cloud, swelling with each step. */
.ck-dust img { animation: ck-walkbob .55s ease-in-out infinite; }
.ck-dust::before { content: ""; left: -12%; right: -12%; bottom: -4%; height: 46%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(150, 120, 90, .35), rgba(150, 120, 90, .12) 55%, transparent 72%); animation: ck-dust 1.1s ease-in-out infinite; z-index: -1; }
.ck-dust::after { content: "· ∙ ·"; left: 0; right: 0; bottom: -2px; text-align: center; font-size: 12px; letter-spacing: 6px; color: rgba(120, 95, 70, .7); animation: ck-dust-specks 1.1s ease-in-out infinite; }
@keyframes ck-dust { 0%, 100% { transform: scale(1, 1); opacity: .8; } 50% { transform: scale(1.18, 1.1); opacity: 1; } }
@keyframes ck-dust-specks { 0%, 100% { transform: translateX(-3px) translateY(0); opacity: .5; } 50% { transform: translateX(3px) translateY(-6px); opacity: 1; } }

/* Glasses: Marcie adjusting her glasses: a small lean-in and a tilt. */
.ck-glasses img { animation: ck-glasses 4.5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-glasses { 0%, 70%, 100% { transform: rotate(0) scale(1); } 76% { transform: rotate(-4deg) scale(1.02); } 84% { transform: rotate(-4deg) scale(1.02) translateY(-1px); } 90% { transform: rotate(0) scale(1); } }

/* Nod: Franklin's cool, slow nod. */
.ck-nod img { animation: ck-nod 3s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes ck-nod { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(3deg) translateY(1px); } 40% { transform: rotate(0); } 60% { transform: rotate(3deg) translateY(1px); } 80% { transform: rotate(0); } }

/* Twirl: Frieda spinning with a little dip. */
.ck-twirl img { animation: ck-twirl 3.4s ease-in-out infinite; transform-origin: 50% 70%; }
@keyframes ck-twirl { 0%, 55%, 100% { transform: rotate(0) scale(1); } 65% { transform: rotate(180deg) scale(.96); } 75% { transform: rotate(360deg) scale(1); } }

/* ---------- Shrek ---------- */
/* Stomp: heavy ogre steps that shake the ground. */
.ck-stomp img { animation: ck-stomp 1.6s cubic-bezier(.5, 0, .7, 1) infinite; transform-origin: 50% 100%; }
@keyframes ck-stomp { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-6px) scale(.98, 1.03); } 45% { transform: translateY(0) scale(1.06, .92); } 55% { transform: translateY(0) scale(1); } 80% { transform: translateY(-6px) scale(.98, 1.03); } 95% { transform: translateY(0) scale(1.06, .92); } }
.ck-stomp::before { content: ""; left: 6%; right: 6%; bottom: -3px; height: 8px; border-radius: 50%; background: rgba(90, 110, 60, .25); animation: ck-stomp-shadow 1.6s ease-in-out infinite; z-index: -1; }
@keyframes ck-stomp-shadow { 0%, 100% { transform: scale(1); } 45%, 95% { transform: scale(1.25, 1.1); } }

/* Wave: a big friendly wave. */
.ck-wave img { animation: ck-wave 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-wave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } }

/* Chatter: Donkey cannot stop talking; quick little bounces. */
.ck-chatter img { animation: ck-chatter .5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-chatter { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-5px) rotate(1.5deg); } }
.ck-chatter::after { content: "…"; right: 4px; top: 0; font-size: 14px; font-weight: 800; color: var(--text2, #7D5A69); animation: ck-note 1.6s ease-out infinite; }

/* Couple: a slow dance together. */
.ck-couple img { animation: ck-couple 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-couple { 0%, 100% { transform: rotate(-2deg) translateX(-2px); } 50% { transform: rotate(2deg) translateX(2px); } }
.ck-couple::after { content: "💞"; right: -2px; top: -8px; font-size: 14px; animation: ck-heart-rise 3s ease-out infinite; }

/* Float: Fiona gliding, feet never quite touching the ground. */
.ck-float img { animation: ck-float 3.2s ease-in-out infinite; }
@keyframes ck-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(1deg); } }

/* Big eyes: Puss in Boots. Zooms in close, then a slow tilt of the head. */
.ck-bigeyes img { animation: ck-bigeyes 4s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes ck-bigeyes { 0% { transform: scale(1); } 10% { transform: scale(1.18); } 18% { transform: scale(1.12) rotate(-4deg); } 30% { transform: scale(1.12) rotate(4deg); } 42% { transform: scale(1.12) rotate(0); } 55%, 100% { transform: scale(1); } }
.ck-bigeyes::after { content: "✦"; right: -6px; top: 8px; font-size: 12px; color: #FFD36E; animation: ck-twinkle-once 4s ease-in-out infinite; }
@keyframes ck-twinkle-once { 0%, 8%, 45%, 100% { opacity: 0; transform: scale(.5); } 14%, 35% { opacity: 1; transform: scale(1.2); } }

/* Run run: the Gingerbread Man sprinting, arms pumping. */
.ck-runrun img { animation: ck-runrun .32s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-runrun { 0%, 100% { transform: translateY(0) rotate(6deg) skewX(-4deg); } 50% { transform: translateY(-5px) rotate(8deg) skewX(4deg); } }

/* ---------- Cars ---------- */
/* Ka-chow: McQueen idling with a lean, then a lightning flash. */
.ck-kachow img { animation: ck-kachow 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-kachow { 0%, 100% { transform: translateX(0) skewX(0); } 20% { transform: translateX(-2px) skewX(2deg); } 35% { transform: translateX(10px) skewX(-8deg); } 55% { transform: translateX(10px) skewX(-6deg); } 70% { transform: translateX(0) skewX(0); } }
.ck-kachow::before { content: "⚡"; left: -14px; top: 30%; font-size: 16px; animation: ck-flash 2.2s ease-out infinite; }
.ck-kachow::after { content: ""; left: -40%; bottom: 20%; width: 36%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent, #E94B84)); box-shadow: 0 -7px 0 -0.5px var(--accent, #E94B84), 0 7px 0 -0.5px var(--accent, #E94B84); opacity: 0; animation: ck-speedlines 2.2s ease-out infinite; }
@keyframes ck-flash { 0%, 25%, 70%, 100% { opacity: 0; transform: scale(.6); } 38%, 55% { opacity: 1; transform: scale(1.2); } }
@keyframes ck-speedlines { 0%, 25%, 72%, 100% { opacity: 0; transform: translateX(0); } 40%, 60% { opacity: .9; transform: translateX(-10px); } }

/* Rev: engine shaking, headlight flash. */
.ck-rev img { animation: ck-rev .18s linear infinite, ck-rev-glow 2s ease-in-out infinite; }
@keyframes ck-rev { 0% { transform: translate(0, 0); } 25% { transform: translate(.6px, -.6px); } 50% { transform: translate(-.6px, .4px); } 75% { transform: translate(.4px, .6px); } 100% { transform: translate(0, 0); } }
@keyframes ck-rev-glow { 0%, 60%, 100% { filter: brightness(1); } 70%, 80% { filter: brightness(1.18) drop-shadow(0 0 6px rgba(255, 230, 120, .9)); } }

/* Tow: Mater backing up with his hook swinging. */
.ck-tow img { animation: ck-tow 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-tow { 0%, 100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(-8px) rotate(-2deg); } 50% { transform: translateX(-8px) rotate(2deg); } 80% { transform: translateX(2px) rotate(-1deg); } }

/* Cruise: smooth rolling with a tiny suspension bounce. */
.ck-cruise img { animation: ck-cruise 1.4s ease-in-out infinite; }
@keyframes ck-cruise { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ---------- Music ---------- */
/* Neon: After Hours glow, a slow pulse of magenta and cyan light. */
.ck-neon img { animation: ck-neon 3s ease-in-out infinite; }
@keyframes ck-neon { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 60, 140, .55)) drop-shadow(0 0 10px rgba(80, 200, 255, .35)); transform: translateY(0); } 50% { filter: drop-shadow(0 0 9px rgba(255, 60, 140, .9)) drop-shadow(0 0 18px rgba(80, 200, 255, .6)); transform: translateY(-3px); } }

/* Stage step: a side-to-side step with the beat. */
.ck-stagestep img { animation: ck-stagestep 1s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-stagestep { 0%, 100% { transform: translateX(-4px) rotate(-2deg); } 50% { transform: translateX(4px) rotate(2deg); } }

/* Hat tip: chibi MJ tips the fedora, then a short moonwalk glide. */
.ck-hattip img { animation: ck-hattip 4.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-hattip { 0%, 100% { transform: rotate(0) translateX(0); } 8% { transform: rotate(-6deg); } 16% { transform: rotate(0); } 50% { transform: translateX(0); } 60% { transform: translateX(-10px) rotate(-3deg); } 70% { transform: translateX(-20px) rotate(-2deg); } 80% { transform: translateX(-10px) rotate(-3deg); } 90% { transform: translateX(0); } }
.ck-hattip::after { content: "✦"; left: -8px; top: 10px; font-size: 11px; color: #fff; text-shadow: 0 0 4px #FFD36E; animation: ck-twinkle-once 4.4s ease-in-out 1.6s infinite; }

/* Spin: the famous spin, then freeze on the toes. */
.ck-spin img { animation: ck-spin 3.8s cubic-bezier(.2, .8, .3, 1) infinite; transform-origin: 50% 50%; }
@keyframes ck-spin { 0%, 55%, 100% { transform: rotate(0) scale(1); } 62% { transform: rotate(360deg) scale(1.05); } 70% { transform: rotate(360deg) translateY(-4px) scale(1.05); } 78% { transform: rotate(360deg) scale(1); } }

/* Groove: head bob with the beat, shades on. */
.ck-groove img { animation: ck-groove .55s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes ck-groove { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-2px); } }

/* ---------- Snoopy, more ---------- */
/* Nap: slow breathing on the doghouse roof, zzz floating up. */
.ck-nap img { animation: ck-breathe 4s ease-in-out infinite; transform-origin: 50% 100%; }
.ck-nap::after { content: "z"; right: 4px; top: -4px; font-size: 14px; font-weight: 800; color: var(--accent, #E94B84); animation: ck-zzz 3s ease-out infinite; }
.ck-nap::before { content: "z"; right: 14px; top: 6px; font-size: 10px; font-weight: 800; color: var(--accent, #E94B84); animation: ck-zzz 3s ease-out 1.5s infinite; }
@keyframes ck-zzz { 0% { opacity: 0; transform: translate(0, 4px) scale(.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -22px) scale(1.2); } }
@keyframes ck-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985); } }

/* Cool: Joe Cool leaning on the wall, slow nod, shades glint. */
.ck-cool img { animation: ck-cool 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-cool { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(2deg) translateY(1px); } 45% { transform: rotate(0); } }
.ck-cool::after { content: "✦"; left: 38%; top: 22%; font-size: 10px; color: #fff; text-shadow: 0 0 3px #fff; animation: ck-twinkle-once 3.4s ease-in-out 1s infinite; }

/* Kiss: a lean in, hearts popping. */
.ck-kiss img { animation: ck-kiss 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-kiss { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-5deg) translateX(-2px); } 45% { transform: rotate(-5deg) translateX(-2px) scale(1.02); } 60% { transform: rotate(0); } }
.ck-kiss::after { content: "💋"; left: -10px; top: 20%; font-size: 13px; animation: ck-heart-rise 2.8s ease-out .9s infinite; }

/* ---------- Flowers, hearts, small things ---------- */
/* Bloom: opens from a bud, then sways. */
.ck-bloom img { animation: ck-bloom 6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-bloom { 0% { transform: scale(.6) rotate(-6deg); opacity: .4; } 15% { transform: scale(1.06) rotate(2deg); opacity: 1; } 22% { transform: scale(1) rotate(0); } 60% { transform: rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
.ck-bloom::after { content: "✿"; right: -6px; top: 0; font-size: 12px; color: var(--accent, #E94B84); animation: ck-heart-rise 6s ease-out 1s infinite; }

/* Breeze: tulips bending in a soft wind. */
.ck-breeze img { animation: ck-breeze 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-breeze { 0%, 100% { transform: rotate(-4deg) skewX(-2deg); } 50% { transform: rotate(4deg) skewX(2deg); } }

/* Pulse: a bouquet given with a heartbeat. */
.ck-pulse img { animation: ck-heartbeat 2s ease-in-out infinite; transform-origin: 50% 80%; }

/* Slow spin: daisies turning like a pinwheel. */
.ck-spinslow img { animation: ck-spinslow 14s linear infinite; transform-origin: 50% 50%; }
@keyframes ck-spinslow { to { transform: rotate(360deg); } }

/* Wobble: a strawberry jelly wobble. */
.ck-wobble img { animation: ck-wobble 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-wobble { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(1.06, .94) rotate(-2deg); } 50% { transform: scale(.95, 1.05); } 75% { transform: scale(1.04, .96) rotate(2deg); } }

/* Stretch: a kitten's long stretch, then settle. */
.ck-stretch img { animation: ck-stretch 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ck-stretch { 0%, 60%, 100% { transform: scale(1, 1); } 70% { transform: scale(1.08, .94); } 80% { transform: scale(1.1, .92); } 90% { transform: scale(1, 1); } }

/* Breathe: fallback idle. */
.ck-breathe img { animation: ck-breathe 3.6s ease-in-out infinite; transform-origin: 50% 100%; }

/* GIFs: no CSS motion on the image; the entrance and a faint idle drift only. */
.ck-gif img { animation: ck-idle 5s ease-in-out infinite; }
@keyframes ck-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ---------- spots ---------- */
.ck-walker { position: fixed; pointer-events: none; bottom: calc(var(--tab-h) + var(--sab) + 6px); left: -140px; z-index: 6; animation: ck-cross var(--ck-dur, 14s) linear forwards; }
@keyframes ck-cross { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 300px)); } }
.ck-walker.ck-rtl { left: auto; right: -140px; animation-name: ck-cross-rtl; }
@keyframes ck-cross-rtl { from { transform: translateX(0) scaleX(-1); } to { transform: translateX(calc(-100vw - 300px)) scaleX(-1); } }
.ck-peek { position: fixed; pointer-events: none; z-index: 6; right: -6px; bottom: calc(var(--tab-h) + var(--sab) + 60px); animation: ck-peek-in 4.5s ease-in-out forwards; }
@keyframes ck-peek-in { 0% { transform: translateX(110%); } 18% { transform: translateX(0); } 80% { transform: translateX(0); } 100% { transform: translateX(110%); } }
.ck-peek.ck-left { right: auto; left: -6px; animation-name: ck-peek-in-left; }
@keyframes ck-peek-in-left { 0% { transform: translateX(-110%) scaleX(-1); } 18% { transform: translateX(0) scaleX(-1); } 80% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(-110%) scaleX(-1); } }

@media (prefers-reduced-motion: reduce) {
  .ck, .ck img, .ck::before, .ck::after, .ck-walker, .ck-peek { animation: none !important; }
  .ck-walker, .ck-peek { display: none !important; }
}

/* tiny pixel-art gifs scale up crisp */
.ck-pixel img { image-rendering: pixelated; image-rendering: crisp-edges; }
/* cast in empty states and stage captions */
.pk-empty-cast { display: flex; justify-content: center; margin-bottom: 6px; }
.ck-caption { text-align: center; font-weight: 800; font-size: 15px; color: var(--accent, #E94B84); margin-top: 4px; text-shadow: 0 1px 0 #fff; }
.pk-nest-card .ck, .pk-nest-bar .ck { animation-duration: .6s; }
.pk-hop { animation: pk-hop .75s cubic-bezier(.3, 1.5, .5, 1) 1 !important; }