/* =========================================
   ring.css
   - 바깥 회전 링 + 안쪽 하얀 원 스윕 효과
   - 크기는 .bubble-wrap 에서 결정 (여기서는 100%)
========================================= */

/* ==== 파라미터 (필요하면 숫자만 조절) ==== */
:root {
  /* 바깥 링(도넛) */
  --ring-thickness: 10px;    /* 테두리 라인 두께 */
  --ring-alpha: 0.25;        /* 테두리 밝기 */
  --ring-arc: 40deg;         /* 테두리 밝은 구간 길이 */
  --ring-feather: 30deg;     /* 테두리 양끝 페더 */
  --ring-speed: 6s;          /* 바깥 링 회전 속도 */

  /* 안쪽 스윕 버블 */
  --bubble-sweep-speed: 3s;  /* 안쪽 스윕 회전 속도 */
}

/* 링 전체 컨테이너 */
.ring {
  position: relative;
  width: 100%;
  height: 100%;
}

/* =========================
   1) 바깥 회전 링 (도넛)
========================= */
.ring-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;

  /* 2개의 아크가 180deg마다 반복 */
  background:
    /* 상층: 선명도 */
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 255, 255, 0)
        calc(90deg - var(--ring-arc) / 2 - var(--ring-feather)),
      rgba(255, 255, 255, 0)
        calc(90deg - var(--ring-arc) / 2 - var(--ring-feather)),
      rgba(255, 255, 255, var(--ring-alpha))
        calc(90deg - var(--ring-arc) / 2),
      rgba(255, 255, 255, var(--ring-alpha))
        calc(90deg + var(--ring-arc) / 2),
      rgba(255, 255, 255, 0)
        calc(90deg + var(--ring-arc) / 2 + var(--ring-feather)),
      rgba(255, 255, 255, 0) 180deg
    ),
    /* 하층: 은은한 글로우 */
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 255, 255, 0)
        calc(90deg - var(--ring-arc) / 2 - var(--ring-feather) - 6deg),
      rgba(255, 255, 255, 0.2)
        calc(90deg - var(--ring-arc) / 2 - 2deg),
      rgba(255, 255, 255, 0.2)
        calc(90deg + var(--ring-arc) / 2 + 2deg),
      rgba(255, 255, 255, 0)
        calc(90deg + var(--ring-arc) / 2 + var(--ring-feather) + 6deg),
      rgba(255, 255, 255, 0) 180deg
    );

  /* 도넛형 마스크 */
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(50% - var(--ring-thickness)),
    #000 calc(50% - var(--ring-thickness)),
    #000 calc(50% + var(--ring-thickness)),
    transparent calc(50% + var(--ring-thickness))
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(50% - var(--ring-thickness)),
    #000 calc(50% - var(--ring-thickness)),
    #000 calc(50% + var(--ring-thickness)),
    transparent calc(50% + var(--ring-thickness))
  );

  animation: ring-spin var(--ring-speed) linear infinite;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
}

@keyframes ring-spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================
   2) 안쪽 버블 + 스윕 효과
========================= */
.ring-inner {
  position: absolute;
  inset: 26.5%;          /* ▶ 안쪽 원 크기 (바깥 링과 간격). 필요하면 14~20%로 조절 */
  border-radius: 50%;
  overflow: hidden;    /* 안쪽 스윕이 밖으로 튀어나가지 않게 */

  /* 기본 하얀 버블 바탕 (살짝 중앙이 더 밝은 radial gradient) */
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.92) 28%,
      rgba(255, 255, 255, 0.78) 52%,
      rgba(255, 255, 255, 0.40) 78%,
      rgba(255, 255, 255, 0.00) 100%
    );

  box-shadow:
    0 0 25px rgba(255, 255, 255, 0.55),
    0 0 70px rgba(200, 230, 255, 0.35);
}

/* ⭐ 여기서 "하얀 스윕" 표현 */
.ring-inner::before {
  content: "";
  position: absolute;
  inset: -8%;         /* 살짝 크게 → 부드럽게 회전 */
  border-radius: 50%;

  /* 
    conic-gradient로 "머리는 밝고, 꼬리는 점점 흐려지는" 웨지 만들기
    - 0~210deg : 거의 투명
    - 210~260deg : 꼬리 (약간 밝음)
    - 260~300deg : 머리 (가장 밝음)
    - 300~360deg : 다시 투명
  */
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.0) 0deg,
    rgba(255, 255, 255, 0.0) 210deg,
    rgba(255, 255, 255, 0.18) 230deg,
    rgba(255, 255, 255, 0.30) 250deg,
    rgba(255, 255, 255, 0.60) 280deg,
    rgba(255, 255, 255, 0.30) 305deg,
    rgba(255, 255, 255, 0.08) 330deg,
    rgba(255, 255, 255, 0.0) 360deg
  );

  mix-blend-mode: screen;   /* 아래 하얀 원과 자연스럽게 섞이도록 */
  opacity: 0.95;
  animation: bubble-sweep var(--bubble-sweep-speed) linear infinite;
}

/* 안쪽 스윕 회전: 시계방향 */
@keyframes bubble-sweep {
  to {
    transform: rotate(360deg);
  }
}

/* 모션 줄이기 설정인 경우 애니메이션 정지 */
@media (prefers-reduced-motion: reduce) {
  .ring-outer,
  .ring-inner::before {
    animation: none;
  }
}