/* Coolspins.net – casino logo tiles and one-shot logo animations.
   Visual language follows the Top10casino.io reference (brand-coloured tile,
   discreet motion). Pair with assets/js/casino-logo-animations.js.

   Markup:
     <div class="cs-logo" data-cs-fx="tastevegas">
       <img src=".../casino-logos/tastevegas.svg" alt="" width="160" height="64">
     </div>

   - The JS adds .cs-fx-play once when the tile scrolls into view, and again on
     row hover / keyboard focus. It removes the class when the animation ends.
   - Every animation runs once (no infinite loops, no flashing) and uses
     transform/opacity where possible.
   - Everything is switched off under prefers-reduced-motion.
   - The Coolspins site logo is not touched by this file. */

.cs-logo {
  --cs-brand: #1a1d4a;
  --cs-logo-h: 96px;
  --cs-logo-img-h: 64px;
  position: relative;
  display: grid;
  place-items: center;
  height: var(--cs-logo-h);
  padding: 14px 18px;
  border-radius: 6px;
  background: var(--cs-brand);
  overflow: hidden;
  isolation: isolate;
}
.cs-logo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: var(--cs-logo-img-h);
  object-fit: contain;
}
.cs-logo::before,
.cs-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
a.cs-logo:focus-visible { outline: 3px solid #1a1d4a; outline-offset: 3px; }

/* Tile colours, picked to sit behind each operator's own logo colours.
   Override per row with style="--cs-brand:#xxxxxx" if the design needs it. */
.cs-logo[data-cs-fx="tastevegas"] { --cs-brand: #2a0d45; }
.cs-logo[data-cs-fx="madrush"]    { --cs-brand: #3b0d2c; }
.cs-logo[data-cs-fx="reko"]       { --cs-brand: #0b2f3f; }
.cs-logo[data-cs-fx="slotowl"]    { --cs-brand: #13235e; }
.cs-logo[data-cs-fx="jackpotcow"] { --cs-brand: #3d1760; }
.cs-logo[data-cs-fx="slotwish"]   { --cs-brand: #1f1450; }
.cs-logo[data-cs-fx="wizzspin"]   { --cs-brand: #10343c; }
.cs-logo[data-cs-fx="moi"]        { --cs-brand: #fff1e4; }
.cs-logo[data-cs-fx="prontobet"]  { --cs-brand: #121212; }
.cs-logo[data-cs-fx="happyspins"] { --cs-brand: #26203f; }
/* Casinos 11–40 use the default ink tile (#1a1d4a); only logos with dark lettering need a light tile. */
.cs-logo[data-cs-fx="yaa"]        { --cs-brand: #fff1e4; }

/* 1 · Taste Vegas – neon warming up: a single soft glow swell (no flicker) */
.cs-fx-play[data-cs-fx="tastevegas"] img { animation: cs-tv-neon 1000ms ease-out both; }
.cs-fx-play[data-cs-fx="tastevegas"]::before { background: radial-gradient(60% 70% at 50% 50%, rgb(255 92 210 / .55), rgb(255 160 60 / .25) 55%, transparent 75%); animation: cs-tv-glow 1000ms ease-out both; }
@keyframes cs-tv-neon { 0% { opacity: .35; filter: saturate(.3) brightness(.7); transform: scale(.96); } 55% { opacity: 1; filter: saturate(1.25) brightness(1.15) drop-shadow(0 0 8px rgb(255 120 220 / .7)); transform: scale(1.03); } 100% { opacity: 1; filter: none; transform: none; } }
@keyframes cs-tv-glow { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

/* 2 · Mad Rush – rush in from the left with speed streaks */
.cs-fx-play[data-cs-fx="madrush"] img { animation: cs-mr-dash 800ms cubic-bezier(.2, .8, .2, 1.15) both; }
.cs-fx-play[data-cs-fx="madrush"]::before { background: repeating-linear-gradient(180deg, transparent 0 9px, rgb(255 214 60 / .55) 9px 11px, transparent 11px 23px); animation: cs-mr-streak 650ms ease-out both; }
@keyframes cs-mr-dash { 0% { transform: translateX(-70%) skewX(-18deg); opacity: 0; } 60% { transform: translateX(6%) skewX(-8deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes cs-mr-streak { 0% { opacity: .9; transform: translateX(-100%) scaleX(.4); } 100% { opacity: 0; transform: translateX(60%) scaleX(1.4); } }

/* 3 · Reko – the cloud lettering puffs up and floats into place */
.cs-fx-play[data-cs-fx="reko"] img { animation: cs-rk-puff 900ms cubic-bezier(.3, 1.4, .5, 1) both; }
.cs-fx-play[data-cs-fx="reko"]::before { background: radial-gradient(circle, rgb(120 240 230 / .45), transparent 60%); animation: cs-rk-cloud 900ms ease-out both; }
@keyframes cs-rk-puff { 0% { opacity: 0; transform: translateY(14%) scale(.82); } 60% { opacity: 1; transform: translateY(-3%) scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes cs-rk-cloud { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.8); } }

/* 4 · Slot Owl – a curious owl head-tilt with a small hop */
.cs-fx-play[data-cs-fx="slotowl"] img { transform-origin: 50% 75%; animation: cs-so-tilt 1000ms ease-in-out both; }
@keyframes cs-so-tilt { 0% { transform: none; } 15% { transform: translateY(-6%) rotate(0); } 35% { transform: rotate(-9deg); } 60% { transform: rotate(7deg); } 80% { transform: rotate(-2deg); } 100% { transform: none; } }

/* 5 · Jackpot Cow – drops in and lands with a squash, a gold glint underneath */
.cs-fx-play[data-cs-fx="jackpotcow"] img { transform-origin: 50% 100%; animation: cs-jc-land 900ms ease-out both; }
.cs-fx-play[data-cs-fx="jackpotcow"]::after { background: radial-gradient(50% 30% at 50% 100%, rgb(255 205 60 / .65), transparent 70%); animation: cs-jc-glint 900ms ease-out both; }
@keyframes cs-jc-land { 0% { transform: translateY(-45%) scaleY(1.08); opacity: 0; } 30% { opacity: 1; } 40% { transform: translateY(0) scale(1.12, .86); } 60% { transform: translateY(-10%) scale(.97, 1.04); } 80% { transform: translateY(0) scale(1.03, .97); } 100% { transform: none; opacity: 1; } }
@keyframes cs-jc-glint { 0%, 35% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

/* 6 · Slot Wish – the wish rises out of the lamp, then a golden shimmer passes */
.cs-fx-play[data-cs-fx="slotwish"] img { transform-origin: 85% 70%; animation: cs-sw-rise 1100ms cubic-bezier(.3, 1.2, .5, 1) both; }
.cs-fx-play[data-cs-fx="slotwish"]::before { z-index: 2; background: linear-gradient(105deg, transparent 38%, rgb(255 226 120 / .7) 50%, transparent 62%); animation: cs-sw-shimmer 1100ms ease-in-out both; }
@keyframes cs-sw-rise { 0% { opacity: 0; transform: scale(.55) translateY(10%); } 50% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: none; } }
@keyframes cs-sw-shimmer { 0%, 40% { opacity: 0; transform: translateX(-100%); } 45% { opacity: 1; } 100% { opacity: 1; transform: translateX(100%); } }

/* 7 · Wizz Spin – one wizard spin, with a swirl behind it */
.cs-fx-play[data-cs-fx="wizzspin"] img { animation: cs-ws-spin 950ms cubic-bezier(.4, 0, .2, 1) both; }
.cs-fx-play[data-cs-fx="wizzspin"]::before { background: conic-gradient(from 0deg, transparent, rgb(80 230 210 / .45), transparent 40%, rgb(255 140 60 / .35), transparent 80%); animation: cs-ws-swirl 950ms ease-out both; }
@keyframes cs-ws-spin { 0% { transform: perspective(400px) rotateY(0); } 100% { transform: perspective(400px) rotateY(360deg); } }
@keyframes cs-ws-swirl { 0% { opacity: 0; transform: rotate(0) scale(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: rotate(240deg) scale(1.6); } }

/* 8 · Moi Casino – "moi" means hello: a friendly wave */
.cs-fx-play[data-cs-fx="moi"] img { transform-origin: 30% 100%; animation: cs-mo-wave 900ms ease-in-out both; }
@keyframes cs-mo-wave { 0% { transform: none; } 20% { transform: rotate(-7deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } 100% { transform: none; } }

/* 9 · ProntoBet – "pronto": snaps in fast, a neon-yellow stroke follows */
.cs-fx-play[data-cs-fx="prontobet"] img { animation: cs-pb-snap 550ms cubic-bezier(.2, .9, .3, 1.2) both; }
.cs-fx-play[data-cs-fx="prontobet"]::after { inset: auto 18% 18px; height: 3px; border-radius: 3px; background: #f8ff01; transform-origin: left; animation: cs-pb-line 700ms 150ms cubic-bezier(.3, 0, .1, 1) both; }
@keyframes cs-pb-snap { 0% { transform: scale(.4); opacity: 0; filter: blur(6px); } 100% { transform: none; opacity: 1; filter: none; } }
@keyframes cs-pb-line { 0% { opacity: 1; transform: scaleX(0); } 70% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }

/* 10 · HappySpins – a happy bounce with a warm orange smile-glow */
.cs-fx-play[data-cs-fx="happyspins"] img { animation: cs-hs-happy 900ms cubic-bezier(.3, 1.5, .5, 1) both; }
.cs-fx-play[data-cs-fx="happyspins"]::before { background: radial-gradient(55% 45% at 50% 70%, rgb(233 86 23 / .5), transparent 70%); animation: cs-hs-glow 900ms ease-out both; }
@keyframes cs-hs-happy { 0% { transform: scale(.8) rotate(-8deg); opacity: 0; } 45% { transform: scale(1.08) rotate(4deg); opacity: 1; } 75% { transform: scale(.98) rotate(-1deg); } 100% { transform: none; opacity: 1; } }
@keyframes cs-hs-glow { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }

/* ── Casinos 11–40 (added 2026-10-02 after Petter: every logo needs an effect) ── */

/* Fallback: any tile without its own effect (incl. text placeholders) gets a soft pop */
.cs-fx-play img, .cs-fx-play .logo-placeholder { animation: cs-default-pop 800ms cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes cs-default-pop { 0% { transform: scale(.85); opacity: .4; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* 11 · Sugarino – a sweet candy pop with a pink sugar glow */
.cs-fx-play[data-cs-fx="sugarino"] img { animation: cs-sg-pop 900ms cubic-bezier(.3, 1.6, .5, 1) both; }
.cs-fx-play[data-cs-fx="sugarino"]::before { background: radial-gradient(circle, rgb(255 120 200 / .55), transparent 65%); animation: cs-glow-burst 900ms ease-out both; }
@keyframes cs-sg-pop { 0% { transform: scale(.6); opacity: .3; } 50% { transform: scale(1.12); opacity: 1; } 75% { transform: scale(.96); } 100% { transform: none; opacity: 1; } }

/* 12 · Spin Sweet – one flat spin with a candy-pink swirl */
.cs-fx-play[data-cs-fx="spinsweet"] img { animation: cs-ss-spin 900ms cubic-bezier(.4, 0, .2, 1) both; }
.cs-fx-play[data-cs-fx="spinsweet"]::before { background: conic-gradient(from 0deg, transparent, rgb(255 140 210 / .45), transparent 50%); animation: cs-swirl 900ms ease-out both; }
@keyframes cs-ss-spin { 0% { transform: rotate(-360deg) scale(.6); opacity: .3; } 100% { transform: none; opacity: 1; } }

/* 13 · Slotzy – drops in like a slot reel stopping */
.cs-fx-play[data-cs-fx="slotzy"] img { animation: cs-reel-stop 800ms cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes cs-reel-stop { 0% { transform: translateY(-80%); filter: blur(4px); opacity: .2; } 60% { transform: translateY(8%); filter: none; opacity: 1; } 100% { transform: none; opacity: 1; } }

/* 14 · Slotable – the dart hits the target: zoom in and wobble */
.cs-fx-play[data-cs-fx="slotable"] img { animation: cs-sb-hit 900ms ease-out both; }
@keyframes cs-sb-hit { 0% { transform: scale(1.5); opacity: 0; } 35% { transform: scale(.95); opacity: 1; } 50% { transform: rotate(-4deg); } 65% { transform: rotate(3deg); } 80% { transform: rotate(-1deg); } 100% { transform: none; opacity: 1; } }

/* 15 · Slot Pony – a little gallop across the tile */
.cs-fx-play[data-cs-fx="slotpony"] img { animation: cs-sp-gallop 1000ms ease-in-out both; }
@keyframes cs-sp-gallop { 0% { transform: translateX(-30%); opacity: .2; } 20% { transform: translate(-20%, -8%); opacity: 1; } 40% { transform: translate(-10%, 0); } 60% { transform: translate(-3%, -6%); } 80% { transform: translate(0, 0); } 90% { transform: translateY(-2%); } 100% { transform: none; opacity: 1; } }

/* 16 · Slot Mojo – a magic purple aura pulses once */
.cs-fx-play[data-cs-fx="slotmojo"] img { animation: cs-mj-magic 1000ms ease-out both; }
.cs-fx-play[data-cs-fx="slotmojo"]::before { background: radial-gradient(circle, rgb(170 90 255 / .6), transparent 65%); animation: cs-glow-burst 1000ms ease-out both; }
@keyframes cs-mj-magic { 0% { filter: hue-rotate(90deg) brightness(.6); transform: scale(.92); } 50% { filter: hue-rotate(-30deg) brightness(1.3) drop-shadow(0 0 10px rgb(190 120 255 / .8)); transform: scale(1.05); } 100% { filter: none; transform: none; } }

/* 17 · Slot Hype – a hyped punch-in with a quick shake */
.cs-fx-play[data-cs-fx="slothype"] img { animation: cs-hy-punch 800ms ease-out both; }
@keyframes cs-hy-punch { 0% { transform: scale(.5); opacity: 0; } 30% { transform: scale(1.15); opacity: 1; } 45% { transform: translateX(-4%) rotate(-2deg); } 60% { transform: translateX(4%) rotate(2deg); } 75% { transform: translateX(-2%); } 100% { transform: none; opacity: 1; } }

/* 18 · Slot Cloud – floats up gently on a soft cloud glow */
.cs-fx-play[data-cs-fx="slotcloud"] img { animation: cs-cl-float 1100ms cubic-bezier(.3, 1.2, .5, 1) both; }
.cs-fx-play[data-cs-fx="slotcloud"]::before { background: radial-gradient(70% 50% at 50% 80%, rgb(200 230 255 / .55), transparent 70%); animation: cs-glow-burst 1100ms ease-out both; }
@keyframes cs-cl-float { 0% { transform: translateY(25%); opacity: 0; } 60% { transform: translateY(-5%); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* 19 · Rich Moose – a proud antler sway and a gold shine */
.cs-fx-play[data-cs-fx="richmoose"] img { transform-origin: 50% 100%; animation: cs-rm-sway 1000ms ease-in-out both; }
.cs-fx-play[data-cs-fx="richmoose"]::before { z-index: 2; background: linear-gradient(105deg, transparent 38%, rgb(255 215 100 / .7) 50%, transparent 62%); animation: cs-shimmer 1000ms ease-in-out both; }
@keyframes cs-rm-sway { 0% { transform: none; } 25% { transform: rotate(-5deg); } 55% { transform: rotate(4deg); } 80% { transform: rotate(-1deg); } 100% { transform: none; } }

/* 20 · Reblz – lands like a rebel stamp */
.cs-fx-play[data-cs-fx="reblz"] img { animation: cs-rb-stamp 700ms cubic-bezier(.2, .9, .3, 1) both; }
@keyframes cs-rb-stamp { 0% { transform: scale(1.8) rotate(-12deg); opacity: 0; } 55% { transform: scale(.94) rotate(-3deg); opacity: 1; } 75% { transform: scale(1.03) rotate(-3deg); } 100% { transform: none; opacity: 1; } }

/* 21 · Dice Wise – rolls in like a die */
.cs-fx-play[data-cs-fx="dicewise"] img { animation: cs-dice-roll 900ms cubic-bezier(.2, .8, .3, 1.1) both; }
@keyframes cs-dice-roll { 0% { transform: translateX(-60%) rotate(-360deg) scale(.6); opacity: 0; } 70% { transform: translateX(4%) rotate(8deg) scale(1.02); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* 22 · Djack – flips over like a blackjack card */
.cs-fx-play[data-cs-fx="djack"] img { animation: cs-dj-flip 850ms cubic-bezier(.3, .7, .3, 1.1) both; }
@keyframes cs-dj-flip { 0% { transform: perspective(500px) rotateY(180deg); opacity: .2; } 50% { opacity: 1; } 100% { transform: perspective(500px) rotateY(0); opacity: 1; } }

/* 23 · Nitro Win – nitro boost from the left with a green exhaust streak */
.cs-fx-play[data-cs-fx="nitrowin"] img { animation: cs-mr-dash 750ms cubic-bezier(.2, .8, .2, 1.15) both; }
.cs-fx-play[data-cs-fx="nitrowin"]::before { background: repeating-linear-gradient(180deg, transparent 0 10px, rgb(170 255 60 / .55) 10px 12px, transparent 12px 22px); animation: cs-mr-streak 600ms ease-out both; }

/* 24 · Lucky Fuel – the tank fills up from the bottom */
.cs-fx-play[data-cs-fx="luckyfuel"] img { animation: cs-lf-fill 1000ms ease-out both; }
@keyframes cs-lf-fill { 0% { clip-path: inset(100% 0 0 0); } 85% { clip-path: inset(0 0 0 0); transform: scale(1.04); } 100% { clip-path: inset(0 0 0 0); transform: none; } }

/* 25 · Slot Squad – the squad marches in step */
.cs-fx-play[data-cs-fx="slotsquad"] img { animation: cs-sq-slide 900ms ease-out both; }
@keyframes cs-sq-slide { 0% { transform: translateX(-25%) rotate(-3deg); opacity: .2; } 25% { transform: translateX(-15%) rotate(3deg); opacity: 1; } 50% { transform: translateX(-6%) rotate(-3deg); } 75% { transform: translateX(-1%) rotate(2deg); } 100% { transform: none; opacity: 1; } }

/* 26 · Nifty – a neat 3D tilt into place */
.cs-fx-play[data-cs-fx="nifty"] img { animation: cs-nf-tilt 900ms cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes cs-nf-tilt { 0% { transform: perspective(400px) rotateX(70deg); opacity: 0; } 100% { transform: perspective(400px) rotateX(0); opacity: 1; } }

/* 27 · GambleZen – one calm breath with a soft green aura */
.cs-fx-play[data-cs-fx="gamblezen"] img { animation: cs-gz-breathe 1300ms ease-in-out both; }
.cs-fx-play[data-cs-fx="gamblezen"]::before { background: radial-gradient(circle, rgb(120 230 190 / .4), transparent 65%); animation: cs-glow-burst 1300ms ease-in-out both; }
@keyframes cs-gz-breathe { 0% { transform: scale(.94); opacity: .6; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* 28 · Kim Casino – an elegant reveal with a gold shimmer */
.cs-fx-play[data-cs-fx="kimcasino"] img { animation: cs-km-reveal 1000ms ease-out both; }
.cs-fx-play[data-cs-fx="kimcasino"]::before { z-index: 2; background: linear-gradient(105deg, transparent 38%, rgb(255 225 150 / .7) 50%, transparent 62%); animation: cs-shimmer 1000ms ease-in-out both; }
@keyframes cs-km-reveal { 0% { opacity: 0; transform: scale(.94); } 100% { opacity: 1; transform: none; } }

/* 29 · Bet Inferno – flares up once like a flame */
.cs-fx-play[data-cs-fx="betinferno"] img { transform-origin: 50% 100%; animation: cs-bi-flame 1000ms ease-out both; }
.cs-fx-play[data-cs-fx="betinferno"]::before { background: radial-gradient(60% 60% at 50% 100%, rgb(255 110 30 / .7), rgb(255 40 0 / .3) 50%, transparent 75%); animation: cs-glow-burst 1000ms ease-out both; }
@keyframes cs-bi-flame { 0% { transform: translateY(20%) scaleY(.7); opacity: 0; } 45% { transform: translateY(-4%) scaleY(1.1); opacity: 1; filter: brightness(1.3); } 70% { transform: scaleY(.97); } 100% { transform: none; opacity: 1; filter: none; } }

/* 30 · HappySlots – a happy squash-and-stretch bounce */
.cs-fx-play[data-cs-fx="happyslots"] img { transform-origin: 50% 100%; animation: cs-jc-land 900ms ease-out both; }

/* 31 · Winsly – a sly sideways slide with a wink-skew */
.cs-fx-play[data-cs-fx="winsly"] img { animation: cs-ws-sly 850ms cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes cs-ws-sly { 0% { transform: translateX(40%) skewX(20deg); opacity: 0; } 60% { transform: translateX(-4%) skewX(-6deg); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* 32 · Red Dice – tumbles down and lands */
.cs-fx-play[data-cs-fx="reddice"] img { animation: cs-rd-tumble 900ms cubic-bezier(.3, .9, .3, 1.2) both; }
@keyframes cs-rd-tumble { 0% { transform: translateY(-70%) rotate(180deg) scale(.6); opacity: 0; } 65% { transform: translateY(5%) rotate(-6deg); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* 33 · Arctic Casino – frost clears from the logo */
.cs-fx-play[data-cs-fx="arcticcasino"] img { animation: cs-ac-thaw 1100ms ease-out both; }
.cs-fx-play[data-cs-fx="arcticcasino"]::before { background: radial-gradient(circle, rgb(180 230 255 / .6), transparent 70%); animation: cs-glow-burst 1100ms ease-out both; }
@keyframes cs-ac-thaw { 0% { filter: blur(6px) brightness(1.8) saturate(0); opacity: .4; transform: scale(1.05); } 100% { filter: none; opacity: 1; transform: none; } }

/* 34 · Lucky Jungle – swings in on a vine */
.cs-fx-play[data-cs-fx="luckyjungle"] img { transform-origin: 50% -60%; animation: cs-lj-swing 1100ms ease-in-out both; }
@keyframes cs-lj-swing { 0% { transform: rotate(-25deg); opacity: .2; } 30% { transform: rotate(12deg); opacity: 1; } 55% { transform: rotate(-6deg); } 80% { transform: rotate(2deg); } 100% { transform: none; opacity: 1; } }

/* 35 · Winzie – zips in from the right */
.cs-fx-play[data-cs-fx="winzie"] img { animation: cs-wz-zip 700ms cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes cs-wz-zip { 0% { transform: translateX(70%) scale(.7); opacity: 0; filter: blur(3px); } 100% { transform: none; opacity: 1; filter: none; } }

/* 36 · Overload – a single power surge: buzz, flash, settle */
.cs-fx-play[data-cs-fx="overload"] img { animation: cs-ol-surge 800ms linear both; }
.cs-fx-play[data-cs-fx="overload"]::before { background: radial-gradient(circle, rgb(255 255 160 / .55), transparent 60%); animation: cs-glow-burst 500ms ease-out both; }
@keyframes cs-ol-surge { 0% { transform: none; } 10% { transform: translate(-2%, 1%); } 20% { transform: translate(2%, -1%); } 30% { transform: translate(-2%, -1%); } 40% { transform: translate(2%, 1%); filter: brightness(1.5); } 55% { transform: scale(1.06); filter: brightness(1.2); } 100% { transform: none; filter: none; } }

/* 37 · Slot Paradise – a warm sunrise behind the logo */
.cs-fx-play[data-cs-fx="slotparadise"] img { animation: cs-cl-float 1000ms cubic-bezier(.3, 1.2, .5, 1) both; }
.cs-fx-play[data-cs-fx="slotparadise"]::before { background: radial-gradient(70% 60% at 50% 100%, rgb(255 190 80 / .65), rgb(255 110 120 / .25) 55%, transparent 75%); animation: cs-glow-burst 1100ms ease-out both; }

/* 38 · Lyra – a star twinkles over the constellation */
.cs-fx-play[data-cs-fx="lyra"] img { animation: cs-ly-in 1000ms ease-out both; }
.cs-fx-play[data-cs-fx="lyra"]::after { inset: 18% auto auto 72%; width: 18px; height: 18px; background: radial-gradient(circle, #fff 0 18%, rgb(255 255 255 / .6) 30%, transparent 70%); animation: cs-ly-star 1000ms ease-out both; }
@keyframes cs-ly-in { 0% { opacity: .3; transform: scale(.95); filter: brightness(.6); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes cs-ly-star { 0% { opacity: 0; transform: scale(0) rotate(0); } 50% { opacity: 1; transform: scale(1.8) rotate(90deg); } 100% { opacity: 0; transform: scale(.5) rotate(180deg); } }

/* 39 · Yaa – a cheerful "yaa!" jump */
.cs-fx-play[data-cs-fx="yaa"] img { animation: cs-ya-jump 850ms cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes cs-ya-jump { 0% { transform: translateY(0) scale(1, .85); } 35% { transform: translateY(-18%) scale(.95, 1.08); } 65% { transform: translateY(0) scale(1.06, .94); } 100% { transform: none; } }

/* Shared helpers for the effects above */
@keyframes cs-glow-burst { 0% { opacity: 0; transform: scale(.6); } 45% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes cs-swirl { 0% { opacity: 0; transform: rotate(0) scale(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: rotate(-300deg) scale(1.6); } }
@keyframes cs-shimmer { 0%, 35% { opacity: 0; transform: translateX(-100%); } 40% { opacity: 1; } 100% { opacity: 1; transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .cs-logo img, .cs-logo .logo-placeholder, .cs-logo::before, .cs-logo::after { animation: none !important; }
}