/*
 * widget_point/effects.css : 닉네임 효과 (도감 카드 보상)
 * .pw-fx-{키} 에 효과를 건다. 글자 단위 효과는 .pw-ch(--i: 순번), --pw-base 는 원래 닉네임 색.
 * 새 효과: 여기 + lib.php pw_effects(). 필요하면 script.js FX_SPLIT / FX_DATA_TEXT / FX_PARTICLES 에도 넣는다.
 */
.pw-fx { display: inline-block; --pw-base: currentColor; }
.pw-fx .pw-ch { display: inline-block; white-space: pre; }
/* 화면 밖에 있는 동안 멈춤 (script.js watchFx) */
.pw-fx-off, .pw-fx-off *, .pw-fx-off::before, .pw-fx-off::after, .pw-fx-off *::before, .pw-fx-off *::after { animation-play-state: paused !important; }
.pw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 무지개: 색이 천천히 흘러간다 */
.pw-fx-rainbow {
    background: linear-gradient(90deg, #ff6b8b, #ffae5c, #ffe066, #6fdc8c, #5ec8f2, #9b8cff, #ff6b8b) 0 0 / 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    animation: pwfx-slide 4s linear infinite;
}
@keyframes pwfx-slide { to { background-position: -200% 0; } }

/* 반사광: 빛 한 줄기가 주기적으로 지나간다 */
.pw-fx-shine {
    /* 글자가 투명해 currentColor 를 못 쓴다. 색을 못 읽었을 때의 기본색 */
    --pw-base: #5a5258;
    background: linear-gradient(110deg, var(--pw-base) 0 42%, #fff 50%, var(--pw-base) 58% 100%) 0 0 / 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    animation: pwfx-shine 3.2s ease-in-out infinite;
}
@keyframes pwfx-shine { 0% { background-position: 100% 0; } 55%, 100% { background-position: -60% 0; } }

/* 은은한 빛: 글자 주변이 숨 쉬듯 밝아진다 */
.pw-fx-glow { -webkit-text-fill-color: var(--pw-base); animation: pwfx-glow 2.6s ease-in-out infinite; }
@keyframes pwfx-glow {
    0%, 100% { text-shadow: 0 0 1px var(--pw-base); }
    50% { text-shadow: 0 0 5px var(--pw-base), 0 0 11px var(--pw-base); }
}

/* 네온: 흰 글자 + 색 번짐, 가끔 깜빡 */
.pw-fx-neon {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    text-shadow: 0 0 2px #fff, 0 0 6px var(--pw-base), 0 0 12px var(--pw-base), 0 0 20px var(--pw-base);
    animation: pwfx-flicker 5s infinite;
}
@keyframes pwfx-flicker { 0%, 18%, 21%, 60%, 63%, 100% { opacity: 1; } 19%, 61% { opacity: .55; } }

/* 반짝반짝: 양 끝에 별이 번갈아 반짝 */
.pw-fx-sparkle { position: relative; }
.pw-fx-sparkle::before,
.pw-fx-sparkle::after {
    content: '✦';
    position: absolute;
    font-size: .55em;
    line-height: 1;
    color: #ffcf5c;
    -webkit-text-fill-color: #ffcf5c;
    pointer-events: none;
    animation: pwfx-twinkle 1.8s ease-in-out infinite;
}
.pw-fx-sparkle::before { top: -.35em; left: -.45em; }
.pw-fx-sparkle::after { right: -.5em; bottom: -.2em; animation-delay: .9s; }
@keyframes pwfx-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }

/* 둥실둥실: 이름 전체가 살짝 떠다닌다 */
.pw-fx-float { animation: pwfx-float 2.8s ease-in-out infinite; }
@keyframes pwfx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* 두근두근: 심장 박동처럼 두 번 콩콩 */
.pw-fx-heart { animation: pwfx-heart 1.5s ease-in-out infinite; }
@keyframes pwfx-heart { 0%, 45%, 100% { transform: scale(1); } 12% { transform: scale(1.09); } 26% { transform: scale(1.02); } 34% { transform: scale(1.07); } }

/* 물결: 글자가 차례로 오르내린다 */
.pw-fx-wave .pw-ch { animation: pwfx-wave 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * .09s); }
@keyframes pwfx-wave { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-.24em); } }

/* 통통: 마우스를 올리면 글자가 차례로 튀어오른다 */
a:hover .pw-fx-bounce .pw-ch,
.pw-fx-bounce:hover .pw-ch,
.pw-fx-bounce.pw-fx-run .pw-ch { animation: pwfx-bounce .55s ease both; animation-delay: calc(var(--i) * .045s); }
@keyframes pwfx-bounce { 0%, 100% { transform: none; } 40% { transform: translateY(-.38em) scale(1.12); } 70% { transform: translateY(.04em) scale(.97); } }

/* 셔플 슬롯: 글자마다 [가짜 3개 + 진짜] 릴이 굴러가다 멈춘다 (처음 볼 때 + 마우스를 올릴 때) */
.pw-fx-shuffle .pw-ch { overflow: hidden; height: 1.2em; line-height: 1.2em; vertical-align: bottom; }
.pw-fx-shuffle .pw-reel { display: flex; flex-direction: column; transform: translateY(-3.6em); }
.pw-fx-shuffle .pw-reel > span { display: block; height: 1.2em; text-align: center; }
.pw-fx-shuffle.pw-fx-run .pw-reel { animation: pwfx-reel .7s cubic-bezier(.2, .75, .25, 1) both; animation-delay: calc(var(--i) * .06s); }
@keyframes pwfx-reel { from { transform: translateY(0); } to { transform: translateY(-3.6em); } }

/* 글리치: 색이 어긋난 잔상이 가끔 지지직 */
.pw-fx-glitch { position: relative; }
.pw-fx-glitch::before,
.pw-fx-glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: none;
}
.pw-fx-glitch::before { color: #ff3d7f; -webkit-text-fill-color: #ff3d7f; clip-path: inset(0 0 58% 0); animation: pwfx-glitch-a 3s infinite steps(1); }
.pw-fx-glitch::after { color: #34d3ff; -webkit-text-fill-color: #34d3ff; clip-path: inset(52% 0 0 0); animation: pwfx-glitch-b 3s infinite steps(1); }
@keyframes pwfx-glitch-a { 0%, 86%, 100% { transform: none; opacity: 0; } 87% { transform: translate(-2px, -1px); opacity: .9; } 90% { transform: translate(2px, 0); opacity: .9; } 93% { transform: translate(-1px, 1px); opacity: .9; } }
@keyframes pwfx-glitch-b { 0%, 86%, 100% { transform: none; opacity: 0; } 88% { transform: translate(2px, 1px); opacity: .9; } 91% { transform: translate(-2px, 0); opacity: .9; } 94% { transform: translate(1px, -1px); opacity: .9; } }

/* 스르륵: 글자가 왼쪽부터 차례로 나타난다 (처음 볼 때 + 마우스를 올릴 때) */
.pw-fx-fadein.pw-fx-run .pw-ch { animation: pwfx-fadein .5s ease both; animation-delay: calc(var(--i) * .07s); }
@keyframes pwfx-fadein { from { opacity: 0; transform: translateX(-.3em); } }

/* 초점 맞추기: 흐릿한 글자 위로 또렷한 부분이 좌우로 오간다 */
.pw-fx-focus { position: relative; -webkit-text-fill-color: transparent; text-shadow: 0 0 2px var(--pw-base); }
.pw-fx-focus::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    -webkit-text-fill-color: var(--pw-base);
    text-shadow: none;
    pointer-events: none;
    clip-path: inset(0 55% 0 0);
    animation: pwfx-focus 3s ease-in-out infinite alternate;
}
@keyframes pwfx-focus { to { clip-path: inset(0 0 0 45%); } }

/* 입체: 오른쪽 아래로 계단처럼 두께가 생긴다 */
.pw-fx-extrude {
    --pw-ex1: color-mix(in srgb, var(--pw-base) 60%, #000);
    --pw-ex2: color-mix(in srgb, var(--pw-base) 35%, #000);
    text-shadow: 1px 1px 0 var(--pw-ex1), 2px 2px 0 var(--pw-ex1), 3px 3px 0 var(--pw-ex2), 4px 4px 2px rgba(0, 0, 0, .2);
}

/* 줄무늬 그림자: 빗금 무늬 그림자가 뒤에서 흘러간다 */
.pw-fx-pattern { position: relative; isolation: isolate; }
.pw-fx-pattern::after {
    content: attr(data-text);
    position: absolute;
    z-index: -1;
    left: .12em;
    top: .12em;
    white-space: nowrap;
    background: repeating-linear-gradient(135deg, var(--pw-base) 0 1px, transparent 1px 3px) 0 0 / 40px 40px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
    animation: pwfx-pattern 4s linear infinite;
}
@keyframes pwfx-pattern { to { background-position: 40px 40px; } }

/* 잔상: 글자 뒤로 겹겹이 그림자가 펼쳐졌다 접힌다 */
.pw-fx-layers {
    --pw-ly: color-mix(in srgb, var(--pw-base) 35%, transparent);
    animation: pwfx-layers 1.2s cubic-bezier(.4, 0, .2, 1) infinite alternate;
}
@keyframes pwfx-layers {
    from { transform: none; text-shadow: none; }
    to { transform: translate(-1px, -1px); text-shadow: 1px 1px 0 var(--pw-ly), 2px 2px 0 var(--pw-ly), 3px 3px 0 var(--pw-ly), 4px 4px 0 var(--pw-ly); }
}

/* 크롬: 금속 반사 띠가 위아래로 굴러간다 (반사광과 겹치지 않게 세로로) */
.pw-fx-chrome {
    background: linear-gradient(180deg, #a3acb6 0%, #4b535c 19%, #eef2f5 26%, #5d656e 34%, #9aa3ad 42%, #3a4047 50%, #a3acb6 58%, #4b535c 69%, #eef2f5 76%, #5d656e 84%, #3a4047 100%) 0 0 / 100% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35));
    animation: pwfx-chrome 3.5s ease-in-out infinite alternate;
}
@keyframes pwfx-chrome { to { background-position: 0 100%; } }

/* 오로라: 파스텔 커튼이 위아래로 일렁인다. 밝은 배경에 묻히지 않게 얇은 회청색 그림자를 두른다 */
.pw-fx-aurora {
    background:
        linear-gradient(170deg, transparent 20%, rgba(214, 196, 255, .95) 45%, transparent 70%) 0 0 / 100% 300%,
        linear-gradient(10deg, #9ee8d0 0%, #b5f0c8 30%, #a9d8f5 60%, #c9bdf7 100%) 0 0 / 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 .5px rgba(70, 90, 120, .9)) drop-shadow(0 0 2px rgba(150, 220, 210, .5));
    animation: pwfx-aurora 6s ease-in-out infinite alternate, pwfx-aurora-glow 3s ease-in-out infinite alternate;
}
@keyframes pwfx-aurora {
    0% { background-position: 0 0, 0 0; }
    50% { background-position: 0 60%, 100% 40%; }
    100% { background-position: 0 100%, 30% 100%; }
}
@keyframes pwfx-aurora-glow {
    from { filter: drop-shadow(0 0 .5px rgba(70, 90, 120, .9)) drop-shadow(0 0 1px rgba(150, 220, 210, .4)); }
    to { filter: drop-shadow(0 0 .5px rgba(70, 90, 120, .9)) drop-shadow(0 -1px 4px rgba(200, 180, 255, .7)); }
}

/* 외곽선: 찌글찌글 꿈틀대는 테두리 (필터는 script.js ensureWobble) */
.pw-fx-outline {
    -webkit-text-stroke: .5px var(--pw-base);
    -webkit-text-fill-color: transparent;
    filter: url(#pw-wobble-0);
    animation: pwfx-wobble .36s steps(1) infinite;
}
@keyframes pwfx-wobble {
    0% { filter: url(#pw-wobble-0); }
    33% { filter: url(#pw-wobble-1); }
    66% { filter: url(#pw-wobble-2); }
}

/* 녹아내림: 글자가 축 처지고 두 글자에 하나꼴로 방울이 떨어진다. 방울 위치가 어긋나지 않게 글자 단위로 */
.pw-fx-melt .pw-ch {
    position: relative;
    transform-origin: 50% 0;
    animation: pwfx-melt 3s ease-in-out infinite;
    animation-delay: calc(var(--i) * -.37s);
}
.pw-fx-melt .pw-ch:nth-child(odd)::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 82%;
    width: .15em;
    height: .15em;
    margin-left: -.075em;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    background: var(--pw-base);
    transform-origin: 50% 0;
    opacity: 0;
    pointer-events: none;
    animation: pwfx-drop 3.4s ease-in infinite;
    animation-delay: calc(var(--i) * -.61s);
}
@keyframes pwfx-melt { 0%, 100% { transform: none; } 50% { transform: scaleY(1.1) translateY(.02em); } }
@keyframes pwfx-drop {
    0% { opacity: 0; transform: translateY(0) scaleY(.3); }
    15% { opacity: 1; transform: translateY(0) scaleY(1); }
    45% { opacity: 1; transform: translateY(.03em) scaleY(2.2); }
    62% { opacity: 1; transform: translateY(.45em) scaleY(1); }
    80%, 100% { opacity: 0; transform: translateY(.8em) scaleY(.8); }
}

/* 빙글: 마우스를 올리면 앞으로 한 바퀴 구른다 */
a:hover .pw-fx-flip,
.pw-fx-flip:hover { animation: pwfx-flip .8s cubic-bezier(.2, .8, .2, 1); }
@keyframes pwfx-flip { from { transform: perspective(300px) rotateX(0); } to { transform: perspective(300px) rotateX(360deg); } }

/* 조각 효과: script.js 가 닉네임 안에 .pw-pt 를 띄운다 */
.pw-fx-bubbles, .pw-fx-lovely, .pw-fx-confetti, .pw-fx-stardust { position: relative; }
.pw-pt {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    font-size: var(--s);
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    animation: var(--d) linear var(--dl) infinite;
}
.pw-fx-bubbles .pw-pt {
    box-sizing: border-box;
    border: 1.5px solid #2fa6e0;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .95) 0 14%, rgba(255, 255, 255, 0) 24%), rgba(94, 200, 242, .35);
    box-shadow: 0 0 4px rgba(47, 166, 224, .5);
    animation-name: pwfx-bubble;
}
.pw-fx-lovely .pw-pt { color: #ff5b91; -webkit-text-fill-color: #ff5b91; animation-name: pwfx-rise; }
.pw-fx-confetti .pw-pt { height: calc(var(--s) * .6); border-radius: 1px; background: var(--c); animation-name: pwfx-fall; }
.pw-fx-stardust .pw-pt { color: #ffc233; -webkit-text-fill-color: #ffc233; animation-name: pwfx-twinkle; animation-timing-function: ease-in-out; }
@keyframes pwfx-rise { 0% { opacity: 0; transform: translateY(.3em) scale(.6); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-1.6em) scale(1.1); } }
@keyframes pwfx-bubble { 0% { opacity: 0; transform: translate(0, .3em) scale(.6); } 15% { opacity: 1; } 50% { transform: translate(.25em, -.9em) scale(1); } 85% { opacity: .9; } 100% { opacity: 0; transform: translate(-.15em, -2.2em) scale(1.2); } }
@keyframes pwfx-fall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 15%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(1.8em) rotate(540deg); } }

@media (prefers-reduced-motion: reduce) {
    .pw-fx, .pw-fx *, .pw-fx::before, .pw-fx::after { animation: none !important; }
    .pw-fx-shuffle .pw-reel { transform: translateY(-3.6em); }
}