/* ===== v9 — angel lyrics ✦ letras animadas, halo que pulsa com a música, estrelas cadentes =====
   Arquivo separado do style.css: se quiser tirar tudo, apague este arquivo e a linha <link> no index.html. */

/* ---------- letras gigantes atrás do Vita ---------- */
.ly-ghost{position:fixed;inset:0;z-index:-1;display:grid;place-items:center;padding:0 5vw 6vh;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease;--beat:0}
.ly-ghost.on{opacity:1}
.ly-ghost b{grid-area:1/1;max-width:15ch;text-align:center;font:italic 700 clamp(70px,12.5vw,225px)/.9 "Cormorant Garamond",serif;
  letter-spacing:-.015em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.8);
  text-shadow:0 0 46px rgba(255,255,255,.3),0 0 6px rgba(255,255,255,.18);
  opacity:calc(.5 + var(--beat) * .4);scale:calc(1 + var(--beat) * .035);
  animation:lyGhostIn 1.3s cubic-bezier(.2,.75,.2,1) both}
.ly-ghost b.out{animation:lyGhostOut .9s ease-in forwards}
@keyframes lyGhostIn{from{opacity:0;filter:blur(22px);transform:translateY(3vh) scale(1.14);letter-spacing:.07em}to{filter:blur(0);transform:none}}
@keyframes lyGhostOut{to{opacity:0;filter:blur(16px);transform:translateY(-3vh) scale(.94)}}
.ly-ghost.paused b{animation-play-state:paused;opacity:.28}

/* ---------- janela lyrics.exe (vidro + cromo) ---------- */
.lyw{position:fixed;left:18px;bottom:62px;z-index:12;width:min(310px,26vw);min-width:272px;border-radius:20px;overflow:hidden;
  color:#1b1b1d;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  background:radial-gradient(circle at var(--mx,28%) var(--my,0%),rgba(255,255,255,.95),transparent 52%),
    linear-gradient(145deg,rgba(255,255,255,.7),rgba(255,255,255,.26));
  border:1px solid #fff;--beat:0;
  box-shadow:0 14px 38px rgba(0,0,0,.4),0 0 calc(26px + var(--beat) * 46px) rgba(255,255,255,calc(.5 + var(--beat) * .4)),inset 0 1px 0 #fff,inset 0 0 22px rgba(255,255,255,.5);
  opacity:0;transform:translateY(24px) scale(.96);pointer-events:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.lyw.show{opacity:1;transform:none;pointer-events:auto}
.lyw.show.first{animation:lywBoot .9s steps(1,end) both,lywIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes lywIn{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:none}}
@keyframes lywBoot{0%{clip-path:inset(46% 0 46% 0)}22%{clip-path:inset(30% 0 30% 0)}40%{clip-path:inset(8% 0 8% 0)}60%{clip-path:inset(0 0 0 0)}100%{clip-path:none}}
.lyw.moved{right:auto;bottom:auto;transform:none}
.lyw.dragging{transition:none;cursor:grabbing}
.lyw.min .lyw-body,.lyw.min .lyw-foot{display:none}

.lyw-bar{display:flex;align-items:center;gap:8px;padding:7px 9px 7px 12px;cursor:grab;user-select:none;touch-action:none;
  font:500 10px "DM Mono",monospace;letter-spacing:.14em;color:#3a3a3e;
  background:linear-gradient(180deg,#fff 0,#e6e7ea 46%,#cfd0d4 54%,#f2f2f4 100%);border-bottom:1px solid rgba(120,120,128,.35)}
.lyw.dragging .lyw-bar{cursor:grabbing}
.lyw-dots{display:flex;gap:5px}
.lyw-dots i{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c9cace 70%);box-shadow:0 0 0 1px rgba(110,110,118,.45),0 0 6px #fff}
.lyw-bar b{flex:1;font-weight:500;text-shadow:0 0 8px #fff}
.lyw-b{width:20px;height:20px;padding:0;border-radius:50%;border:1px solid rgba(110,110,118,.5);cursor:pointer;
  font:500 12px/1 "DM Mono",monospace;color:#3a3a3e;background:radial-gradient(circle at 35% 28%,#fff,#dcdde0 70%,#c4c5c9);box-shadow:0 0 8px rgba(255,255,255,.9);transition:transform .2s,box-shadow .2s}
.lyw-b:hover{transform:scale(1.15);box-shadow:0 0 14px #fff}
.lyw-b:focus-visible,.lyw-tab:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wish:focus-visible{outline:none}.wish:focus-visible .wish-head{outline:2px solid #fff;outline-offset:6px;border-radius:50%}

.lyw-body{position:relative;padding:14px 16px 8px;min-height:148px;display:flex;flex-direction:column;justify-content:center;gap:8px;text-align:left}
.ly-row{font-family:"Cormorant Garamond",serif;font-style:italic;min-height:1.1em;overflow-wrap:anywhere}
.ly-prev,.ly-next{font-size:14px;font-weight:600;line-height:1.15;color:rgba(30,30,34,.42);cursor:pointer;transition:color .25s,transform .25s}
.ly-prev:hover,.ly-next:hover{color:rgba(30,30,34,.8);transform:translateX(3px)}
.ly-prev.fresh{animation:lyUp .55s cubic-bezier(.2,.8,.2,1) both}
.ly-next.fresh{animation:lyFade .8s ease both}
.ly-cur{font-size:clamp(25px,2.1vw,32px);font-weight:700;line-height:1.02;letter-spacing:-.01em}
.ly-cur .w{display:inline-block;margin-right:.26em;opacity:.26;filter:blur(2.4px);transform:translateY(6px);
  transition:opacity .45s ease,filter .45s ease,transform .5s cubic-bezier(.2,.9,.3,1.3),text-shadow .6s}
.ly-cur .w.on{opacity:1;filter:none;transform:none;text-shadow:0 0 14px #fff,0 0 26px rgba(255,255,255,.9)}
.ly-cur .w.pop:after{content:"✦";position:absolute;margin:-.5em 0 0 -.35em;font-size:.45em;font-style:normal;color:#fff;text-shadow:0 0 8px #fff,0 0 14px #bbb;animation:lySpark .9s ease-out forwards}
.ly-cur .w{position:relative}
.ly-cur.fresh{animation:lyFade .45s ease both}
@keyframes lyUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes lyFade{from{opacity:0}to{opacity:1}}
@keyframes lySpark{0%{opacity:0;transform:scale(.2) rotate(0)}30%{opacity:1;transform:scale(1.2) rotate(40deg)}100%{opacity:0;transform:translateY(-.5em) scale(.4) rotate(110deg)}}

.lyw-foot{display:flex;align-items:center;gap:10px;padding:2px 14px 12px;font:500 9px "DM Mono",monospace;letter-spacing:.1em;color:#3a3a3e}
.lyw-prog{position:relative;flex:1;height:5px;border-radius:9px;background:rgba(80,80,88,.22);box-shadow:0 0 0 1px rgba(255,255,255,.8),0 0 10px rgba(255,255,255,.9)}
.lyw-prog b{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);border-radius:inherit;background:linear-gradient(90deg,#fff,#d8d8db,#a8a8ae)}
.lyw-prog img{position:absolute;top:50%;left:calc(var(--p,0) * 100%);width:20px;height:20px;margin:-10px 0 0 -10px;pointer-events:none;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 9px #fff)}
.lyw.paused .ly-cur .w.on{text-shadow:0 0 6px #fff}

/* botão pequeno pra reabrir (aparece quando a janela está fechada) */
.lyw-tab{position:fixed;left:18px;bottom:62px;z-index:12;display:none;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;cursor:pointer;
  font:500 10px "DM Mono",monospace;letter-spacing:.14em;color:#2b2b2e;border:1px solid #fff;
  background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.3));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 20px rgba(255,255,255,.7),inset 0 0 12px rgba(255,255,255,.7);transition:transform .25s,box-shadow .25s}
.lyw-tab:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.35),0 0 30px #fff,inset 0 0 12px #fff}
.lyw-tab.show{display:inline-flex;animation:lyFade .5s ease both}

/* telas médias: janela vira uma legenda centralizada em cima do player */
@media(max-width:1099px){
  .lyw{left:0;right:0;margin:0 auto;bottom:130px;width:min(400px,92vw)}
  .lyw.moved{right:auto;margin:0}
  .ly-prev,.ly-next{display:none}
  .lyw-body{min-height:0;padding:12px 16px 4px}
  .lyw-tab{left:50%;bottom:130px;margin-left:-48px}
}
@media(max-width:760px){.lyw,.lyw-tab,.ly-ghost{display:none!important}}

/* ---------- letra ao vivo dentro da tela do Vita (aba MUSIC) ---------- */
.ly-mini{margin:10px 0 2px;min-height:2.3em;text-align:center;font:italic 700 clamp(18px,2.4vw,24px)/1.05 "Cormorant Garamond",serif;color:#2a2a2e;text-shadow:0 0 12px #fff}
.ly-mini span{display:inline-block;margin-right:.24em;animation:lyMiniIn .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes lyMiniIn{from{opacity:0;filter:blur(6px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}
#vscreen .ly-mini{font-size:20px}

/* ---------- halo e luz de fundo respiram com a batida ---------- */
.halo{--beat:0;filter:brightness(calc(1 + var(--beat) * .55)) drop-shadow(0 0 calc(var(--beat) * 26px) rgba(255,255,255,.9));scale:calc(1 + var(--beat) * .05)}

/* ---------- estrela cadente: clique pra fazer um pedido ---------- */
.wish{position:fixed;left:0;top:0;z-index:30;width:0;height:0;padding:0;border:0;background:none;cursor:pointer;
  transform:translate(var(--x0),var(--y0)) rotate(var(--ang));animation:wishFly var(--dur) cubic-bezier(.35,.1,.6,1) forwards}
.wish:before{content:"";position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%} /* área de clique maior que a estrela */
.wish-tail{position:absolute;right:0;top:-1.5px;width:min(26vw,300px);height:3px;border-radius:3px;pointer-events:none;
  background:linear-gradient(270deg,#fff,rgba(255,255,255,.65) 18%,rgba(255,255,255,0));filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(255,255,255,.8))}
.wish-head{position:absolute;left:-16px;top:-18px;width:34px;height:34px;display:grid;place-items:center;font:400 30px/1 Inter,sans-serif;color:#fff;font-style:normal;pointer-events:none;
  text-shadow:0 0 8px #fff,0 0 18px #fff,0 0 34px rgba(255,255,255,.9);animation:wishSpin 1.1s linear infinite}
@keyframes wishFly{0%{opacity:0;transform:translate(var(--x0),var(--y0)) rotate(var(--ang)) translateX(0)}8%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(var(--x0),var(--y0)) rotate(var(--ang)) translateX(var(--len))}}
@keyframes wishSpin{to{transform:rotate(360deg)}}
.wish.caught{animation-play-state:paused;pointer-events:none}
.wish.caught .wish-tail{opacity:0;transition:opacity .3s}
.wish.caught .wish-head{animation:wishPop .5s ease-out forwards}
@keyframes wishPop{to{transform:scale(3);opacity:0}}
.wish-spk{position:fixed;z-index:31;pointer-events:none;font:400 16px/1 Inter,sans-serif;color:#fff;margin:-8px 0 0 -8px;text-shadow:0 0 8px #fff,0 0 16px #fff;
  animation:wishSpk .95s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes wishSpk{from{opacity:1;transform:translate(0,0) scale(.4) rotate(0)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.3) rotate(var(--r))}}
.wish-msg{position:fixed;z-index:32;pointer-events:none;transform:translateX(-50%);padding:9px 18px;border-radius:999px;border:1px solid #fff;white-space:nowrap;
  font:italic 700 20px "Cormorant Garamond",serif;color:#222;background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.4));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 28px #fff,0 8px 22px rgba(0,0,0,.35);animation:wishMsg 2.2s ease-out forwards}
@keyframes wishMsg{0%{opacity:0;margin-top:10px}15%{opacity:1;margin-top:0}75%{opacity:1}100%{opacity:0;margin-top:-34px}}

@media(prefers-reduced-motion:reduce){
  .wish,.wish-spk{display:none}
  .ly-ghost b,.ly-cur .w,.lyw.show.first{animation:none!important}
}

/* o adesivo ANGELCORE saía de baixo da janela de letras: vai pro canto de baixo à direita */
.s1{left:auto;right:12vw;bottom:9vh}
.s2{margin-top:30px}
   .ly-ghost{display:none!important}