/* phoenix.css — styles for Princess Phoenix Sparkles.
   Pair with js/phoenix.js and a <div id="phoenix"></div>. */

.stage{position:relative;z-index:1;display:flex;justify-content:center;margin-top:0}
.pcat{width:min(96vw,470px);height:auto;display:block;overflow:visible;
    filter:drop-shadow(0 18px 22px rgba(120,80,160,.26))}
.p-body{transform-box:view-box;transform-origin:250px 830px;animation:sway 5s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
.p-head{transform-box:view-box;transform-origin:250px 560px;animation:bob 3.3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2.4deg)}50%{transform:translateY(-11px) rotate(2.4deg)}}
.p-tail{transform-box:view-box;transform-origin:352px 740px;animation:swish 2.7s ease-in-out infinite}
@keyframes swish{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(16deg)}}
.p-wand{transform-box:view-box;transform-origin:152px 712px;animation:wave 3s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(12deg)}}
.p-star{transform-box:view-box;transform-origin:120px 604px;animation:spin 7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.p-rib1{transform-box:view-box;transform-origin:124px 626px;animation:rib 2.6s ease-in-out infinite}
.p-rib2{transform-box:view-box;transform-origin:124px 626px;animation:rib 3.1s ease-in-out .4s infinite}
@keyframes rib{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
.p-earL{transform-box:view-box;transform-origin:126px 296px;animation:earL 3.9s ease-in-out infinite}
.p-earR{transform-box:view-box;transform-origin:374px 296px;animation:earR 4.3s ease-in-out infinite}
@keyframes earL{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes earR{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg)}}
.p-lockL{transform-box:view-box;transform-origin:150px 330px;animation:lockL 5.4s ease-in-out infinite}
.p-lockR{transform-box:view-box;transform-origin:350px 330px;animation:lockR 5.9s ease-in-out infinite}
@keyframes lockL{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(3.4deg)}}
@keyframes lockR{0%,100%{transform:rotate(2.4deg)}50%{transform:rotate(-3.4deg)}}
.p-bowL{transform-box:view-box;transform-origin:128px 470px;animation:bowL 3.6s ease-in-out infinite}
.p-bowR{transform-box:view-box;transform-origin:372px 470px;animation:bowR 4.1s ease-in-out infinite}
@keyframes bowL{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(7deg) scale(1.05)}}
@keyframes bowR{0%,100%{transform:rotate(6deg) scale(1)}50%{transform:rotate(-7deg) scale(1.05)}}
.p-crown{transform-box:view-box;transform-origin:250px 280px;animation:crown 4.6s ease-in-out infinite}
@keyframes crown{0%,100%{transform:translateY(-30px) rotate(-7deg)}50%{transform:translateY(-30px) rotate(-3deg)}}
.fl{animation:floatUp linear infinite;transform-box:view-box}
@keyframes floatUp{
    0%{opacity:0;transform:translateY(20px) scale(.5) rotate(0)}
    18%{opacity:1}70%{opacity:.9}
    100%{opacity:0;transform:translateY(-84px) scale(1.15) rotate(180deg)}}
.pcat.talking .p-head{animation:bobfast .36s ease-in-out infinite}
@keyframes bobfast{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
.say{position:relative;z-index:2;margin:2px auto 0;max-width:min(92vw,560px);
    background:#fff;border:5px solid #33234a;border-radius:26px;padding:20px 22px 22px;
    box-shadow:0 12px 0 rgba(51,35,74,.12);text-align:center;font-size:20px;font-weight:700}
.say b{color:#e0398f}
.say i{font-style:normal;color:#7a3ddb}
.say:after{content:"";position:absolute;left:50%;top:-22px;margin-left:-16px;
    border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:22px solid #33234a}
.say:before{content:"";position:absolute;left:50%;top:-13px;margin-left:-10px;z-index:1;
    border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:14px solid #fff}
.picks{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
    max-width:min(94vw,620px);margin:18px auto 0;padding:0 8px}
.pick{flex:1 1 44%;min-height:74px;border:5px solid #33234a;border-radius:22px;
    font:800 19px "Trebuchet MS",Verdana,sans-serif;color:#33234a;cursor:pointer;padding:12px 10px;
    box-shadow:0 6px 0 rgba(51,35,74,.22);transition:transform .12s,box-shadow .12s}
.pick:active{transform:translateY(5px);box-shadow:0 1px 0 rgba(51,35,74,.22)}
.p1{background:#ffd0e8}
.p2{background:#d3ecff}
.p3{background:#d8ffd9}
.p4{background:#fff0c2}
.p5{background:#e9d8ff}
.p6{background:#ffe0cc}
.askrow{position:relative;z-index:1;display:flex;gap:10px;max-width:min(94vw,620px);
    margin:16px auto 30px;padding:0 8px}
.askrow input{flex:1;min-width:0;border:5px solid #33234a;border-radius:20px;padding:14px 16px;
    font:700 18px "Trebuchet MS",Verdana,sans-serif;color:#33234a;background:#fff}
.askrow input:focus{outline:4px solid #a45cff;outline-offset:2px}
.askrow button{border:5px solid #33234a;border-radius:20px;background:#ffd84d;
    font:800 18px "Trebuchet MS",Verdana,sans-serif;padding:0 20px;cursor:pointer;color:#33234a}
.gate{position:fixed;inset:0;z-index:9;background:rgba(255,228,244,.97);
    display:grid;place-items:center;text-align:center;padding:24px}
.gate.off{display:none}
.gate button{border:6px solid #33234a;border-radius:30px;background:#ffd84d;cursor:pointer;
    font:800 26px "Trebuchet MS",Verdana,sans-serif;color:#33234a;padding:22px 34px;
    box-shadow:0 8px 0 rgba(51,35,74,.25)}
.gate p{max-width:340px;margin:16px auto 0;font-weight:700;color:#5a3d86}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}


/* ══ arrival, corner mode, and the unicorn goodbye ══════════════════════ */
#phoenix{position:relative;display:block}
#phoenix .stage{position:relative;display:flex;justify-content:center}

/* the slide she comes in on */
.slide{position:absolute;left:4%;top:2%;width:46%;max-width:300px;opacity:0;pointer-events:none;z-index:0}
.slide svg{width:100%;height:auto;display:block}
#phoenix.arriving .slide{animation:slideIn 2.6s ease-out both}
@keyframes slideIn{0%{opacity:0}18%{opacity:.85}72%{opacity:.85}100%{opacity:0}}
#phoenix.arriving .pcat{animation:comeDown 2.6s cubic-bezier(.3,.5,.3,1) both}
@keyframes comeDown{
  0%{opacity:0;transform:translate(-52%,-58%) scale(.16) rotate(-16deg)}
  14%{opacity:1}
  52%{transform:translate(-12%,-8%) scale(.34) rotate(6deg)}
  74%{transform:translate(0,4%) scale(.9) rotate(-3deg)}
  88%{transform:translate(0,-1%) scale(1.06) rotate(1deg)}
  100%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}}

/* the wand-wave that shrinks her */
.pcat.casting .p-wand{animation:castWand .62s ease-in-out 2!important}
@keyframes castWand{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(-64deg)}}

/* puff of smoke */
.poof{position:absolute;left:50%;top:44%;width:0;height:0;z-index:5;pointer-events:none}
.poof b{position:absolute;left:0;top:0;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 20px rgba(255,255,255,.9);animation:puffOut 1.2s ease-out both}
.poof.go b{animation-play-state:running}
@keyframes puffOut{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  22%{opacity:.95}100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1.5)}}

/* ── corner helper mode ─────────────────────────────────────────────── */
#phoenix.mini{position:fixed;right:14px;bottom:14px;left:auto;width:auto;z-index:2147482000;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:min(92vw,360px)}
#phoenix.mini .stage{width:118px}
#phoenix.mini .pcat{width:118px;transition:width .5s ease}
#phoenix.mini .say{order:-1;font-size:16px;padding:14px 16px;margin:0;max-width:min(88vw,320px);
  box-shadow:0 8px 0 rgba(51,35,74,.14)}
#phoenix.mini .say:after,#phoenix.mini .say:before{display:none}
#phoenix.mini .picks{margin:0;max-width:min(88vw,320px);gap:7px}
#phoenix.mini .pick{flex:1 1 46%;min-height:52px;font-size:14px;padding:8px 6px;border-width:4px}
#phoenix.mini .askrow{margin:0;max-width:min(88vw,320px);padding:0}
#phoenix.mini .askrow input{padding:11px 13px;font-size:16px;border-width:4px}
#phoenix.mini .askrow button{padding:0 15px;font-size:16px;border-width:4px}
#phoenix.mini .slide{display:none}

.closeme{display:none;position:absolute;top:-10px;right:-8px;z-index:8;width:34px;height:34px;
  border-radius:50%;background:#fff;border:4px solid #33234a;color:#33234a;cursor:pointer;
  font:800 17px/1 Inter,system-ui,sans-serif;box-shadow:0 5px 12px rgba(51,35,74,.3)}
#phoenix.mini .closeme{display:grid;place-items:center}
.closeme:hover{background:#ffd0e8}

/* ── the unicorn goodbye ────────────────────────────────────────────── */
.uni{position:absolute;left:50%;bottom:-18%;width:150px;margin-left:-75px;opacity:0;
  pointer-events:none;z-index:-1}
.uni svg{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 14px rgba(120,80,160,.3))}
#phoenix.riding .uni{animation:uniRide 3.4s cubic-bezier(.35,.05,.4,1) both}
@keyframes uniRide{
  0%{opacity:0;transform:translate(-150%,40px) scale(.7)}
  16%{opacity:1;transform:translate(-10%,10px) scale(.95)}
  34%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(220%,-420px) scale(.5)}}
#phoenix.riding .pcat{animation:uniUp 3.4s cubic-bezier(.35,.05,.4,1) both}
@keyframes uniUp{
  0%,30%{transform:translate(0,0) rotate(0)}
  40%{transform:translate(6px,-26px) rotate(-4deg)}
  100%{opacity:0;transform:translate(230px,-440px) rotate(10deg) scale(.5)}}
#phoenix.riding .say,#phoenix.riding .picks,#phoenix.riding .askrow,#phoenix.riding .closeme{
  opacity:0;transition:opacity .4s}
#phoenix.gone{display:none}

/* the little tab that brings her back */
.reopen{display:none;position:fixed;right:12px;bottom:12px;z-index:2147482000;cursor:pointer;
  border:4px solid #33234a;border-radius:999px;background:#ffd84d;color:#33234a;
  font:800 15px "Trebuchet MS",Verdana,sans-serif;padding:12px 18px;
  box-shadow:0 6px 0 rgba(51,35,74,.24);max-width:86vw}
.reopen.on{display:block}
.reopen:hover{background:#ffe9a8}

@media(max-width:640px){
  #phoenix.mini{right:8px;bottom:8px;max-width:94vw}
  #phoenix.mini .stage,#phoenix.mini .pcat{width:96px}
  #phoenix.mini .say{font-size:15px;max-width:80vw}
  .reopen{font-size:13px;padding:10px 14px}
}


/* ══ bigger, wobblier corner princess ══════════════════════════════════ */
#phoenix.mini .stage{width:178px}
#phoenix.mini .pcat{width:178px}
#phoenix.mini .p-head{animation:bobBig 2.6s ease-in-out infinite}
@keyframes bobBig{0%,100%{transform:translateY(0) rotate(-5deg)}
  50%{transform:translateY(-14px) rotate(5deg)}}
#phoenix.mini .say{font-size:17px;max-width:min(90vw,340px)}
@media(max-width:640px){
  #phoenix.mini .stage,#phoenix.mini .pcat{width:132px}
  #phoenix.mini .say{font-size:15.5px;max-width:82vw}
}

/* she flips across the corner now and then */
.pcat.flipping{animation:doFlip 1.3s cubic-bezier(.3,.4,.3,1)}
@keyframes doFlip{
  0%{transform:translate(0,0) rotate(0) scale(1)}
  25%{transform:translate(-40px,-70px) rotate(-180deg) scale(.9)}
  55%{transform:translate(-90px,-40px) rotate(-360deg) scale(.9)}
  80%{transform:translate(-30px,10px) rotate(-540deg) scale(1.05)}
  100%{transform:translate(0,0) rotate(-720deg) scale(1)}}

/* bubbles she blows drift up the whole page */
.floatbub{position:fixed;bottom:-60px;z-index:2147481500;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.9),rgba(160,225,255,.42) 45%,rgba(160,225,255,.18));
  border:2px solid rgba(159,220,245,.7);animation:bubUp linear forwards}
@keyframes bubUp{0%{opacity:0;transform:translateY(0) translateX(0)}
  12%{opacity:1}100%{opacity:0;transform:translateY(-105vh) translateX(40px)}}