/*
 * ARCANA CTA MODULE CSS
 * 역할: 분석 시작 CTA 전용 스타일.
 * 원칙: CTA는 이 파일과 arcana-cta.js만 관리한다.
 * 형태: 흰 배경 위, 중심 원을 기준으로 바깥쪽으로 길어지는 방사형 막대.
 * 상태: idle(흑백 저강도) / hover(블루 계열 확장) / loading(다채로운 컬러 파동, 최소 5초 유지).
 */

.arcana-recommend-actions {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 8;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  overflow: visible;
  isolation: isolate;
  visibility: visible;
  opacity: 1;
}

.arcana-recommend-section.is-recommend-ready .arcana-recommend-actions {
  display: none !important;
}

/* 추천 CTA 뒤쪽의 기본 안내 문구는 제거한다.
   경고/완료처럼 showMessage로 들어오는 실제 상태 문구만 표시한다. */
.arcana-recommend-message.is-default {
  display: none !important;
}

.arcana-recommend-message:not(.is-default).is-visible {
  display: flex !important;
}

.arcana-cta-wave-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  overflow: visible;
}

.arcana-cta-wave-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 286px;
  height: 286px;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.arcana-cta-wave-line {
  stroke: rgba(17, 24, 39, 0.26);
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: var(--alpha, 0.64);
  stroke-dasharray: calc(var(--idle, 16) * 1px) 999;
  filter: none;
  transition: stroke 1.1s ease, filter 1.1s ease, opacity 0.75s ease, stroke-width 0.75s ease;
  animation: arcanaCtaRadialIdle 5.2s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.arcana-cta-inner-ring,
.arcana-cta-soft-ring {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.arcana-cta-inner-ring {
  stroke: rgba(17, 24, 39, 0.16);
  stroke-width: 1.4;
}

.arcana-cta-soft-ring {
  stroke: rgba(17, 24, 39, 0.055);
  stroke-width: 10;
}

.arcana-recommend-actions:hover .arcana-cta-wave-line,
.arcana-recommend-actions:focus-within .arcana-cta-wave-line {
  stroke: hsl(215deg 92% 57% / 0.74);
  opacity: 0.92;
  stroke-width: 1.95;
  filter: drop-shadow(0 0 2px hsl(215deg 92% 60% / 0.18));
  animation-name: arcanaCtaRadialHover;
  animation-duration: 2.6s;
  animation-delay: calc(var(--delay, 0s) * 0.72);
}

.arcana-recommend-section.is-cta-loading .arcana-cta-wave-line {
  opacity: 0.98;
  stroke-width: 2.05;
  animation:
    arcanaCtaRadialLoading 1.12s ease-in-out infinite,
    arcanaCtaColorFlow 5.2s ease-in-out infinite;
  animation-delay:
    calc(var(--delay, 0s) * 0.55),
    calc(var(--delay, 0s) * 0.10);
}

.arcana-recommend-section.is-cta-loading .arcana-cta-inner-ring {
  stroke: rgba(139, 92, 246, 0.30);
}

#arcanaRunSimulation.arcana-wave-cta {
  position: relative;
  z-index: 4;
  width: 128px;
  height: 128px;
  min-width: 128px;
  min-height: 128px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
  border: 1px solid rgba(17, 24, 39, 0.12);
  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.88);
  text-align: center;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
  cursor: pointer;
  visibility: visible;
  opacity: 1;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

#arcanaRunSimulation.arcana-wave-cta[hidden] {
  display: inline-flex !important;
}

#arcanaRunSimulation.arcana-wave-cta::before,
#arcanaRunSimulation.arcana-wave-cta::after {
  content: none !important;
  display: none !important;
}

#arcanaRunSimulation.arcana-wave-cta .arcana-cta-main {
  display: block;
  font-size: 19px;
  line-height: 1.08;
}

#arcanaRunSimulation.arcana-wave-cta .arcana-cta-sub {
  display: block;
  max-width: 98px;
  font-size: 10px;
  line-height: 1.25;
  color: rgba(75, 85, 99, 0.78);
  font-weight: 700;
  letter-spacing: -0.04em;
}

#arcanaRunSimulation.arcana-wave-cta:hover:not(.is-soft-disabled),
#arcanaRunSimulation.arcana-wave-cta:focus-visible:not(.is-soft-disabled),
#arcanaRunSimulation.arcana-wave-cta.is-touch-preview:not(.is-soft-disabled) {
  transform: scale(1.035);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.36);
  box-shadow:
    0 14px 34px rgba(59, 130, 246, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.94);
}

#arcanaRunSimulation.arcana-wave-cta.is-soft-disabled {
  cursor: not-allowed;
  color: rgba(17, 24, 39, 0.58);
  background: rgba(255, 255, 255, 0.78);
}

.arcana-recommend-section.is-cta-loading #arcanaRunSimulation.arcana-wave-cta {
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.28);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 16px 44px rgba(124, 58, 237, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.96);
  transform: scale(1.02);
  pointer-events: none;
}

.arcana-recommend-section.is-cta-loading #arcanaRunSimulation.arcana-wave-cta .arcana-cta-sub {
  color: rgba(88, 28, 135, 0.76);
}

.arcana-recommend-section.is-cta-complete #arcanaRunSimulation.arcana-wave-cta {
  color: #059669;
  border-color: rgba(5, 150, 105, 0.26);
}

.arcana-recommend-section.is-cta-error #arcanaRunSimulation.arcana-wave-cta {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.28);
}

@keyframes arcanaCtaRadialIdle {
  0%, 100% { stroke-dasharray: calc(var(--idle, 15) * 1px) 999; opacity: 0.34; }
  45% { stroke-dasharray: calc(var(--mid, 28) * 1px) 999; opacity: 0.68; }
  72% { stroke-dasharray: calc(var(--soft, 21) * 1px) 999; opacity: 0.48; }
}

@keyframes arcanaCtaRadialHover {
  0%, 100% { stroke-dasharray: calc(var(--mid, 28) * 1px) 999; opacity: 0.60; }
  42% { stroke-dasharray: calc(var(--long, 54) * 1px) 999; opacity: 0.96; }
  72% { stroke-dasharray: calc(var(--hover, 41) * 1px) 999; opacity: 0.82; }
}

@keyframes arcanaCtaRadialLoading {
  0%, 100% { stroke-dasharray: calc(var(--mid, 30) * 1px) 999; opacity: 0.70; }
  36% { stroke-dasharray: calc(var(--long, 60) * 1px) 999; opacity: 1; }
  68% { stroke-dasharray: calc(var(--hover, 46) * 1px) 999; opacity: 0.88; }
}


@keyframes arcanaCtaColorFlow {
  0%, 10% {
    stroke: hsl(215deg 92% 57% / 0.74);
    filter: drop-shadow(0 0 2px hsl(215deg 92% 60% / 0.18));
  }
  28% {
    stroke: hsl(var(--tone, 286deg) 94% 58% / 0.86);
    filter: drop-shadow(0 0 3px hsl(var(--tone, 286deg) 94% 60% / 0.28));
  }
  56% {
    stroke: hsl(calc(var(--tone, 286deg) + 56deg) 94% 58% / 0.90);
    filter: drop-shadow(0 0 3px hsl(calc(var(--tone, 286deg) + 56deg) 94% 60% / 0.30));
  }
  82%, 100% {
    stroke: hsl(calc(var(--tone, 286deg) + 118deg) 92% 56% / 0.90);
    filter: drop-shadow(0 0 3px hsl(calc(var(--tone, 286deg) + 118deg) 92% 60% / 0.32));
  }
}

@media (max-width: 720px) {
  .arcana-recommend-actions {
    width: 250px;
    height: 250px;
  }

  .arcana-cta-wave-svg {
    width: 244px;
    height: 244px;
  }

  #arcanaRunSimulation.arcana-wave-cta {
    width: 112px;
    height: 112px;
    min-width: 112px;
    min-height: 112px;
  }

  #arcanaRunSimulation.arcana-wave-cta .arcana-cta-main {
    font-size: 17px;
  }

  #arcanaRunSimulation.arcana-wave-cta .arcana-cta-sub {
    font-size: 9px;
  }
}