/* 새로운 바카라 애니메이션 CSS */
.baccarat-animation {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  perspective: 1000px; /* 3D 깊이감 */
  opacity: 1;
  transition: opacity 0.5s ease;
  top: -55px !important; /* -80px + 40px = -40px */
}

/* 모든 페이지에서 바카라 애니메이션 보이도록 */
.baccarat-animation {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  min-height: 100px !important; /* 최소 높이 확보 */
}
.baccarat-animation.loaded {
  opacity: 1;
}

:root{
  --size: 100%;
  --card-cycle: 7s;
  --vertical-shift: 5%;    /* 카드 상하 이동량 */
  --float-card: 10px;      /* 카드 둥둥 */
  --float-sym: 12px;       /* 심볼 둥둥 */
  --ease-card: ease-in-out;
  --ease-float: ease-in-out;
  --ease-tilt: cubic-bezier(.4,.2,.6,.8);
}

/* 공통 레이어/이미지 */
.baccarat-layer { 
  position: absolute; 
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%; 
  height: 100%;
  pointer-events: none; 
  transform: translateZ(0); 
}
.baccarat-layer > img { 
  display: block; 
  width: 100%; 
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
}

/* 초기 상태 설정 */
.float {
  transform: translateY(0);
  animation-fill-mode: both;
}

.cardImg {
  position: absolute; 
  top: 0; left: 0; right: 0; bottom: 0;
  transform-origin: 50% 80%;
  will-change: transform;
  --dir: 1;
  animation: cardFanSync var(--card-cycle) var(--ease-card) infinite;
  animation-fill-mode: both;
  transform: none;
}

.symFloat {
  animation-fill-mode: both;
  transform: translateY(0);
}

.symTilt {
  animation-fill-mode: both;
  transform: rotateX(-12deg) rotateY(-6deg) rotateZ(2deg);
}

/* 레이어 순서 (뒤→앞) */
.behind { z-index: 10; }
.kLayer { z-index: 100; }
.nLayer { z-index: 101; }
.sym    { z-index: 120; }
.coinsF { z-index: 130; }

/* 카드 둥둥 모션 */
@keyframes floatCard {
  from { transform: translateY(calc(var(--float-card) * -0.5)); }
  to   { transform: translateY(calc(var(--float-card) *  0.5)); }
}
.kLayer, .nLayer {
  animation: floatCard 6s var(--ease-float) infinite alternate;
  will-change: transform;
  animation-fill-mode: both;
}

/* 카드 수직 모션 */
@keyframes cardFanSync {
  0%   { transform: none; }
  50%  { transform: translateY(calc(var(--vertical-shift) * var(--dir))); }
  100% { transform: none; }
}
.kCard    { --dir: -1; }  /* 위로 */
.nineCard { --dir:  1; }  /* 아래로 */

/* 심볼 둥둥 + 틸트 */
@keyframes symFloat {
  from { transform: translateY(calc(var(--float-sym) * -0.5)); }
  to   { transform: translateY(calc(var(--float-sym) *  0.5)); }
}
.symFloat {
  animation: symFloat 5.5s var(--ease-float) infinite alternate;
  transform-style: preserve-3d;
  will-change: transform;
  animation-fill-mode: both;
}

@keyframes symWobble {
  0%   { transform: rotateX(-12deg) rotateY(-6deg) rotateZ( 2deg); }
  50%  { transform: rotateX( 10deg) rotateY( 4deg) rotateZ(-3deg); }
  100% { transform: rotateX(-12deg) rotateY(-6deg) rotateZ( 2deg); }
}
.symTilt {
  animation: symWobble 6s var(--ease-tilt) infinite alternate;
  will-change: transform;
  animation-fill-mode: both;
}

/* 심볼 지연 */
.d1{ animation-delay: 0s; }
.d2{ animation-delay: 0s; }
.d3{ animation-delay: 0s; }
.d4{ animation-delay: 0s; }

/* 모션 최소화 모드 */
@media (prefers-reduced-motion: reduce) {
  .kLayer, .nLayer, .cardImg, .symFloat, .symTilt { animation: none !important; }
}