/* _espiral/pops.css — as janelas da Y (2026-09-22). Uma pele por classe .skin-<nome>; ver pops.js.
   ⚠️ Sem backdrop-filter em nenhuma: desfocar o disco a rodar por trás custava ~3 ms por frame. */

/* ---- comum a todas ---- */
.card{position:fixed;z-index:12;left:0;top:0;opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.card.on{opacity:1;transform:none;pointer-events:auto}
.card h2 em{font-style:italic}
.pp-link{margin:0}
.pp-go{font:500 .9rem/1 var(--sans);color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--accent) 45%,transparent)}
.pp-go:hover{border-color:var(--accent)}
.pp-btns{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.pp-btn{font:500 .88rem/1 var(--sans);text-decoration:none;border-radius:999px;padding:11px 16px;background:var(--accent);color:var(--paper);border:1px solid var(--accent)}
.pp-btn.ghost{background:none;color:var(--ink);border-color:color-mix(in oklab,var(--ink) 30%,var(--paper))}
.lead{fill:none;stroke:color-mix(in oklab,var(--accent) 65%,transparent);stroke-width:1;stroke-dasharray:3 4}
.lead-dot{fill:var(--accent)}

/* ---- card: o cartão simples ---- */
.skin-card{width:min(540px,46vw);padding:22px 24px 20px;border-radius:14px;
  background:color-mix(in oklab,var(--paper) 94%,transparent);border:1px solid color-mix(in oklab,var(--ink) 16%,var(--paper))}
.skin-card .v3-k{margin-bottom:12px}
.skin-card h2{margin:0 0 10px;font-family:var(--serif);font-weight:400;font-size:1.55rem;line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.skin-card p{margin:0 0 12px;font-size:.95rem;line-height:1.6;color:var(--soft)}
.skin-card p:last-child{margin-bottom:0}

/* ---- capa: a contracapa do LP, cartão creme pousado no canto, torto ---- */
.skin-capa{left:auto;top:auto;right:4.5vw;bottom:5.5vh;width:min(370px,29vw);aspect-ratio:1;padding:20px 22px 18px;
  display:flex;flex-direction:column;background:#E8E3D6;color:#17181D;border-radius:2px;
  box-shadow:0 34px 70px -24px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.25);
  transform:translateY(46px) rotate(5deg);transition:opacity .5s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.skin-capa.on{transform:rotate(-2.5deg)}
/* o corte redondo da capa interior (onde o disco espreita) e uma dobra gasta no canto */
.skin-capa::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 50% 50%,transparent 0 17%,rgba(23,24,29,.07) 17.4% 17.9%,transparent 18.3%),
             linear-gradient(135deg,transparent 0 92%,rgba(23,24,29,.06) 92%)}
.sl-top{display:flex;justify-content:space-between;font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(23,24,29,.58)}
.sl-t{margin:auto 0 8px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2rem,2.8vw,2.7rem);line-height:.95;letter-spacing:-.02em}
.sl-h{margin:0 0 10px;font-family:var(--serif);font-size:1rem;line-height:1.25;text-wrap:balance}
.sl-notes{font-size:.8rem;line-height:1.5;color:rgba(23,24,29,.74)}
.sl-notes p{margin:0 0 8px}
.skin-capa .pp-go{color:#0B6C77;border-color:rgba(11,108,119,.4)}
.skin-capa .pp-btn{background:#17181D;color:#E8E3D6;border-color:#17181D;padding:9px 14px;font-size:.82rem}
.skin-capa .pp-btn.ghost{background:none;color:#17181D;border-color:rgba(23,24,29,.35)}
.sl-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid rgba(23,24,29,.2);
  font:9px/1.45 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(23,24,29,.55)}
.sl-key{font:500 11px/1 var(--mono);letter-spacing:.04em;text-transform:none;color:#0E0F14;background:#04BACE;padding:7px 9px;border-radius:999px}

/* ---- partitura: uma tira de pauta; as palavras-chave são a letra da melodia ---- */
.skin-partitura{width:min(940px,90vw);padding:16px 26px 18px;border-radius:14px;
  background:color-mix(in oklab,var(--paper) 94%,transparent);border:1px solid color-mix(in oklab,var(--ink) 14%,var(--paper))}
.sc-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.sc-head .v3-k{margin:0}
.sc-mark{margin:0;font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--soft)}
.sc-staff{position:relative;aspect-ratio:900/114;margin:2px 0 4px}
.sc-staff svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sc-clef{position:absolute;left:0;top:11%;height:68%;aspect-ratio:1;color:var(--accent)}
.sc-clef svg{width:100%;height:100%;display:block}
.sc-clef .wm-dot{fill:var(--dot)}
.sl line{stroke:color-mix(in oklab,var(--ink) 30%,var(--paper));stroke-width:1;vector-effect:non-scaling-stroke}
/* ⚠️ cores EXPLÍCITAS no que se anima: a interpolar a partir de um color-mix o Chrome passava por amarelo */
.nh{fill:#6f7473}
.ns{stroke:#6f7473;stroke-width:1.4}
.bar{stroke:color-mix(in oklab,var(--ink) 60%,var(--paper));stroke-width:1.2}
.bar.thick{stroke-width:4}
.ly{font-family:var(--serif);font-style:italic;font-size:17px;text-anchor:middle;fill:#6f7473}
/* ao abrir, as notas tocam-se uma a uma: a cabeça acende e a letra por baixo também */
.skin-partitura.on .nh{animation:sc-note .6s ease forwards;animation-delay:calc(.3s + var(--i) * .24s)}
.skin-partitura.on .ns{animation:sc-stem .6s ease forwards;animation-delay:calc(.3s + var(--i) * .24s)}
.skin-partitura.on .ly{animation:sc-ly .6s ease forwards;animation-delay:calc(.3s + var(--i) * .24s)}
@keyframes sc-note{0%{fill:#6f7473}40%{fill:#ffffff}100%{fill:#04BACE}}
@keyframes sc-stem{0%{stroke:#6f7473}100%{stroke:#04BACE}}
@keyframes sc-ly{0%{fill:#6f7473}100%{fill:#E2EAE3}}
.sc-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:28px}
.sc-foot > p:first-child{margin:0;max-width:56ch;font-size:.95rem;line-height:1.55;color:var(--soft)}
.sc-foot .pp-link,.sc-foot .pp-btns{flex:none}

/* ---- cifra: à Cifra Club — título, tom, acordes a laranja por cima do texto ---- */
.skin-cifra{width:min(560px,90vw);padding:18px 24px 20px;border-radius:10px;
  background:color-mix(in oklab,var(--paper) 95%,transparent);border:1px solid color-mix(in oklab,var(--ink) 14%,var(--paper))}
.cf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid color-mix(in oklab,var(--ink) 14%,var(--paper))}
.cf-t{margin:0;font:600 1.4rem/1.1 var(--sans);letter-spacing:-.01em}
.cf-a{margin:5px 0 0;font-size:.88rem;color:var(--soft)}
.cf-tom{font:12px/1 var(--mono);color:var(--soft);border:1px solid color-mix(in oklab,var(--ink) 18%,var(--paper));border-radius:999px;padding:7px 11px;white-space:nowrap}
.cf-tom b{color:var(--dot);font-weight:500}
.cf-body{margin:0 0 14px;font:13px/1.5 var(--mono);white-space:pre;overflow-x:auto;color:color-mix(in oklab,var(--ink) 82%,var(--paper))}
.cf-c{color:var(--dot);font-weight:500}
.cf-s{color:var(--faint)}
.cf-ch{color:var(--ink)}

/* ---- letra: só tipografia, sem caixa; a letra acende palavra a palavra ---- */
.skin-letra{width:min(720px,90vw);text-align:center;padding:8px 0}
.skin-letra::before{content:"";position:absolute;inset:-70px -160px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,#0E0F14 0 55%,rgba(14,15,20,.9) 72%,transparent)}
.skin-letra .v3-k{margin:0 0 12px}
.skin-letra h2{margin:0 0 14px;font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,2.7vw,2.5rem);line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
.lr-p{max-width:30ch;margin:0 auto 18px;font-family:var(--serif);font-size:clamp(1.5rem,2.1vw,1.9rem);line-height:1.3;text-wrap:balance}
.lr-p.sm{max-width:44ch;font-family:var(--sans);font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.65}
.lr-p span{color:var(--faint);transition:color .35s ease}
.skin-letra.on .lr-p span{color:var(--ink);transition-delay:calc(.25s + var(--i) * .07s)}
.skin-letra .pp-btns{justify-content:center}

/* ---- solta: a letra com os acordes a flutuar por cima (a cifra e a letra juntas) ---- */
.skin-solta{width:min(780px,90vw);text-align:center;padding:8px 0}
.skin-solta::before{content:"";position:absolute;inset:-70px -160px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,#0E0F14 0 55%,rgba(14,15,20,.9) 72%,transparent)}
.so-k{display:flex;justify-content:center;gap:16px;margin:0 0 2px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.so-tom{color:var(--soft);letter-spacing:.08em;text-transform:none}
.so-tom b{color:var(--dot);font-weight:500}
.so-p{max-width:31ch;margin:0 auto 10px;font-family:var(--serif);font-size:clamp(1.5rem,2.1vw,1.9rem);line-height:2.3;text-wrap:balance}
.so-w{position:relative;display:inline-block;line-height:1.2;color:#5d6263;transition:color .35s ease}
/* o acorde: pequeno, em mono, pousado por cima do início da palavra, como numa cifra */
.so-c{position:absolute;left:0;bottom:100%;margin-bottom:.12em;font:500 .52em/1 var(--mono);font-style:normal;color:#6a4a36;transition:color .35s ease}
.skin-solta.on .so-w{color:#E2EAE3;transition-delay:calc(.25s + var(--i) * .08s)}
.skin-solta.on .so-c{color:#E8813C;transition-delay:calc(.25s + var(--i) * .08s)}
.so-ch{margin:0 0 16px;font:13px/1.5 var(--mono);color:var(--soft)}
.so-s{color:var(--faint)}
.skin-solta .pp-btns{justify-content:center}

/* ---- karaoke: o ecrã do bar — o texto enche-se de cor, o ponto salta ---- */
/* ⚠️ SEM fundo por trás: uma faixa escura (a toda a largura, ou mesmo só uma elipse) por cima do disco que
   roda levava o p95 a 33 ms — nem will-change a curava. Medido por eliminação: sem ela, 16.8 ms. O texto é
   grande e em negrito; lê-se sobre o disco apagado. */
.skin-karaoke{left:50% !important;top:auto !important;bottom:6vh;width:min(900px,92vw);margin-left:calc(min(900px,92vw) / -2);text-align:center}
/* em vez de uma camada por cima, o resto do disco apaga-se quase de todo enquanto o karaoke canta
   (cor, só nas paragens — de graça) */
.pop-karaoke .parts.focus .part:not(.cur) .sd-t{fill:rgba(226,234,227,.06)}
.pop-karaoke .parts.focus .part:not(.cur) .sd-t .k{fill:rgba(4,186,206,.08)}
.pop-karaoke .parts.focus .flank .sd-t{fill:rgba(226,234,227,.05)}
.kr-top{display:flex;justify-content:center;gap:22px;margin:0 0 18px;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.kr-key{color:var(--dot)}
.kr-lines{margin:0 0 18px}
.kr-l{position:relative;display:block;width:fit-content;margin:0 auto .5em;font:600 clamp(1.6rem,2.5vw,2.4rem)/1.3 var(--sans);letter-spacing:-.015em;
  background:linear-gradient(90deg,#04BACE 0 50%,#E2EAE3 50% 100%);background-size:200% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.skin-karaoke.on .kr-l{animation:kr-wipe var(--d) linear var(--t) forwards}
@keyframes kr-wipe{to{background-position:0 0}}
/* o ponto laranja do logótipo, a saltar por cima da palavra que está a ser cantada */
/* ⚠️ tudo em transform/opacity: animar `left` recalculava o layout a cada frame (p95 33 ms). A caixa
   .kr-ball tem a largura da linha, portanto translateX(100%) leva o ponto de uma ponta à outra. */
.kr-ball{position:absolute;left:0;right:0;top:-.42em;height:0;will-change:transform}
.kr-ball i{position:absolute;left:0;width:.3em;height:.3em;margin-left:-.15em;border-radius:50%;background:#E8813C;opacity:0}
.skin-karaoke.on .kr-ball{animation:kr-move var(--d) linear var(--t) forwards}
.skin-karaoke.on .kr-ball i{animation:kr-show var(--d) linear var(--t) forwards,kr-hop .26s ease-in-out var(--t) infinite alternate}
@keyframes kr-move{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes kr-show{0%,96%{opacity:1}100%{opacity:0}}
@keyframes kr-hop{from{transform:translateY(0)}to{transform:translateY(-.34em)}}
.skin-karaoke .pp-btns{justify-content:center}

/* ---- tab: tablatura em ASCII, os números acendem como se fossem tocados ---- */
.skin-tab{width:fit-content;max-width:92vw;padding:16px 24px 18px;border-radius:12px;
  background:color-mix(in oklab,var(--paper) 95%,transparent);border:1px solid color-mix(in oklab,var(--ink) 14%,var(--paper))}
.tb-k{display:flex;justify-content:space-between;gap:24px;margin:0 0 10px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.tb-meta{color:var(--soft);letter-spacing:.06em;text-transform:none}
.tb-meta b{color:var(--dot);font-weight:500}
.tb-body{margin:0 0 12px;font:13px/1.42 var(--mono);white-space:pre;overflow-x:auto;color:#4f5455}
.tb-s{color:#7c8182}
.tb-c{color:#E8813C;font-weight:500}
.tb-ly{color:var(--ink);font-family:var(--serif);font-style:italic}
.tb-n{font-weight:500;color:#6f7473}
.skin-tab.on .tb-n{animation:tb-lit .5s ease forwards;animation-delay:calc(.3s + var(--i) * .1s)}
@keyframes tb-lit{0%{color:#6f7473}40%{color:#ffffff}100%{color:#E8813C}}
.tb-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.tb-foot > p:first-child{margin:0;max-width:48ch;font-size:.92rem;line-height:1.55;color:var(--soft)}
.tb-foot .pp-link,.tb-foot .pp-btns{flex:none}

@media (prefers-reduced-motion:reduce){
  .skin-partitura.on .nh,.skin-partitura.on .ns,.skin-partitura.on .ly{animation-duration:.01s;animation-delay:0s}
  .skin-letra.on .lr-p span{transition-delay:0s}
  .skin-solta.on .so-w,.skin-solta.on .so-c{transition-delay:0s}
  .skin-karaoke.on .kr-l{animation-duration:.01s;animation-delay:0s} .skin-karaoke .kr-ball{display:none}
  .skin-tab.on .tb-n{animation-duration:.01s;animation-delay:0s}
}
/* telemóvel: todas em baixo, à largura do ecrã */
@media (max-width:760px){
  .card{left:12px !important;right:12px;top:auto !important;bottom:12px;width:auto}
  .skin-card{padding:16px 18px} .skin-card h2{font-size:1.3rem} .skin-card p{font-size:.9rem}
  .skin-capa{aspect-ratio:auto;padding:16px 18px} .skin-capa.on{transform:rotate(-1.2deg)}
  .skin-partitura{padding:12px 14px} .sc-foot{flex-direction:column;align-items:flex-start;gap:10px} .sc-foot > p:first-child{font-size:.88rem}
  .skin-cifra{padding:14px 16px} .cf-body{font-size:11px}
  .skin-letra h2{font-size:1.6rem} .lr-p{font-size:1rem}
  .so-p{font-size:1.25rem} .skin-karaoke{bottom:12px;margin-left:0} .kr-l{font-size:1.3rem} .kr-top{gap:12px;font-size:10px}
  .skin-tab{padding:12px 14px} .tb-body{font-size:10.5px} .tb-foot{flex-direction:column;align-items:flex-start;gap:10px}
}