/* =====================================================================
   LIP SYNC DE BOTECO · TÍTULOS COM GLITTER E BORDA DOURADA
   Fontes: Boteco Rosa / Boteco Ouro (adaptações da Rye, SIL OFL 1.1)

   Como funciona
   - Carregue este arquivo DEPOIS de site.css e o boteco-titulos.js no fim.
   - Qualquer título com .lsdb-glitter (rosa) ou .lsdb-gold-text (dourado)
     recebe o efeito completo: glitter + filete escuro + borda de ouro
     metálico + profundidade vinho + brilho que passa + faíscas.
   - O JS duplica o texto em camadas decorativas (aria-hidden), por isso
     leitores de tela continuam lendo o título uma única vez.
   - Sem JS, o título ainda aparece com fonte, glitter e sombra simples.

   Classes de ajuste (opcionais, no próprio título)
   .bt-fonte-rosa   força a Boteco Rosa (estreita)
   .bt-fonte-ouro   força a Boteco Ouro (mais larga)
   .bt-borda-rosa   borda rosa-metálica (para títulos dourados)
   .bt-sem-faisca   desliga as faíscas
   .bt-sem-brilho   desliga o brilho animado
   ===================================================================== */

@font-face{font-family:'Boteco Rosa';src:url('fonts/BotecoRosa-Regular.woff2') format('woff2'),url('fonts/BotecoRosa-Regular.ttf') format('truetype');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Boteco Ouro';src:url('fonts/BotecoOuro-Regular.woff2') format('woff2'),url('fonts/BotecoOuro-Regular.ttf') format('truetype');font-weight:400 900;font-style:normal;font-display:swap}

#lsdb-site{
  --bt-rosa:'Boteco Rosa',Georgia,'Times New Roman',serif;
  --bt-ouro:'Boteco Ouro',Georgia,'Times New Roman',serif;
  --bt-tex-rosa:url('images/boteco-glitter-rosa.webp');
  --bt-tex-ouro:url('images/boteco-glitter-ouro.webp');
  --bt-tex-size:1.25em 1.25em;
  /* ouro metálico da borda: faixas claras e escuras como num bisel */
  --bt-metal-ouro:linear-gradient(180deg,#fff6cf 0%,#ffd76a 18%,#b9790f 42%,#ffe08a 58%,#f2b63b 74%,#7d4700 100%);
  --bt-metal-rosa:linear-gradient(180deg,#ffe3f2 0%,#ff8fcf 22%,#b3125f 46%,#ff9fd5 62%,#e0368f 78%,#5d0029 100%);
  --bt-depth:#3d0016;
  --bt-depth-ouro:#3a1d00;
  --bt-lh:1.12em;
}

/* ---------- Fonte em todos os títulos ---------- */
#lsdb-site h1,#lsdb-site h2,#lsdb-site h3,#lsdb-site .lsdb-lyric>summary{
  font-family:var(--bt-ouro);font-weight:400;letter-spacing:.01em;line-height:1.12;text-transform:none
}
/* todos os títulos usam a Boteco Ouro (a versão larga); .bt-fonte-rosa continua disponível */
#lsdb-site .lsdb-glitter{font-family:var(--bt-ouro);letter-spacing:.03em}
#lsdb-site .bt-fonte-rosa{font-family:var(--bt-rosa);letter-spacing:.045em}
#lsdb-site .lsdb-gold-text,#lsdb-site .bt-fonte-ouro{font-family:var(--bt-ouro);letter-spacing:.03em}
/* hero "DRAG À LA CARTE": caixa alta, como a logo */
#lsdb-site .lsdb-hero h1{letter-spacing:.035em;line-height:.98;--bt-lh:.98em}
/* títulos pequenos sem glitter: dourado com relevo discreto */
/* títulos pequenos sem glitter (nomes das personagens etc.): rosa da marca */
#lsdb-site h3:not(.lsdb-glitter):not(.lsdb-gold-text){color:#e51d76;text-shadow:0 1px 0 #ff9cc8,0 2px 0 #4a0019,0 4px 10px #000a}
#lsdb-site .lsdb-lyric>summary{font-weight:400;text-shadow:0 2px 0 #5c0025}

/* ---------- Estado base (sem JS ou antes do JS) ---------- */
#lsdb-site .lsdb-glitter{
  background-image:var(--bt-tex-rosa);background-size:var(--bt-tex-size);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#ff4db5;
  -webkit-text-stroke:0;
  filter:drop-shadow(0 0 0 #000) drop-shadow(0 .03em 0 #f2b63b) drop-shadow(0 .04em 0 var(--bt-depth)) drop-shadow(0 .08em .12em #000c);
  padding-bottom:.08em
}
#lsdb-site .lsdb-gold-text{
  background-image:var(--bt-tex-ouro);background-size:var(--bt-tex-size);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#efc171;
  filter:drop-shadow(0 .03em 0 #fff1b8) drop-shadow(0 .05em 0 var(--bt-depth-ouro)) drop-shadow(0 .08em .12em #000c);
  padding-bottom:.08em
}

/* ---------- Efeito completo (o JS adiciona .bt-on) ---------- */
#lsdb-site .bt-on{
  position:relative;isolation:isolate;
  background:none!important;filter:none!important;-webkit-text-fill-color:currentColor;
  /* espaço para borda, profundidade e faíscas não serem cortados */
  padding:.06em .06em .14em;margin-left:-.06em;
}
#lsdb-site .bt-on>.bt-face,#lsdb-site .bt-on>.bt-layer{display:block;-webkit-text-fill-color:transparent;font:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;text-align:inherit}
#lsdb-site .bt-on>.bt-layer{position:absolute;inset:.06em .06em .14em;pointer-events:none;user-select:none}
#lsdb-site .bt-on>.bt-face{position:relative;z-index:3}

/* 1 · profundidade/extrusão vinho + sombra no fundo */
#lsdb-site .bt-on>.bt-depth{
  z-index:0;color:var(--bt-depth);-webkit-text-fill-color:var(--bt-depth);
  -webkit-text-stroke:.09em var(--bt-depth);
  transform:translate(.02em,.045em);
  filter:drop-shadow(0 .03em 0 #1d000a) drop-shadow(0 .1em .14em rgba(0,0,0,.85))
}
/* 2 · borda de ouro metálico (o traço grosso aparece só por fora da letra) */
#lsdb-site .bt-on>.bt-rim{
  z-index:1;background-image:var(--bt-metal-ouro);background-size:100% var(--bt-lh);background-repeat:repeat-y;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:.06em transparent;
}
/* 2b · linha de luz fina no alto da borda */
#lsdb-site .bt-on>.bt-rimlight{
  z-index:2;-webkit-text-fill-color:transparent;-webkit-text-stroke:.018em rgba(255,250,225,.9);
  transform:translateY(-.015em);opacity:.55;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 30%,transparent 55%);mask-image:linear-gradient(180deg,#000 0,#000 30%,transparent 55%);
  -webkit-mask-size:100% var(--bt-lh);mask-size:100% var(--bt-lh)
}
/* 3 · face com glitter + filete escuro entre glitter e ouro */
#lsdb-site .lsdb-glitter.bt-on>.bt-face{
  background-image:var(--bt-tex-rosa);background-size:var(--bt-tex-size);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:.012em #8a003c;paint-order:stroke fill
}
#lsdb-site .lsdb-gold-text.bt-on>.bt-face{
  background-image:var(--bt-tex-ouro);background-size:var(--bt-tex-size);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:.014em #5a3000;paint-order:stroke fill
}
#lsdb-site .lsdb-gold-text.bt-on>.bt-depth{color:var(--bt-depth-ouro);-webkit-text-fill-color:var(--bt-depth-ouro);-webkit-text-stroke-color:var(--bt-depth-ouro)}
#lsdb-site .lsdb-gold-text.bt-on>.bt-rim{background-image:linear-gradient(180deg,#fffbe6 0%,#ffe9a8 20%,#c98a1c 45%,#fff0b8 60%,#f6c54d 76%,#6e3c00 100%);background-size:100% var(--bt-lh)}
#lsdb-site .bt-borda-rosa.bt-on>.bt-rim{background-image:var(--bt-metal-rosa)}

/* 4 · brilho: lustro fixo no alto de cada linha + reflexo que atravessa */
#lsdb-site .bt-on>.bt-shine{
  z-index:4;mix-blend-mode:screen;
  background-image:
    linear-gradient(105deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.04) 30%,transparent 45%);
  background-size:300% 100%,100% var(--bt-lh);background-repeat:no-repeat,repeat-y;background-position:160% 0,0 0;
  -webkit-background-clip:text;background-clip:text;
  animation:bt-sweep 7s ease-in-out infinite
}
#lsdb-site .bt-sem-brilho>.bt-shine{animation:none}
@keyframes bt-sweep{0%,55%{background-position:160% 0,0 0}85%,100%{background-position:-60% 0,0 0}}

/* 5 · faíscas (estrelas de 4 pontas como na logo) */
#lsdb-site .bt-on>.bt-spark{
  position:absolute;z-index:5;width:.42em;height:.42em;margin:-.21em 0 0 -.21em;pointer-events:none;
  background:
    radial-gradient(circle,#fff 0 6%,rgba(255,240,200,.9) 12%,transparent 34%),
    linear-gradient(90deg,transparent 47%,#fff 50%,transparent 53%),
    linear-gradient(0deg,transparent 47%,#fff 50%,transparent 53%);
  -webkit-mask:radial-gradient(circle,#000 0 18%,rgba(0,0,0,.5) 30%,transparent 62%);mask:radial-gradient(circle,#000 0 18%,rgba(0,0,0,.5) 30%,transparent 62%);
  filter:drop-shadow(0 0 .06em #ffd77a);
  opacity:0;transform:scale(.2) rotate(0deg);
  animation:bt-twinkle 3.6s ease-in-out infinite
}
#lsdb-site .bt-sem-faisca>.bt-spark{display:none}
@keyframes bt-twinkle{0%,62%,100%{opacity:0;transform:scale(.2) rotate(0deg)}72%{opacity:1;transform:scale(1) rotate(25deg)}84%{opacity:.85;transform:scale(.7) rotate(45deg)}}

/* links dentro de títulos (cards de música) */
#lsdb-site .bt-on a{text-decoration:none;color:inherit}
#lsdb-site .bt-on a:hover{color:inherit}
#lsdb-site .bt-on:has(a:hover)>.bt-shine{animation-duration:2.2s}

/* acessibilidade e impressão */
@media (prefers-reduced-motion:reduce){#lsdb-site .bt-on>.bt-shine,#lsdb-site .bt-on>.bt-spark{animation:none}#lsdb-site .bt-on>.bt-spark{display:none}}
@media print{#lsdb-site .bt-on>.bt-layer,#lsdb-site .bt-on>.bt-spark{display:none}#lsdb-site .bt-on>.bt-face{-webkit-text-fill-color:#000;background:none;-webkit-text-stroke:0}}