/* fx.js: painted streak flame, answer pops and the Unlocked! reveal */

/* ---- flame ---- */
.bfl{position:absolute;inset:0;display:block;pointer-events:none}
.bfl img{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;transform-origin:50% 100%}
.bfl-g{filter:blur(6px) saturate(1.4);opacity:.75;transform:scale(1.25,1.18);animation:bflG 1.1s ease-in-out infinite alternate}
.bfl-m{filter:drop-shadow(0 0 6px rgba(255,140,0,.55));animation:bflM .9s ease-in-out infinite}
.bfl-i{mix-blend-mode:screen;filter:brightness(1.6) saturate(.8);opacity:.85;transform:scale(.55);animation:bflI .5s ease-in-out infinite alternate}
.bfl.k3 .bfl-m{filter:drop-shadow(0 0 8px rgba(80,180,255,.7))}
.bfl.k2 .bfl-m{filter:drop-shadow(0 0 8px rgba(255,80,0,.7))}
@keyframes bflG{from{transform:scale(1.18,1.1);opacity:.6}to{transform:scale(1.3,1.26);opacity:.9}}
@keyframes bflM{0%{transform:scale(1,1) skewX(0)}25%{transform:scale(1.03,.96) skewX(-2.5deg)}50%{transform:scale(.98,1.05) skewX(1deg)}75%{transform:scale(1.02,.98) skewX(2.5deg)}100%{transform:scale(1,1) skewX(0)}}
@keyframes bflI{from{transform:scale(.52,.5) skewX(2deg)}to{transform:scale(.58,.62) skewX(-2deg)}}
.bfl-s{position:absolute;left:50%;bottom:30%;width:7%;height:7%;min-width:3px;min-height:3px;border-radius:50%;background:#FFE27A;box-shadow:0 0 6px 2px #FF8A00;opacity:0;animation:bflS 1.3s ease-out infinite}
.bfl.k3 .bfl-s{background:#DFFBFF;box-shadow:0 0 6px 2px #3FC3FF}
.bfl-s:nth-of-type(1){left:34%;animation-delay:0s}.bfl-s:nth-of-type(2){left:62%;animation-delay:.35s}.bfl-s:nth-of-type(3){left:46%;animation-delay:.7s}.bfl-s:nth-of-type(4){left:56%;animation-delay:1s}
@keyframes bflS{0%{transform:translate(0,0) scale(1);opacity:0}15%{opacity:1}100%{transform:translate(var(--sx,6px),-260%) scale(.3);opacity:0}}
.bfl-s:nth-of-type(odd){--sx:-8px}
/* the big hot-streak flame sits a little lower and bigger than the old drawing */
.fire .bfl{inset:4% 10% 0}
html.rm .bfl *,html.still .bfl *{animation:none!important}

/* ---- answer pops ---- */
.ans{position:relative}
.bpx{position:absolute;right:8px;top:50%;width:46px;height:46px;margin-top:-23px;z-index:3;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));animation:bpxIn .5s cubic-bezier(.2,1.7,.4,1) both}
.bpx.soft{width:38px;height:38px;margin-top:-19px;right:10px;animation-delay:.25s;opacity:.95}
@keyframes bpxIn{0%{transform:scale(0) rotate(-40deg);opacity:0}100%{transform:none;opacity:1}}
.bpx.no{animation:bpxNo .55s cubic-bezier(.2,1.7,.4,1) both}
@keyframes bpxNo{0%{transform:scale(0) rotate(40deg);opacity:0}60%{transform:scale(1.15) rotate(-6deg);opacity:1}100%{transform:none}}
.ans.bp-shine{overflow:hidden}
.ans.bp-shine::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:bpShine .6s ease-out both;pointer-events:none}
.ans.bp-shine .bpx{right:6px}
@keyframes bpShine{to{left:120%}}
.bpring{position:fixed;width:150px;height:150px;margin:-75px 0 0 -75px;z-index:80;pointer-events:none;animation:bpRing .65s ease-out both}
@keyframes bpRing{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.5);opacity:0}}
html.rm .bpx,html.rm .bpring,html.rm .ans.bp-shine::after{animation:none!important}

/* ---- Unlocked! ---- */
.unl{position:fixed;inset:0;z-index:210;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,rgba(40,70,160,.55),rgba(4,8,22,.88) 70%);animation:unlFade .25s ease both;cursor:pointer;padding:20px}
.unl.out{animation:unlFade .25s ease reverse both}
@keyframes unlFade{from{opacity:0}to{opacity:1}}
.unl-in{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff}
.unl-stage{position:relative;width:260px;height:260px;display:grid;place-items:center}
.unl-burst{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);animation:unlSpin 9s linear infinite,unlBurst .6s cubic-bezier(.2,1.5,.4,1) both;opacity:.95}
.unl-burst.b2{animation:unlSpin 14s linear infinite reverse,unlBurst .6s .1s cubic-bezier(.2,1.5,.4,1) both;opacity:.5;transform:rotate(15deg)}
@keyframes unlSpin{to{rotate:1turn}}
@keyframes unlBurst{from{scale:0}to{scale:1}}
.unl-art{position:relative;z-index:2;display:grid;place-items:center;animation:unlArt .7s .15s cubic-bezier(.2,1.6,.4,1) both}
@keyframes unlArt{0%{transform:scale(0) rotate(-25deg)}100%{transform:none}}
.unl-art .lki-tt{font-size:30px;background:linear-gradient(#FFE066,#F0A000);color:#2B1D00;border-radius:99px;padding:10px 20px;box-shadow:0 6px 0 #A86A00,0 12px 24px rgba(0,0,0,.4)}
.unl-tick{position:absolute;right:28px;bottom:30px;z-index:3;width:72px;height:72px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));animation:bpxIn .55s .55s cubic-bezier(.2,1.7,.4,1) both}
.unl-word{margin-top:6px;font:800 54px/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#FFD964;text-shadow:0 4px 0 #A86A00,0 0 24px rgba(255,200,60,.6)}
.unl-word span{display:inline-block;animation:unlL .5s calc(.35s + var(--i) * .04s) cubic-bezier(.2,1.7,.4,1) both}
@keyframes unlL{from{transform:translateY(30px) scale(.4);opacity:0}to{transform:none;opacity:1}}
.unl-name{margin-top:8px;font:800 24px/1.1 "Barlow Condensed",sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#7CF0B4;animation:unlL .5s .7s both}
.unl-sub{margin-top:4px;font:600 15px/1.3 Barlow,system-ui,sans-serif;color:#C9D8F7;animation:unlL .5s .8s both}
.unl-tap{margin-top:18px;font:700 13px Barlow,system-ui,sans-serif;color:rgba(255,255,255,.55);animation:unlFade .4s 1.4s both}
html.rm .unl *{animation:none!important}

/* celebrations on the Unlocked burst */
.unl.cel .unl-tick{display:none}
.cel-art{width:180px;height:180px;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5));animation:celBob 1.6s .8s ease-in-out infinite alternate}
@keyframes celBob{to{transform:translateY(-8px) rotate(-3deg)}}
.cel-art.silver{filter:grayscale(1) brightness(1.25) drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.cel-art.bronze{filter:sepia(.6) hue-rotate(-25deg) saturate(1.3) brightness(.85) drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.cel-art.master{filter:hue-rotate(220deg) saturate(1.2) drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.unl-word{white-space:nowrap}
.unl.cel .unl-name{color:#fff;-webkit-text-stroke:4px #0A1A3A}