/*
 * Animated live-casino category icons.
 * Pair with resources/views/parts/live-cat-icon-anim.blade.php.
 *
 * Each icon is scoped under `.lci--{slug}`. Animations fire when the icon
 * itself is hovered OR when an ancestor `.live-cat-tile` is hovered, so
 * the same component plugs into hub tiles and standalone usage alike.
 *
 * Animates only `transform` / `opacity`; respects prefers-reduced-motion.
 */

.lci {
    position: relative;
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ========================================================================
   ROULETTE — wheel spins, ball orbits and settles.
   ======================================================================== */
.lci--roulette .rl { position: relative; width: 62px; height: 62px; }
.lci--roulette .rl::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 7px 12px rgba(11,42,107,.35); }
.lci--roulette .rl-wheel { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from -11.25deg,#0b2a6b 0 22.5deg,#3f86f7 22.5deg 45deg); box-shadow: inset 0 0 0 3px #0a245c, inset 0 0 0 5px rgba(255,255,255,.15); }
.lci--roulette .rl-inner { position: absolute; inset: 11px; border-radius: 50%; background: radial-gradient(circle at 38% 30%,#4a93ff,#102f73); box-shadow: inset 0 0 0 2px rgba(255,255,255,.2), inset 0 -6px 11px rgba(8,24,60,.6); }
.lci--roulette .rl-hub { position: absolute; inset: 24px; border-radius: 50%; background: linear-gradient(150deg,#dcebff,#5aa6ff); box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.7); }
.lci--roulette .rl-track { position: absolute; inset: 3px; border-radius: 50%; }
.lci--roulette .rl-ball { position: absolute; top: 2px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#fff,#bcd8ff); box-shadow: 0 0 5px rgba(255,255,255,.9); }

@keyframes lci-rl-spin  { 0% { transform: rotate(0); } 100% { transform: rotate(1080deg); } }
@keyframes lci-rl-orbit { 0% { transform: rotate(0); } 82% { transform: rotate(-1311deg); } 90% { transform: rotate(-1334deg); } 95% { transform: rotate(-1323deg); } 100% { transform: rotate(-1327.5deg); } }

.lci--roulette:hover .rl-wheel,
.live-cat-tile:hover .lci--roulette .rl-wheel { will-change: transform; animation: lci-rl-spin 2.4s cubic-bezier(.13,.7,.2,1) both; }
.lci--roulette:hover .rl-track,
.live-cat-tile:hover .lci--roulette .rl-track { will-change: transform; animation: lci-rl-orbit 2.55s cubic-bezier(.1,.62,.16,1) both; }

/* ========================================================================
   BLACKJACK — single card does a 360° flip.
   ======================================================================== */
.lci--blackjack .bj { position: relative; width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; perspective: 340px; }
.lci--blackjack .bj-card { position: relative; width: 40px; height: 54px; transform-style: preserve-3d; }
.lci--blackjack .bj-face { position: absolute; inset: 0; border-radius: 6px; backface-visibility: hidden; overflow: hidden; box-shadow: 0 5px 9px rgba(11,42,107,.32); }
.lci--blackjack .bj-front { background: linear-gradient(160deg,#ffffff,#d6e7ff); }
.lci--blackjack .bj-back  { transform: rotateY(180deg); background: linear-gradient(150deg,#2f7df6,#0e2f73); }
.lci--blackjack .bj-back::after { content: ""; position: absolute; inset: 4px; border-radius: 3px; border: 1.5px solid rgba(220,235,255,.5); background: repeating-linear-gradient(45deg,rgba(220,235,255,.16) 0 3px,transparent 3px 6px); }
.lci--blackjack .bj-idx { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .85; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 11px; color: #1a4fb0; }
.lci--blackjack .bj-idx .suit-h { margin-top: 2px; }
.lci--blackjack .bj-tl { top: 4px; left: 5px; }
.lci--blackjack .bj-br { bottom: 4px; right: 5px; transform: rotate(180deg); }
.lci--blackjack .bj-center { position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); }
.lci--blackjack .suit-h { position: relative; display: inline-block; width: var(--s); height: var(--s); background: #2f7df6; transform: rotate(45deg); }
.lci--blackjack .suit-h::before,
.lci--blackjack .suit-h::after { content: ""; position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #2f7df6; }
.lci--blackjack .suit-h::before { top: calc(var(--s) * -0.5); left: 0; }
.lci--blackjack .suit-h::after  { left: calc(var(--s) * -0.5); top: 0; }

@keyframes lci-bj-flip { 0% { transform: rotateY(0) translateY(0); } 28% { transform: rotateY(140deg) translateY(-6px); } 100% { transform: rotateY(360deg) translateY(0); } }

.lci--blackjack:hover .bj-card,
.live-cat-tile:hover .lci--blackjack .bj-card { will-change: transform; animation: lci-bj-flip 1.05s cubic-bezier(.45,.05,.2,1) both; }

/* ========================================================================
   BACCARAT — two cards fan in (Banker/Player).
   ======================================================================== */
.lci--baccarat .bc { position: relative; width: 62px; height: 62px; }
.lci--baccarat .bc-card { position: absolute; left: 50%; top: 50%; width: 33px; height: 45px; margin: -22px 0 0 -16px; border-radius: 5px; background: linear-gradient(160deg,#ffffff,#d6e7ff); box-shadow: 0 6px 12px rgba(11,42,107,.3); transform-origin: 50% 118%; }
.lci--baccarat .bc-l { transform: rotate(-13deg); }
.lci--baccarat .bc-r { transform: rotate(13deg); }
.lci--baccarat .bc-idx { position: absolute; top: 3px; left: 4px; display: flex; flex-direction: column; align-items: center; line-height: .85; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 10px; color: #1a4fb0; }
.lci--baccarat .bc-idx .suit-d { margin-top: 2px; }
.lci--baccarat .bc-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.lci--baccarat .suit-d { display: inline-block; width: var(--s); height: var(--s); background: #2f7df6; transform: rotate(45deg); border-radius: 1px; }
.lci--baccarat .bc-center .suit-d { transform: none; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); border-radius: 0; }

@keyframes lci-bc-l-in { 0% { opacity: 0; transform: rotate(-48deg) translateX(-10px); } 60% { opacity: 1; } 100% { transform: rotate(-13deg); } }
@keyframes lci-bc-r-in { 0% { opacity: 0; transform: rotate(48deg) translateX(10px); } 60% { opacity: 1; } 100% { transform: rotate(13deg); } }

.lci--baccarat:hover .bc-l,
.live-cat-tile:hover .lci--baccarat .bc-l { will-change: transform; animation: lci-bc-l-in .8s cubic-bezier(.2,.82,.25,1) both; }
.lci--baccarat:hover .bc-r,
.live-cat-tile:hover .lci--baccarat .bc-r { will-change: transform; animation: lci-bc-r-in .8s cubic-bezier(.2,.82,.25,1) .07s both; }

/* ========================================================================
   POKER — four chips stack on top of each other.
   ======================================================================== */
.lci--poker .pk { position: relative; width: 62px; height: 62px; perspective: 340px; }
.lci--poker .pk-chip { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: radial-gradient(closest-side,#dcebff 0 24%,transparent 25%), radial-gradient(closest-side,transparent 0 38%,#eaf2ff 39% 46%,transparent 47%), radial-gradient(closest-side,#1f56b8 0 62%,transparent 63%), repeating-conic-gradient(from -11.25deg,#eaf2ff 0 22.5deg,#1748a0 22.5deg 45deg); box-shadow: 0 3px 0 #163f92, 0 6px 10px rgba(8,24,60,.4), inset 0 0 0 2px rgba(11,42,107,.5); transform: rotateX(56deg) translateZ(var(--z,0px)); }
.lci--poker .pk-c1  { --z: 0px; }
.lci--poker .pk-c2  { --z: 6px; }
.lci--poker .pk-c3  { --z: 12px; }
.lci--poker .pk-top { --z: 18px; }

@keyframes lci-pk-in { 0% { opacity: 0; transform: rotateX(56deg) translateZ(var(--z,0px)) translateY(-44px); } 55% { opacity: 1; } 100% { transform: rotateX(56deg) translateZ(var(--z,0px)) translateY(0); } }

.lci--poker:hover .pk-c1,
.live-cat-tile:hover .lci--poker .pk-c1 { will-change: transform; animation: lci-pk-in .5s cubic-bezier(.3,.7,.35,1.25) both; }
.lci--poker:hover .pk-c2,
.live-cat-tile:hover .lci--poker .pk-c2 { will-change: transform; animation: lci-pk-in .5s cubic-bezier(.3,.7,.35,1.25) .1s both; }
.lci--poker:hover .pk-c3,
.live-cat-tile:hover .lci--poker .pk-c3 { will-change: transform; animation: lci-pk-in .5s cubic-bezier(.3,.7,.35,1.25) .2s both; }
.lci--poker:hover .pk-top,
.live-cat-tile:hover .lci--poker .pk-top { will-change: transform; animation: lci-pk-in .52s cubic-bezier(.3,.7,.35,1.25) .3s both; }

/* ========================================================================
   CRAPS — two dice drop in and tumble to rest.
   ======================================================================== */
.lci--craps .dc-scene { position: relative; width: 62px; height: 62px; perspective: 320px; }
.lci--craps .dc-die { position: absolute; width: 26px; height: 26px; transform-style: preserve-3d; }
.lci--craps .dc-die-a { left: 4px;  top: 20px; }
.lci--craps .dc-die-b { left: 31px; top: 26px; }
.lci--craps .dc-cube { position: absolute; width: 26px; height: 26px; transform-style: preserve-3d; }
.lci--craps .dc-die-a .dc-cube { transform: rotateX(-22deg) rotateY(28deg); }
.lci--craps .dc-die-b .dc-cube { transform: rotateX(-16deg) rotateY(-34deg); }
.lci--craps .dc-face { position: absolute; width: 26px; height: 26px; border-radius: 6px; backface-visibility: hidden; outline: 1px solid transparent; background: linear-gradient(150deg,#4a93ff,#16409a); box-shadow: inset 0 0 0 1px rgba(11,42,107,.4), inset 0 -5px 9px rgba(8,24,60,.5); display: grid; grid-template: repeat(3,1fr)/repeat(3,1fr); padding: 4px; }
.lci--craps .dc-face i { width: 3.4px; height: 3.4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#fff,#cfe4ff); align-self: center; justify-self: center; }
.lci--craps .dc-f1 { transform: translateZ(13px); }
.lci--craps .dc-f6 { transform: rotateY(180deg) translateZ(13px); }
.lci--craps .dc-f2 { transform: rotateY(90deg)  translateZ(13px); }
.lci--craps .dc-f5 { transform: rotateY(-90deg) translateZ(13px); }
.lci--craps .dc-f3 { transform: rotateX(90deg)  translateZ(13px); }
.lci--craps .dc-f4 { transform: rotateX(-90deg) translateZ(13px); }

@keyframes lci-dc-drop {
    0%   { transform: translateY(-44px); animation-timing-function: cubic-bezier(.42,0,.78,.28); }
    26%  { transform: translateY(0);     animation-timing-function: cubic-bezier(.16,.6,.3,1); }
    45%  { transform: translateY(-12px); animation-timing-function: cubic-bezier(.6,0,.78,.4); }
    61%  { transform: translateY(0);     animation-timing-function: cubic-bezier(.16,.6,.3,1); }
    74%  { transform: translateY(-5px);  animation-timing-function: cubic-bezier(.6,0,.78,.4); }
    85%  { transform: translateY(0);     animation-timing-function: cubic-bezier(.16,.6,.3,1); }
    93%  { transform: translateY(-1.5px);animation-timing-function: cubic-bezier(.6,0,.78,.4); }
    100% { transform: translateY(0); }
}
@keyframes lci-dc-tumble-a {
    0%   { transform: rotateX(-22deg) rotateY(28deg);   animation-timing-function: cubic-bezier(.5,0,.78,.45); }
    26%  { transform: rotateX(48deg)  rotateY(92deg);   animation-timing-function: cubic-bezier(.2,.6,.3,1); }
    61%  { transform: rotateX(8deg)   rotateY(50deg);   animation-timing-function: cubic-bezier(.34,.7,.42,1); }
    100% { transform: rotateX(-22deg) rotateY(28deg); }
}
@keyframes lci-dc-tumble-b {
    0%   { transform: rotateX(-16deg) rotateY(-34deg);  animation-timing-function: cubic-bezier(.5,0,.78,.45); }
    28%  { transform: rotateX(-88deg) rotateY(-100deg); animation-timing-function: cubic-bezier(.2,.6,.3,1); }
    62%  { transform: rotateX(-46deg) rotateY(-62deg);  animation-timing-function: cubic-bezier(.34,.7,.42,1); }
    100% { transform: rotateX(-16deg) rotateY(-34deg); }
}

.lci--craps:hover .dc-die-a,
.live-cat-tile:hover .lci--craps .dc-die-a { will-change: transform; animation: lci-dc-drop 1.15s linear both; }
.lci--craps:hover .dc-die-b,
.live-cat-tile:hover .lci--craps .dc-die-b { will-change: transform; animation: lci-dc-drop 1.15s linear .08s both; }
.lci--craps:hover .dc-die-a .dc-cube,
.live-cat-tile:hover .lci--craps .dc-die-a .dc-cube { will-change: transform; animation: lci-dc-tumble-a 1.15s linear both; }
.lci--craps:hover .dc-die-b .dc-cube,
.live-cat-tile:hover .lci--craps .dc-die-b .dc-cube { will-change: transform; animation: lci-dc-tumble-b 1.15s linear .08s both; }

/* Respect users who disable motion. */
@media (prefers-reduced-motion: reduce) {
    .lci *,
    .lci *::before,
    .lci *::after { animation: none !important; }
}