/*
 * widget_point/effects.css : 닉네임 효과 모음 (도감 카드 보상)
 *
 * 구조: 닉네임 글자를 감싼 <span class="pw-fx-text pw-fx pw-fx-{키}"> 에 효과를 건다.
 *   - 글자 단위 효과(물결·통통·셔플)는 script.js 가 글자마다 <span class="pw-ch" style="--i:순번"> 로 나눈다.
 *   - --pw-base : 효과를 입히기 전 닉네임 색 (그라데이션 닉네임이면 첫 색)
 * 새 효과를 추가할 때: 여기에 .pw-fx-{키} 를 만들고, 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); } }

/* 셔플 슬롯: 글자마다 슬롯이 굴러가다 진짜 글자에서 멈춘다 (처음 볼 때 + 마우스를 올릴 때)
   script.js 가 글자마다 [가짜 3개 + 진짜 1개] 세로 릴을 만든다. */
.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)); }
}

/* 외곽선: 테두리만 있던 글자가 채워졌다 비워진다 */
.pw-fx-outline {
    -webkit-text-stroke: 1px var(--pw-base);
    -webkit-text-fill-color: transparent;
    animation: pwfx-outline 3s ease-in-out infinite alternate;
}
@keyframes pwfx-outline { to { -webkit-text-fill-color: var(--pw-base); } }

/* 녹아내림: 글자마다 따로 아래로 축 처졌다 돌아오고, 두 글자에 하나꼴로 그 글자 밑 가운데에서 방울이 맺혀 떨어진다.
   한글은 글자마다 획 모양이 달라 이름 전체에 고정 위치로 방울을 달면 어긋나므로 글자 단위로 한다 (script.js FX_SPLIT) */
.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); }
    .pw-fx-outline { -webkit-text-fill-color: var(--pw-base); }
}