/* 뜯은 뒤 공개 연출 — public/js/reveal-fx.js (2026-11-09) */
.rfx{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 46%,#1B2133 0%,#07090F 70%);opacity:0;transition:opacity .22s;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rfx.in{opacity:1}
.rfx.out{opacity:0;transition:opacity .25s}
.rfx-st{position:absolute;inset:0;display:grid;place-items:center}
/* 터널 — 가는 빛줄기가 가운데로 빨려 든다 */
.rfx-tun{position:absolute;left:50%;top:46%;width:240vmax;height:240vmax;margin:-120vmax 0 0 -120vmax;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.07) 0 1.2deg,transparent 1.2deg 9deg);
  -webkit-mask:radial-gradient(circle,transparent 0 6%,#000 30%,transparent 62%);mask:radial-gradient(circle,transparent 0 6%,#000 30%,transparent 62%);
  animation:rfxSpin 14s linear infinite;opacity:.6;transition:opacity .4s}
.rfx.color .rfx-tun{background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--c) 45%,transparent) 0 1.4deg,transparent 1.4deg 8deg);opacity:.9;animation-duration:5s}
/* 등급 색 빛살 */
.rfx-rays{position:absolute;left:50%;top:46%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;border-radius:50%;opacity:0;
  background:conic-gradient(from 0deg,transparent 0 8deg,var(--c) 10deg 14deg,transparent 16deg 40deg,var(--c2) 42deg 44deg,transparent 46deg 72deg,var(--c) 74deg 79deg,transparent 81deg 120deg,var(--c2) 122deg 125deg,transparent 127deg 160deg,var(--c) 162deg 168deg,transparent 170deg 210deg,var(--c2) 212deg 215deg,transparent 217deg 250deg,var(--c) 252deg 257deg,transparent 259deg 300deg,var(--c2) 302deg 305deg,transparent 307deg 360deg);
  -webkit-mask:radial-gradient(circle,#000 0 8%,transparent 55%);mask:radial-gradient(circle,#000 0 8%,transparent 55%);
  animation:rfxSpin 9s linear infinite;transition:opacity .45s}
.rfx.color .rfx-rays{opacity:.75}
.rfx.up .rfx-rays{opacity:1;animation-duration:4s}
/* 가운데 종이(귀띔) */
.rfx-core{position:absolute;left:50%;top:46%;width:120px;height:150px;margin:-75px 0 0 -60px;border-radius:12px;background:#F7F4EC;
  box-shadow:0 0 0 2px rgba(255,255,255,.6),0 0 30px 6px rgba(255,255,255,.35);transition:box-shadow .3s,background .3s,transform .3s,opacity .25s}
.rfx-core i{position:absolute;inset:10px;border-radius:7px;border:2px dashed rgba(0,0,0,.12)}
.rfx.charge .rfx-core{animation:rfxCharge var(--ch,.5s) cubic-bezier(.3,0,.9,1) forwards}
.rfx.tint .rfx-core{box-shadow:0 0 0 3px var(--c),0 0 60px 22px var(--c),0 0 120px 40px color-mix(in srgb,var(--c) 50%,transparent)}
.rfx.pop .rfx-core{transform:scale(1.9);opacity:0;transition:transform .32s ease-out,opacity .3s}
/* 섬광·흔들림·암전 */
.rfx-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.rfx.fl .rfx-flash{animation:rfxFlash .35s ease-out}
.rfx.fl2 .rfx-flash{animation:rfxFlash .6s ease-out}
.rfx-dark{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .12s}
.rfx.blackout .rfx-dark{opacity:.94}
.rfx.shk .rfx-st{animation:rfxShake .35s}
.rfx.shk2 .rfx-st{animation:rfxShake2 .6s}
.rfx-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* 단서 */
.rfx-clue{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;pointer-events:none}
.rfx-g{font-size:clamp(3.4rem,15vw,7.5rem);font-weight:900;letter-spacing:-.04em;line-height:1;color:#fff;opacity:0;transform:scale(2.4);
  text-shadow:0 0 18px var(--c),0 0 46px var(--c),0 4px 0 rgba(0,0,0,.4)}
.rfx.c-g .rfx-g{animation:rfxSlam .3s cubic-bezier(.2,1.4,.4,1) forwards}
.rfx-no{font-size:1.15rem;font-weight:700;color:rgba(255,255,255,.75);opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
.rfx-no em{font-style:normal;font-size:1.7rem;font-weight:900;color:#fff;margin-left:.3rem;text-shadow:0 0 14px var(--c)}
.rfx.c-no .rfx-no{opacity:1;transform:none}
/* 상품 — 사진 대부분이 흰 바탕이라 검은 실루엣 대신 흐린 그림자 → 선명하게 */
.rfx-sil{width:min(58vw,250px);aspect-ratio:1;margin-top:.5rem;border-radius:18px;overflow:hidden;background:#fff;opacity:0;transform:translateY(18px) scale(.86);
  box-shadow:0 0 0 3px var(--c),0 0 40px 10px color-mix(in srgb,var(--c) 70%,transparent);transition:opacity .25s,transform .3s cubic-bezier(.2,1.3,.4,1),box-shadow .4s}
.rfx-sil img{width:100%;height:100%;object-fit:contain;filter:blur(14px) brightness(.25) saturate(.4);transform:scale(1.08);transition:filter .4s,transform .4s}
.rfx.c-sil .rfx-sil{opacity:1;transform:none}
.rfx.c-fill .rfx-sil img{filter:none;transform:none}
.rfx.c-fill .rfx-sil{box-shadow:0 0 0 3px var(--c),0 0 70px 22px var(--c)}
.rfx.c-sil .rfx-g{animation:none;opacity:1;transform:scale(.62);transition:transform .35s}
.rfx-skip{position:absolute;right:max(16px,env(safe-area-inset-right));top:calc(env(safe-area-inset-top,0px) + 14px);padding:.4rem .8rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);font-size:.8rem;font-weight:700;cursor:pointer}
@keyframes rfxSpin{to{transform:rotate(360deg)}}
@keyframes rfxCharge{0%{transform:scale(.6) rotate(-4deg);background:#F7F4EC}
  30%{transform:scale(1) rotate(2deg)}
  55%{transform:translate(-2px,1px) rotate(-1.5deg)}60%{transform:translate(3px,-1px) rotate(2deg)}65%{transform:translate(-3px,2px) rotate(-2deg)}
  70%{transform:translate(4px,-2px) rotate(2.5deg)}75%{transform:translate(-5px,1px) rotate(-3deg)}80%{transform:translate(5px,-2px) rotate(3deg)}
  85%{transform:translate(-6px,2px) rotate(-3deg)}90%{transform:translate(6px,-3px) rotate(3.5deg)}95%{transform:translate(-6px,2px) rotate(-3deg)}
  100%{transform:scale(1.08);background:#fff}}
@keyframes rfxFlash{0%{opacity:.95}100%{opacity:0}}
@keyframes rfxShake{0%,100%{transform:none}20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(3px,-2px)}}
@keyframes rfxShake2{0%,100%{transform:none}10%{transform:translate(-16px,8px) rotate(-.6deg)}25%{transform:translate(14px,-10px) rotate(.6deg)}40%{transform:translate(-11px,7px)}55%{transform:translate(9px,-6px)}70%{transform:translate(-6px,4px)}85%{transform:translate(3px,-2px)}}
@keyframes rfxSlam{0%{opacity:0;transform:scale(2.4)}60%{opacity:1;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
/* 도파민 — 등급 쾅·상품 공개 때 화면 펀치, 상품 위 빛 훑기, 리본 (2026-11-09) */
.rfx.pch .rfx-clue{animation:rfxPunch .28s cubic-bezier(.2,1.6,.4,1)}
.rfx-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.85) 48%,transparent 62%);transform:translateX(-120%);pointer-events:none}
.rfx-sil{position:relative}
.rfx.c-fill .rfx-shine{animation:rfxShine .7s .05s ease-out forwards}
.rfx.c-fill .rfx-sil{animation:rfxPop .4s cubic-bezier(.2,1.6,.4,1)}
.rfx-rb{margin-top:.5rem;padding:.35rem 1.1rem;border-radius:999px;background:var(--c);color:#111;font-weight:900;font-size:1.15rem;letter-spacing:.06em;opacity:0;transform:scale(.4) rotate(-6deg);box-shadow:0 0 30px var(--c)}
.rfx.t-rare .rfx-rb,.rfx.t-epic .rfx-rb{color:#fff}
.rfx.c-rb .rfx-rb{animation:rfxRb .45s cubic-bezier(.2,1.7,.4,1) forwards}
@keyframes rfxPunch{0%{transform:translateY(-50%) scale(1.12)}100%{transform:translateY(-50%) scale(1)}}
@keyframes rfxShine{to{transform:translateX(120%)}}
@keyframes rfxPop{0%{transform:scale(.86)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes rfxRb{0%{opacity:0;transform:scale(.4) rotate(-6deg)}70%{opacity:1;transform:scale(1.15) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(-2deg)}}