/**
 * 배지 글린트(빛 회전) 공용 컴포넌트
 *
 * 사용법: 배지 이미지를 감싸는 래퍼에 class="badge-glint" + style="--badge-src: url(이미지)" 를 주고,
 *         내부에 <img> 와 함께 아래 3개 레이어를 넣는다.
 *           <span class="glint glint--light"></span>
 *           <span class="glint glint--dark"></span>
 *           <span class="glint glint--rim"></span>
 * 래퍼 박스가 실제 렌더된 이미지 크기와 같아야 사본(--badge-src) 스케일이 원본과 일치한다(고스트 방지).
 *
 * 흰 반사광 웨지(.glint--light)와 그 뒤 음영 웨지(.glint--dark)가 한 쌍으로 선버스트 마스크 위를 돌며
 * 빛이 스치는 효과를 만든다. 음영은 배지 이미지 사본(--badge-src)을 살짝 어둡게 한 것.
 * 회전은 요소 transform 이 아니라 conic 마스크의 시작각(--glint-angle)만 돌린다 - 사본이 transform 을 안 타
 * 픽셀이 원본 <img> 와 항상 정합(구 방식 "요소 회전+사본 역회전"의 이중 리샘플 블러 원천 제거).
 * 테두리 로터(.glint--rim)는 림에만 걸리는 밝은 웨지를 '다른 속도로' 돌린다 - 흰빛 쌍(14s)과
 * 어긋나며 교차해 테두리가 살아있는 느낌을 준다
 * (무지개 레이어는 걷어냈다 - 배지가 물드는 이물감만 있고 금색 위에서 색이 안 살았다)
 * 마스크/배경 전부 CSS 생성 그라디언트 + no-cors 이미지 렌더 → CORS 무관, 블렌드 미사용.
 * ⚠️ --badge-src 를 mask 로 쓰면 안 됨: mask 이미지는 CORS(anonymous) fetch 라 dolgo-img 에서 차단된다
 */

/* 로터 회전각 - 웨지 마스크(conic)의 시작각(from)을 돌린다. transform rotate 대신 이 각도를 애니메이션하는
   이유 = 리샘플 블러 원천 제거: 요소 회전 + 사본(::before) 역회전 쌍은 상쇄돼도 래스터화가 매 프레임
   비정수 각도로 이미지를 두 번 보간해 원본 <img> 위에 뭉개진 유령(고스트)이 겹쳐 보였다.
   마스크 각도만 돌리면 사본은 한 번도 transform 되지 않아 픽셀이 원본과 항상 정합 */
@property --glint-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* 웨지 폭 숨쉬기(가변 크기)용 각도 변수 - light/dark 마스크의 바깥 경계를 ±로 벌렸다 좁혔다.
   미지원 브라우저는 initial 0deg 로 고정폭 fallback. 회전(14s)/페이드(8.3s)와 비정수비(3.7s)라 매 회전 다른 폭 */
@property --glint-spread {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* 음영 로터의 지연각 - 흰빛 대비 앞뒤로 미세하게 흔들리는 값
   light/dark 를 완전히 다른 주기로 돌리면(예: 14s vs 15.2s) 위상차가 360도를 훑어서
   어느 순간 음영이 흰빛 위에 정확히 겹쳐 서로 상쇄된다(1.12 x 0.9175 = 1.03 = 무효과).
   그래서 주기는 같이 두고 '오프셋만' 흔든다 - 쌍은 유지되면서 관계가 호흡한다 */
@property --dark-lag {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* 테두리 로터의 회전각 - 흰빛 쌍(--glint-angle, 14s)과 독립. 다른 속도로 돌려야
   두 빛이 어긋나며 교차한다(같은 속도면 그냥 흰빛 웨지의 일부로 보인다) */
@property --rim-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}


.badge-glint {
    position: relative;
    /* 회전하는 글린트가 박스 모서리를 넘는 넘침을 클립(스크롤 영역 요동으로 인한 틀 흔들림 방지) */
    overflow: hidden;

    /* 선버스트 - 중앙에서도 은은하고 림으로 갈수록 강해지는 방사형 반사
       (conic 웨지가 중심에서 뻗는 원뿔이라 결합하면 메탈 선버스트가 된다)
       여러 레이어(light::before/::after, dark::before)가 공유하므로 여기서 한 번만 정의한다

       ⚠️ 피크 위치는 '실루엣이 캔버스에서 차지하는 반경 비율'에 맞춰야 한다
          구 아트(20260720-re)는 코인 반경 452/500 = 90.4% 라 피크 88% 가 곧 림이었지만,
          신 아트는 원형 99.4% / 육각 좌우꼭짓점 99.6% 로 캔버스를 꽉 채운다.
          88% 피크 + 95% 소멸을 그대로 두면 빛이 림에 닿기 전에 꺼져 웨지가 이미지 안쪽에서
          도는 것처럼 보인다 → 피크 94%, 소멸 100% 로 이동
          (육각 상하 평변은 93.4% 라 그 구간은 피크 부근에서 배지 알파에 잘린다 - 의도된 동작) */
    --glint-sunburst: radial-gradient(closest-side,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.45) 45%,
            rgba(0, 0, 0, 0.72) 78%,
            #000 94%,
            rgba(0, 0, 0, 0.55) 98%,
            transparent 100%);

    /* 테두리 로터 전용 - 림에만 붙고 중심으로 갈수록 완전히 빠진다 (.glint--rim::before)
       --glint-sunburst-rim(58% 시작)보다 훨씬 타이트하게 68% 부터 살아난다 */
    --glint-rim-sweep: radial-gradient(closest-side,
            transparent 68%,
            rgba(0, 0, 0, 0.28) 84%,
            #000 96%,
            rgba(0, 0, 0, 0.6) 99%,
            transparent 100%);

    /* 림 강조용 - 안쪽을 죽이고 바깥만 남긴 변형 (.glint--light::after) */
    --glint-sunburst-rim: radial-gradient(closest-side,
            transparent 58%,
            rgba(0, 0, 0, 0.45) 80%,
            #000 94%,
            rgba(0, 0, 0, 0.55) 98%,
            transparent 100%);
}

/* 글린트 레이어 묶음 - 이미지 교체 시 빛을 함께 페이드인시키는 그룹 오버레이 (badge-detail.js 가 토글)
   기본 opacity 1 = SSR 딥링크(populate 미실행)서도 글린트 노출(회귀 0). JS 가 이미지 교체 시에만
   glint-hidden(즉시 0) → glint-fade(transition) 로 0→1 부드럽게. 그룹 opacity 라 내부 글린트 자체
   페이드 애니메이션(badge-glint-fade 등)과 곱해져 자연스럽게 차오른다 */
.glint-layers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.badge-glint.glint-hidden .glint-layers {
    opacity: 0;
}

/* 배지가 먼저 자리잡고 빛이 뒤따라 차오르도록 짧은 지연을 둔다 (이미지 로드 완료 시점에 시작)
   ease-in-out 곡선 + 긴 지속으로 "숨 들이쉬듯" 서서히 차오르게 한다 - 시작부가 완만해야
   빛이 툭 켜지지 않는다(ease 는 초반 가속이 빨라 점등처럼 보였다) */
.badge-glint.glint-fade .glint-layers {
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.6, 1) 0.2s;
}

/* 글린트 레이어 - .badge-glint 활성 래퍼 안에서만 노출 */
.glint {
    display: none;
}

.badge-glint .glint {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
}

.badge-glint .glint::before {
    content: "";
    position: absolute;
    inset: 0;
    /* 부유(부모 소수 이동) 중 filter 레이어(음영/무지개)의 리샘플 blur 완화 - 자체 레이어 back-face 숨김 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* 배지 사본 스케일 = 실제 <img> 와 동일 기준으로 맞춰야 음영/무지개(색 변형 사본)가 원본과 픽셀 정합.
       <img> 는 높이 고정·폭 auto 로 렌더되는데 여기서 contain(래퍼 박스 기준)을 쓰면 flex hug 서브픽셀
       반올림으로 래퍼 폭과 img 실폭이 미세하게 달라 사본이 어긋나 이중 윤곽(고스트)이 뜬다.
       → 사용처가 --badge-glint-bg-size 로 img 와 동일한 'auto {높이}' 를 주입(미지정 시 contain 폴백) */
    background: var(--badge-src) center no-repeat;
    background-size: var(--badge-glint-bg-size, contain);
    /* 선버스트 정의는 .badge-glint 의 --glint-sunburst 참조 (네 레이어 공유) */
    -webkit-mask: var(--glint-sunburst);
    mask: var(--glint-sunburst);
}

/* 밝은 반사 로터 - 폭이 제각각인 원뿔 웨지 3개(피크 30°/142°/252°, 알파 1.0/0.45/0.7). 바깥 경계에 --glint-spread 를 더해/빼 폭이 숨쉰다(가변) */
.badge-glint .glint--light {
    /* 웨지(회전) x 브러시 결(정지) - 결은 배지에 붙어 있어야 하므로 from 0deg 로 고정한다.
       --glint-angle 로 같이 돌리면 '빛에 줄무늬가 있는' 꼴이 되어 금속 결로 안 읽힌다.
       빛이 정지한 결을 가로지르며 반짝이는 게 브러시드 메탈의 핵심.
       주기 1.1deg = 표시 반경 115px 기준 호길이 약 2.2px. 하드 스톱 대신 중간값을 둬
       부드럽게 교차시켜 에일리어싱을 줄인다(중심부는 호길이가 0 에 수렴해 균일하게 뭉개지는데,
       선버스트가 중앙을 0.2 로 이미 눌러놔서 문제되지 않는다) */
    -webkit-mask: conic-gradient(from var(--glint-angle, 0deg),
            transparent 0deg,
            #000 30deg,
            transparent calc(64deg + var(--glint-spread)),
            transparent calc(118deg - var(--glint-spread)),
            rgba(0, 0, 0, 0.45) 142deg,
            transparent calc(168deg + var(--glint-spread)),
            transparent calc(216deg - var(--glint-spread)),
            rgba(0, 0, 0, 0.7) 252deg,
            transparent calc(290deg + var(--glint-spread))),
            repeating-conic-gradient(from 0deg,
                #000 0deg,
                rgba(0, 0, 0, 0.55) 0.55deg,
                #000 1.1deg);
    -webkit-mask-composite: source-in;
    mask: conic-gradient(from var(--glint-angle, 0deg),
            transparent 0deg,
            #000 30deg,
            transparent calc(64deg + var(--glint-spread)),
            transparent calc(118deg - var(--glint-spread)),
            rgba(0, 0, 0, 0.45) 142deg,
            transparent calc(168deg + var(--glint-spread)),
            transparent calc(216deg - var(--glint-spread)),
            rgba(0, 0, 0, 0.7) 252deg,
            transparent calc(290deg + var(--glint-spread))),
            repeating-conic-gradient(from 0deg,
                #000 0deg,
                rgba(0, 0, 0, 0.55) 0.55deg,
                #000 1.1deg);
    mask-composite: intersect;
    /* 회전과 어긋나는 주기의 페이드 + 웨지 폭 숨쉬기(3.7s)를 겹쳐 매번 다른 각도·다른 폭으로 나타났다 사라진다
       ⚠️ 페이드는 8.3s - 구 7s 는 회전 14s 의 약수라 위상이 잠겨 매 바퀴 같은 각도에서 같은 타이밍으로
          밝아졌다 어두워졌다(주석엔 "소수 관계"라 적혀 있었지만 7 은 14 를 나눈다).
          8.3s 는 14/8.3=1.687 로 회전과 안 맞물리고, 41/8.3=4.94 라 무지개 게이트(41s)의 비주기성도 안 깬다
          (8.2s 는 41/8.2=5 로 딱 떨어져 게이트가 5회 주기로 반복돼 버린다 - 고르면 안 되는 값) */
    animation: badge-glint-orbit 14s linear infinite,
        badge-glint-fade 8.3s ease-in-out infinite,
        glint-breathe 3.7s ease-in-out infinite;
}

/* 밝은 웨지 = 반사광 - 배지 사본을 밝게 칠한다 (구버전은 균일 반투명 흰색이었다)
   (base .glint::before 규칙의 background/mask 를 이기려면 base 뒤에 위치 - 동일 명시도, 순서로 승리)
   사본은 무변환이라 역회전 보정 불필요 (회전은 부모 마스크 각이 담당) */
.badge-glint .glint--light::before {
    /* 하이라이트 - 균일 흰 칠(rgba(255,255,255,.5))은 금색을 씻어내 플라스틱 광택처럼 보였다.
       음영 로터와 같은 방식으로 배지 사본을 밝게만 칠해 금색 기운을 유지한 채 밝아지게 한다
       ▸ 채도 증폭(saturate)은 시도했다 뺐다 - 금색이 과하게 붉어져 도금처럼 보였다

       ⚠️ brightness 는 채널별 곱셈이라 255 를 넘는 채널부터 잘려나가고, 그만큼 채널 격차가
          줄어 채도가 깎인다(saturate 를 안 써도 색이 빠지는 이유). 배지 픽셀 실측:
            x1.35 → 93.5% 클리핑 / 48.6% 순백 / 평균채도 0.315→0.197
            x1.12 →   78% 클리핑 /  2.6% 순백 / 평균채도 0.315→0.272
          saturate 로 되돌리는 안은 폐기 - 이미 순백이 된 픽셀은 복구 불가이고, 부분 클리핑
          픽셀은 파랑만 깎여 금색 hue 가 34°→47° 로 돌아 노랗게 뜬다

          x1.35 는 화면 절반이 흰색으로 날아가 균일 흰 칠과 다를 바 없어져 1.12 로 낮췄다가,
          체감이 약해 밝히는 폭을 20% 올렸다(0.12 → 0.144). 이 구간은 순백이 2.6%→3.7% 로만
          늘어 안전하다 (1.18 부터 16% 로 급증하니 그 이상은 금물)
          반사 세기는 아래 ::after(림 레이어) opacity 로도 보완한다
       ▸ 조절 노브: brightness = 반사 세기 */
    background: var(--badge-src) center no-repeat;
    background-size: var(--badge-glint-bg-size, contain);
    filter: brightness(1.144);
    /* dark 와 동일하게 배지 알파 png ∩ 선버스트로 실루엣 밖 누출 차단
       (균일 흰 칠일 때는 여백에 새는 걸 피크 88% 로 '완화'만 했지만, 사본+알파 마스크는 원천 차단) */
    -webkit-mask:
            var(--badge-mask-src, linear-gradient(#000, #000)) center / 100% auto no-repeat,
            var(--glint-sunburst);
    -webkit-mask-composite: source-in;
    mask:
            var(--badge-mask-src, linear-gradient(#000, #000)) center / 100% auto no-repeat,
            var(--glint-sunburst);
    mask-composite: intersect;
}

/* 림 강조 레이어 - 바깥쪽만 반사를 한 겹 더 얹어 테두리가 안쪽보다 세게 보이게 한다
   filter 는 레이어 전체에 균일하게 걸려 방사형으로 세기를 바꿀 수 없다 → ::before 와 같은
   '밝게 칠한 사본'을 opacity 만큼 겹치되, 마스크로 안쪽을 0 으로 죽여 바깥에서만 더해지게 한다
   = 안쪽 세기 그대로 / 바깥쪽만 (1 + opacity)배 — opacity 값이 곧 증폭률 노브
   현재 0.35 = 림 1.35배. ::before 밝기를 1.12 로 낮춘 만큼 반사 세기를 여기서 보완한다
   부모 .glint--light 의 conic 웨지 마스크가 의사요소에도 적용되므로 웨지 밖으로는 안 나간다 */
.badge-glint .glint--light::after {
    content: "";
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--badge-src) center no-repeat;
    background-size: var(--badge-glint-bg-size, contain);
    filter: brightness(1.144);
    opacity: 0.35;
    /* 안쪽(58% 이내)은 완전 투명 → 림(94%)에서 최대. 바깥 감쇠는 base 선버스트와 동일하게 맞추고,
       배지 알파 png 와 교집합해 실루엣 밖을 원천 차단 */
    -webkit-mask:
            var(--badge-mask-src, linear-gradient(#000, #000)) center / 100% auto no-repeat,
            var(--glint-sunburst-rim);
    -webkit-mask-composite: source-in;
    mask:
            var(--badge-mask-src, linear-gradient(#000, #000)) center / 100% auto no-repeat,
            var(--glint-sunburst-rim);
    mask-composite: intersect;
}

/* 음영 로터 - 밝은 로터와 같은 주기·방향으로 잠그고, 각 흰빛 웨지의 소멸 구간과 겹치게 배치
   빛이 사그라들며 자연스럽게 그늘로 넘어간다 (크로스페이드) */
.badge-glint .glint--dark {
    -webkit-mask: conic-gradient(from calc(var(--glint-angle, 0deg) + var(--dark-lag, 0deg)),
            transparent calc(48deg - var(--glint-spread)),
            #000 78deg,
            transparent calc(114deg + var(--glint-spread)),
            transparent calc(152deg - var(--glint-spread)),
            rgba(0, 0, 0, 0.5) 182deg,
            transparent calc(214deg + var(--glint-spread)),
            transparent calc(270deg - var(--glint-spread)),
            rgba(0, 0, 0, 0.65) 306deg,
            transparent calc(344deg + var(--glint-spread)));
    mask: conic-gradient(from calc(var(--glint-angle, 0deg) + var(--dark-lag, 0deg)),
            transparent calc(48deg - var(--glint-spread)),
            #000 78deg,
            transparent calc(114deg + var(--glint-spread)),
            transparent calc(152deg - var(--glint-spread)),
            rgba(0, 0, 0, 0.5) 182deg,
            transparent calc(214deg + var(--glint-spread)),
            transparent calc(270deg - var(--glint-spread)),
            rgba(0, 0, 0, 0.65) 306deg,
            transparent calc(344deg + var(--glint-spread)));
    /* 음영도 흰빛과 같은 --glint-spread 로 폭 숨쉬기(동기) - 회전(마스크 각)만, 페이드 없음
       + --dark-lag 로 흰빛 대비 오프셋을 11.3s 주기로 흔든다(14s 와 비정수비)
         → 빛과 그림자 간격이 41~57도 사이에서 벌어졌다 좁아진다. 쌍은 유지되고 기계적인 느낌만 빠진다 */
    animation: badge-glint-orbit 14s linear infinite,
        glint-breathe 3.7s ease-in-out infinite,
        badge-dark-lag 11.3s ease-in-out infinite;
}

.badge-glint .glint--dark::before {
    /* 채도 변화 없이 살짝 어둡게만 - 자연스러운 음영. 사본은 무변환(회전은 부모 마스크 각이 담당)
       어둡기 = 1 에서 깎아내리는 폭이라 0.85(-0.15) → 0.925(-0.075) 로 감쇠 폭이 절반이 됐고,
       거기서 10% 씩 두 번 올려 -0.075 → -0.0825 → -0.09075 = 0.9093
       (마스크 알파는 그대로 - 웨지 모양/범위는 유지하고 음영 세기만 조절한다) */
    filter: brightness(0.9093) saturate(1.5);
    /* 실루엣 클립 + 선버스트 감쇠 = 배지 알파 png(--badge-mask-src) ∩ radial 선버스트. 색 있는 음영 사본이
       배지 실루엣 밖 여백/월계수로 새는 것을 배지 알파로 완전히 잘라낸다(radial 근사의 원형 누출 한계 해소).
       mask 크기는 100% auto = 요소 폭 정사각: push png 는 아이콘을 "가로폭 기준 정사각 패딩"한 300px 파일이라
       요소 폭(=img 실폭, flex hug) 정사각으로 그려야 실루엣이 사본과 정합. --badge-glint-bg-size(auto 230px)를
       쓰면 비정사각 캔버스(월계수 5티어, 690x641 등)에서 마스크 실루엣이 ~7% 작게 그려져 음영/무지개가
       월계수·보석 위에서 끊기는 어긋난 반투명 겹침(고스트)이 생긴다. 서브픽셀 반올림 오차는 1px 미만이라 무해.
       ⚠️ mask-src 는 dolgo-img CORS 필요.
          미설정 폴백을 none 이 아니라 불투명 그라디언트로 둔 이유 = CSS Masking 명세상
          mask-image: none 은 '투명 검정 레이어'로 취급될 수 있어 intersect 하면 전부 잘려
          글린트가 통째로 사라진다(브라우저별 편차). 불투명 폴백이면 첫 레이어가 무효화되어
          radial 만 남는 '근사 동작'이 어느 브라우저에서든 보장된다
          (--badge-mask-src 를 안 주는 사용처: 홈 넛지 시트 - BadgeNudgeDto 에 maskImageUrl 없음) */
    -webkit-mask:
            var(--badge-mask-src, linear-gradient(#000, #000)) center / 100% auto no-repeat,
            var(--glint-sunburst);
    -webkit-mask-composite: source-in;
    mask:
            var(--badge-mask-src, linear-gradient(#000, #000)) center / 100% auto no-repeat,
            var(--glint-sunburst);
    mask-composite: intersect;
}

/* 로터 회전 - transform 아닌 마스크 시작각(--glint-angle) 회전. 사본 이미지가 transform 을 안 타
   원본과 픽셀 정합 유지(리샘플 블러 없음). @property 미지원 브라우저는 보간 불가 → 0deg 고정 웨지가
   페이드/숨쉬기만 하는 정적 fallback */
@keyframes badge-glint-orbit {
    0% {
        --glint-angle: 0deg;
    }
    100% {
        --glint-angle: 360deg;
    }
}

/* 테두리 로터 - 림에만 걸리는 밝은 웨지를 흰빛 쌍과 '다른 속도로' 돌린다
   흰빛 14s / 이쪽 9.5s (비 1.47, 비정수비) → 두 빛이 붙었다 떨어졌다 하며 교차한다
   웨지는 2개(넓은 것 + 옅은 것)로 두어 한 바퀴에 강약이 생긴다 */
.badge-glint .glint--rim {
    -webkit-mask: conic-gradient(from var(--rim-angle, 0deg),
            transparent 0deg,
            #000 26deg,
            transparent calc(58deg + var(--glint-spread)),
            transparent calc(190deg - var(--glint-spread)),
            rgba(0, 0, 0, 0.55) 214deg,
            transparent calc(246deg + var(--glint-spread)));
    mask: conic-gradient(from var(--rim-angle, 0deg),
            transparent 0deg,
            #000 26deg,
            transparent calc(58deg + var(--glint-spread)),
            transparent calc(190deg - var(--glint-spread)),
            rgba(0, 0, 0, 0.55) 214deg,
            transparent calc(246deg + var(--glint-spread)));
    /* 페이드 6.1s - 회전(9.5s)·흰빛 회전(14s) 둘 다와 비정수비라 매번 다른 각도에서 밝아진다 */
    animation: badge-rim-orbit 9.5s linear infinite,
        badge-rim-fade 6.1s ease-in-out infinite,
        glint-breathe 3.7s ease-in-out infinite;
}

.badge-glint .glint--rim::before {
    /* 칠은 흰빛 웨지와 같은 '밝게 한 배지 사본'. 림에만 얹히므로 조금 더 세게 준다
       (면적이 좁아 클리핑에 의한 탈색이 눈에 덜 띈다) */
    background: var(--badge-src) center no-repeat;
    background-size: var(--badge-glint-bg-size, contain);
    filter: brightness(1.26);
    /* 배지 알파 ∩ 림 스윕 - 중심으로 갈수록 완전히 빠지는 게 이 레이어의 핵심 */
    -webkit-mask:
            var(--badge-mask-src, linear-gradient(#000, #000)) center / 100% auto no-repeat,
            var(--glint-rim-sweep);
    -webkit-mask-composite: source-in;
    mask:
            var(--badge-mask-src, linear-gradient(#000, #000)) center / 100% auto no-repeat,
            var(--glint-rim-sweep);
    mask-composite: intersect;
}

/* 음영 로터 지연각 - 흰빛과의 간격을 -7°(가깝게) ↔ +9°(멀게) 로 흔든다
   기본 간격이 48° 라 실제로는 41°~57° 사이를 오간다 (겹쳐 상쇄되는 구간 없음) */
@keyframes badge-dark-lag {
    0%, 100% {
        --dark-lag: -7deg;
    }
    50% {
        --dark-lag: 9deg;
    }
}

/* 테두리 로터 회전 - 흰빛(14s)과 다른 9.5s */
@keyframes badge-rim-orbit {
    0% {
        --rim-angle: 0deg;
    }
    100% {
        --rim-angle: 360deg;
    }
}

/* 테두리 로터 페이드 - 흰빛 페이드(8.3s)보다 짧게 잡아 두 빛의 명멸이 안 겹치게 한다 */
@keyframes badge-rim-fade {
    0%, 6% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    68% {
        opacity: 1;
    }
    94%, 100% {
        opacity: 0;
    }
}

/* 웨지 폭 숨쉬기 - -10°(좁게) ↔ +18°(넓게). 회전(14s)과 비정수비(3.7s)라 매 바퀴 다른 폭으로 도는 느낌
   +18°가 상한: +19°부터 음영 로터의 웨지 1·2(114°+s / 152°-s)가 서로 겹친다 */
@keyframes glint-breathe {
    0%, 100% {
        --glint-spread: -10deg;
    }
    50% {
        --glint-spread: 18deg;
    }
}

/* 반사 쌍의 페이드 사이클 - 대부분 보이고, 사라져 있는 시간은 아주 짧게 (완전 소등 ~4%) */
@keyframes badge-glint-fade {
    0%, 3% {
        opacity: 0;
    }
    29% {
        opacity: 1;
    }
    71% {
        opacity: 1;
    }
    97%, 100% {
        opacity: 0;
    }
}