.dasoni-radar {
  --radar-accent: #5b57ee;
  --radar-accent-deep: #4742dc;
  --radar-soft: #efeeff;
  --radar-ink: #181b25;
  --radar-muted: #747c91;
  width: min(100%, 320px);
  margin: 0 auto;
  color: var(--radar-ink);
  text-align: center;
  font-family: Outfit, "Noto Sans KR", sans-serif;
}

.dasoni-radar--harvest {
  --radar-accent: #ad8437;
  --radar-accent-deep: #7d4034;
  --radar-soft: #f6ead0;
  --radar-ink: #2d2922;
  --radar-muted: #786f62;
}

.dasoni-radar-stage {
  position: relative;
  width: 208px;
  height: 208px;
  margin: 0 auto 26px;
  isolation: isolate;
}

.dasoni-radar-field,
.dasoni-radar-beam,
.dasoni-radar-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.dasoni-radar-field {
  z-index: 0;
  width: 178px;
  height: 178px;
  border: 1px solid color-mix(in srgb, var(--radar-accent) 14%, transparent);
  background:
    linear-gradient(color-mix(in srgb, var(--radar-accent) 9%, transparent) 1px, transparent 1px) 50%/100% 50%,
    linear-gradient(90deg, color-mix(in srgb, var(--radar-accent) 9%, transparent) 1px, transparent 1px) 50%/50% 100%,
    radial-gradient(circle, color-mix(in srgb, var(--radar-soft) 82%, transparent), transparent 68%);
}

.dasoni-radar-field::before,
.dasoni-radar-field::after {
  position: absolute;
  inset: 25%;
  border: 1px solid color-mix(in srgb, var(--radar-accent) 13%, transparent);
  border-radius: 50%;
  content: "";
}

.dasoni-radar-field::after { inset: 12.5%; }

.dasoni-radar-beam {
  z-index: 1;
  width: 176px;
  height: 176px;
  background: conic-gradient(from 0deg, transparent 0 77%, color-mix(in srgb, var(--radar-accent) 32%, transparent) 92%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 25%, #000 27% 100%);
  mask: radial-gradient(circle, transparent 0 25%, #000 27% 100%);
  animation: dasoni-radar-sweep 1.45s linear infinite;
}

.dasoni-radar-wave {
  z-index: 2;
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--radar-accent);
  opacity: 0;
  animation: dasoni-radar-signal 1.65s ease-out infinite;
}

.dasoni-radar-wave--2 { animation-delay: .52s; }
.dasoni-radar-wave--3 { animation-delay: 1.04s; }

.dasoni-radar-scout {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 24px 24px 28px 28px;
  background: linear-gradient(145deg, var(--radar-accent), var(--radar-accent-deep));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--radar-accent) 28%, transparent);
  transform: translate(-50%, -50%);
  animation: dasoni-radar-bob 1.3s ease-in-out infinite;
}

.dasoni-radar-scout svg { width: 46px; height: 46px; overflow: visible; }

.dasoni-radar-find {
  position: absolute;
  z-index: 4;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--radar-accent) 26%, white);
  border-radius: 14px;
  background: #fff;
  color: var(--radar-accent-deep);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--radar-accent) 16%, transparent);
  opacity: 0;
  transform: scale(.48);
}

.dasoni-radar-find svg { width: 21px; height: 21px; }
.dasoni-radar-find--0 { top: 0; left: 85px; }
.dasoni-radar-find--1 { top: 43px; right: 4px; }
.dasoni-radar-find--2 { right: 23px; bottom: 8px; }
.dasoni-radar-find--3 { bottom: 4px; left: 28px; }
.dasoni-radar-find--4 { top: 48px; left: 1px; }

.dasoni-radar:not(.is-gsap) .dasoni-radar-find {
  animation: dasoni-radar-find 1.65s var(--find-delay, 0s) ease-in-out infinite;
}

.dasoni-radar .dasoni-radar-title {
  margin: 0;
  font-size: clamp(31px, 8vw, 42px);
  line-height: 1.08;
  letter-spacing: -.055em;
  font-weight: 900;
}

.dasoni-radar-title span { display: block; }
.dasoni-radar-title span + span { color: var(--radar-accent-deep); }

.dasoni-radar .dasoni-radar-copy {
  max-width: 270px;
  margin: 16px auto 0;
  color: var(--radar-muted);
  font-size: 13px;
  line-height: 1.65;
  word-break: keep-all;
}

.dasoni-radar-progress {
  width: 112px;
  height: 4px;
  margin: 22px auto 0;
  overflow: hidden;
  border-radius: 99px;
  background: color-mix(in srgb, var(--radar-accent) 13%, transparent);
}

.dasoni-radar-progress i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--radar-accent), var(--radar-accent-deep));
  animation: dasoni-radar-progress 1.15s ease-in-out infinite;
}

.dasoni-radar-overlay {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, #f5efe3 91%, transparent);
  backdrop-filter: blur(12px);
}

.dasoni-radar-overlay[hidden] { display: none !important; }

.dasoni-radar-card {
  width: min(100%, 380px);
  padding: 34px 24px 30px;
  border: 1px solid color-mix(in srgb, var(--radar-accent, #ad8437) 24%, transparent);
  border-radius: 28px;
  background: color-mix(in srgb, #fff 94%, var(--radar-soft, #f6ead0));
  box-shadow: 0 22px 60px rgba(68, 47, 25, .16);
}

@keyframes dasoni-radar-sweep {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes dasoni-radar-signal {
  0% { opacity: .72; transform: translate(-50%, -50%) scale(.75); }
  78%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.05); }
}

@keyframes dasoni-radar-bob {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2deg) translateY(0); }
  50% { transform: translate(-50%, -50%) rotate(2deg) translateY(-4px); }
}

@keyframes dasoni-radar-find {
  0%, 12%, 100% { opacity: 0; transform: scale(.48); }
  24%, 72% { opacity: 1; transform: scale(1); }
  84% { opacity: .18; transform: scale(.84); }
}

@keyframes dasoni-radar-progress {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
  .dasoni-radar-beam,
  .dasoni-radar-wave,
  .dasoni-radar-scout,
  .dasoni-radar-find,
  .dasoni-radar-progress i { animation: none !important; }
  .dasoni-radar-find { opacity: 1; transform: scale(1); }
}

@media (max-height: 700px) {
  .dasoni-radar-stage { width: 176px; height: 176px; margin-bottom: 20px; transform: scale(.86); }
  .dasoni-radar-title { font-size: 30px; }
  .dasoni-radar-card { padding-block: 24px; }
}