/* ========================================
   타로 카드 뒷면 - 빛나는 기하학 문양
   회전 + 맥동 + 빛 애니메이션
   ======================================== */

/* ── 덱 카드 뒷면 오버레이 ── */
.deck-card {
  background: #080808 !important;
  border-color: rgba(195, 165, 75, 0.5) !important;
}

/* geo art가 있으면 정적 패턴 숨김 */
.deck-card:has(.card-back-art)::after {
  display: none;
}

.deck-card .card-back-art {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
}

/* 기하학 패턴은 SVG inline으로 구현 */
.geo-mandala {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
}

/* ── 외곽 장식 프레임 ── */
.card-frame {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(195, 165, 75, 0.4);
  border-radius: 6px;
  z-index: 4;
  pointer-events: none;
}

.card-frame::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(195, 165, 75, 0.15);
  border-radius: 4px;
}

/* 코너 장식 */
.card-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(195, 165, 75, 0.2) 0%, transparent 15%),
    radial-gradient(circle at 100% 0%, rgba(195, 165, 75, 0.2) 0%, transparent 15%),
    radial-gradient(circle at 0% 100%, rgba(195, 165, 75, 0.2) 0%, transparent 15%),
    radial-gradient(circle at 100% 100%, rgba(195, 165, 75, 0.2) 0%, transparent 15%);
}

/* ── 중앙 회전 원 ── */
.geo-circle-outer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 0;
  padding-bottom: 70%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(195, 165, 75, 0.25);
  border-radius: 50%;
  animation: rotateGeo 30s linear infinite;
  z-index: 2;
}

.geo-circle-outer::before {
  content: '';
  position: absolute;
  inset: 6%;
  border: 1px solid rgba(195, 165, 75, 0.2);
  border-radius: 50%;
  animation: rotateGeo 25s linear infinite reverse;
}

.geo-circle-outer::after {
  content: '';
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(195, 165, 75, 0.3);
  border-radius: 50%;
  animation: pulseCircle 4s ease-in-out infinite;
}

/* 내부 원 */
.geo-circle-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35%;
  height: 0;
  padding-bottom: 35%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(195, 165, 75, 0.35);
  border-radius: 50%;
  z-index: 3;
  animation: pulseCircle 3s ease-in-out infinite 0.5s;
}

.geo-circle-inner::before {
  content: '';
  position: absolute;
  inset: 15%;
  border: 1.5px solid rgba(195, 165, 75, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(195, 165, 75, 0.15);
}

/* 중앙 점 */
.geo-circle-inner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  background: rgba(195, 165, 75, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(195, 165, 75, 0.4), 0 0 20px rgba(195, 165, 75, 0.2);
  animation: pulseDot 2s ease-in-out infinite;
}

/* ── 방사형 선 (8방향) ── */
.geo-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%, -50%);
  z-index: 1;
  animation: rotateGeo 60s linear infinite;
}

.geo-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 1px;
  transform-origin: 0% 50%;
  background: linear-gradient(90deg, rgba(195, 165, 75, 0.3), rgba(195, 165, 75, 0.05));
}

.geo-ray:nth-child(1) { transform: rotate(0deg); }
.geo-ray:nth-child(2) { transform: rotate(45deg); }
.geo-ray:nth-child(3) { transform: rotate(90deg); }
.geo-ray:nth-child(4) { transform: rotate(135deg); }
.geo-ray:nth-child(5) { transform: rotate(180deg); }
.geo-ray:nth-child(6) { transform: rotate(225deg); }
.geo-ray:nth-child(7) { transform: rotate(270deg); }
.geo-ray:nth-child(8) { transform: rotate(315deg); }

/* ── 회전 다이아몬드 ── */
.geo-diamond {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45%;
  height: 0;
  padding-bottom: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(195, 165, 75, 0.2);
  z-index: 2;
  animation: rotateGeo 20s linear infinite reverse;
}

.geo-diamond::before {
  content: '';
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(195, 165, 75, 0.25);
  transform: rotate(15deg);
  animation: rotateGeo 15s linear infinite;
}

/* ── 삼각형 장식 ── */
.geo-triangles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55%;
  height: 0;
  padding-bottom: 55%;
  transform: translate(-50%, -50%);
  z-index: 2;
  animation: rotateGeo 40s linear infinite;
}

.geo-triangles::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 5%, 95% 80%, 5% 80%);
  border: 1px solid transparent;
  background: linear-gradient(rgba(195,165,75,0.12), rgba(195,165,75,0.04)) padding-box,
              linear-gradient(rgba(195,165,75,0.2), rgba(195,165,75,0.08)) border-box;
}

.geo-triangles::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 95%, 5% 20%, 95% 20%);
  background: linear-gradient(rgba(195,165,75,0.08), rgba(195,165,75,0.03)) padding-box,
              linear-gradient(rgba(195,165,75,0.15), rgba(195,165,75,0.06)) border-box;
}

/* ── 빛 반사 효과 (쉬머) ── */
.geo-shimmer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(195, 165, 75, 0.03) 30%,
    rgba(195, 165, 75, 0.08) 40%,
    rgba(255, 235, 150, 0.12) 45%,
    rgba(195, 165, 75, 0.08) 50%,
    rgba(195, 165, 75, 0.03) 60%,
    transparent 70%
  );
  background-size: 300% 100%;
  animation: shimmerMove 6s ease-in-out infinite;
  border-radius: inherit;
}

/* 상하 장식선 */
.geo-line-top, .geo-line-bottom {
  position: absolute;
  left: 20%;
  width: 60%;
  height: 1px;
  z-index: 4;
  background: linear-gradient(90deg, transparent, rgba(195, 165, 75, 0.35), transparent);
}
.geo-line-top { top: 12%; }
.geo-line-bottom { bottom: 12%; }

/* ── 애니메이션 ── */
@keyframes rotateGeo {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pulseCircle {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
}

@keyframes pulseDot {
  0%, 100% {
    box-shadow: 0 0 8px rgba(195, 165, 75, 0.3), 0 0 15px rgba(195, 165, 75, 0.1);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 0 15px rgba(195, 165, 75, 0.6), 0 0 30px rgba(195, 165, 75, 0.3);
    transform: translate(-50%, -50%) scale(1.3);
  }
}

@keyframes shimmerMove {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 결과 카드 뒷면(뒤집기 전)에도 적용 ── */
.result-card-front .card-back-art {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
}

.result-card-front {
  background: #080808 !important;
}

/* ── 호버 시 빛 증폭 ── */
.deck-card:hover .geo-shimmer {
  animation-duration: 2s;
}

.deck-card:hover .geo-circle-inner::after {
  box-shadow: 0 0 20px rgba(195, 165, 75, 0.7), 0 0 40px rgba(195, 165, 75, 0.3);
}

.deck-card:hover .card-frame {
  border-color: rgba(195, 165, 75, 0.6);
}

/* ── 모바일 ── */
@media (max-width: 768px) {
  .geo-circle-inner::after { width: 4px; height: 4px; }
  .geo-shimmer { animation-duration: 8s; }
}