/* 로우 바둑이 최종 애니메이션 CSS */
.baduki-animation {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  opacity: 1;
  transition: opacity 0.8s ease;
  top: -65px !important; /* 40px 하향 조정과 동일 적용 */
  min-height: 100px;
}

.baduki-animation.loaded {
  opacity: 1;
}

:root {
  /* 전체 루프 시간 & 이징 */
  --cycle: 6500ms; /* 6.5초 – 여유 있는 템포 */
  --ease-main: ease-in-out;

  /* 카드 움직임 설정 */
  --card-initial-y: -20px;

  /* 심볼(10.png) 글로우 강도 */
  --sym-br-min: 1.0;
  --sym-br-max: 1.2;

  /* 캔버스 비율 */
  --W: 1024;
  --H: 820;
}

/* 공통 레이어 설정 */
.baduki-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: no-repeat center/contain;
  will-change: transform, opacity, filter;
  transform-origin: center;
  pointer-events: none;
}

/* 레이어 순서 */
.sym-main { z-index: 100; }
.fx-ring { z-index: 90; }
.star-6 { z-index: 80; }
.star-7 { z-index: 70; }
.star-8 { z-index: 60; }
.chip-base { z-index: 50; }
.card-4 { z-index: 40; }
.card-3 { z-index: 35; }
.card-2 { z-index: 30; }
.card-1 { z-index: 25; }

/* 카드 전체 그룹: 강조 + 페이드 담당 */
.cards-group {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: cardsGroupAnim var(--cycle) var(--ease-main) infinite;
  will-change: transform, opacity;
  animation-fill-mode: both;
  transform: scale(1);
  opacity: 0;
}

@keyframes cardsGroupAnim {
  0%   { opacity: 0; transform: scale(1); }
  6%   { opacity: 0; transform: scale(1); }
  14%  { opacity: 1; transform: scale(1); } /* 페이드인 완료 */
  22%  { opacity: 1; transform: scale(1.05); } /* 강조 시작 */
  32%  { opacity: 1; transform: scale(1); } /* 강조 완료/정지 */
  82%  { opacity: 1; transform: scale(1); } /* 페이드아웃 시작 */
  96%  { opacity: 0; transform: scale(1); } /* 페이드아웃 완료 */
  100% { opacity: 0; transform: scale(1); }
}

/* 1~4번 카드: 순차 등장 및 위치 연출 */
.card {
  opacity: 0;
  transform: translateY(var(--card-initial-y));
  animation: cardAnimation var(--cycle) var(--ease-main) infinite;
  transform-origin: center;
  animation-fill-mode: both;
}

/* 각 카드별 딜레이 (순차 등장) */
.card-1 { animation-delay: calc(var(--cycle) * 0.00); }
.card-2 { animation-delay: calc(var(--cycle) * 0.05); }
.card-3 { animation-delay: calc(var(--cycle) * 0.10); }
.card-4 { animation-delay: calc(var(--cycle) * 0.15); }

@keyframes cardAnimation {
  0% {
    opacity: 0;
    transform: translateY(var(--card-initial-y)) scale(1);
  }
  14% { /* 그룹 페이드인 완료 시점과 맞추어 등장 */
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  82% { /* 그룹이 페이드아웃 시작 전까지 유지 */
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% { /* 다음 루프 시작 전 완전히 사라짐 */
    opacity: 0;
    transform: translateY(var(--card-initial-y)) scale(1);
  }
}

/* 10번 심볼 – 둥둥 글로우 */
.sym-main {
  animation: symFloatGlow 1900ms ease-in-out infinite;
  animation-fill-mode: both;
  transform: translateY(0) scale(1);
}

@keyframes symFloatGlow {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(var(--sym-br-min))
            drop-shadow(0 0 10px rgba(210,110,255,0.8));
  }
  50% {
    transform: translateY(-8px) scale(1.05);
    filter: brightness(var(--sym-br-max))
            drop-shadow(0 0 22px rgba(225,150,255,1));
  }
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(var(--sym-br-min))
            drop-shadow(0 0 10px rgba(210,110,255,0.8));
  }
}

/* 9번 링 – 마법진 펄스 */
.fx-ring {
  opacity: 0.7;
  mix-blend-mode: screen;
  animation: ringPulse 1900ms ease-in-out infinite;
  animation-fill-mode: both;
  transform: scale(1);
}

@keyframes ringPulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
    filter: brightness(1) blur(0px)
            drop-shadow(0 0 6px rgba(190,120,255,0.5));
  }
  40% {
    opacity: 1;
    transform: scale(1.05);
    filter: brightness(1.4) blur(1px)
            drop-shadow(0 0 18px rgba(220,150,255,0.9));
  }
  70% {
    opacity: 0.85;
    transform: scale(1.02);
    filter: brightness(1.2) blur(0.5px)
            drop-shadow(0 0 10px rgba(205,135,255,0.7));
  }
  100% {
    opacity: 0.6;
    transform: scale(1);
    filter: brightness(1) blur(0px)
            drop-shadow(0 0 6px rgba(190,120,255,0.5));
  }
}

/* 별(6,7,8) – 은은한 깜빡임 */
.star-6,
.star-8 {
  animation: sparklePairSoft var(--cycle) linear infinite;
  animation-fill-mode: both;
  opacity: 0.25;
  transform: scale(1);
}

.star-7 {
  animation: sparkleSoloSoft var(--cycle) linear infinite;
  animation-fill-mode: both;
  opacity: 0.15;
  transform: scale(1);
}

@keyframes sparklePairSoft {
  0%   { opacity: 0.25; transform: scale(1); }
  25%  { opacity: 0.55; transform: scale(1.03); }
  50%  { opacity: 0.35; transform: scale(1.01); }
  75%  { opacity: 0.60; transform: scale(1.04); }
  100% { opacity: 0.25; transform: scale(1); }
}

@keyframes sparkleSoloSoft {
  0%,35% { opacity: 0.15; transform: scale(1); }
  50%    { opacity: 0.70; transform: scale(1.05); }
  70%    { opacity: 0.35; transform: scale(1.01); }
  100%   { opacity: 0.15; transform: scale(1); }
}

/* 칩 베이스는 고정 */
.chip-base {
  animation: none;
}

/* 접근성 */
@media (prefers-reduced-motion: reduce) {
  .cards-group, .card, .sym-main, .fx-ring, .star-6, .star-7, .star-8 { 
    animation: none !important; 
  }
}