/* ==========================================================================
   Picä Tumilho — layout do mockup (BASE_SITE_2)
   Carregar DEPOIS de site.css e site-fundo.css.

   O que este ficheiro faz, por ordem do mockup:
     §1  logo com animação ao passar o rato
     §2  as cartas sobem e ficam meio integradas no slider
     §3  footer com as imagens laterais (telemóvel: só a esquerda)
     §4  o player que sobe com fade-up quando algo toca
     §5  onda sonora + progresso + volume
     §6  painel lateral da letra
     §7  modal de vídeo (YouTube / Instagram / TikTok)
   ========================================================================== */

/* §1 — Logo: balança ao passar o rato ================================== */
.brand-logo {
  transform-origin: 50% 8%;          /* pendurado pelo topo, como no mockup */
  transition: filter .3s;
}
.site-header a:hover .brand-logo,
.site-header a:focus-visible .brand-logo {
  animation: logo-balanca 1.6s ease-in-out;
  filter: drop-shadow(0 0 18px rgba(216, 162, 68, .45));
}
@keyframes logo-balanca {
  0%   { rotate: 0deg }
  20%  { rotate: -6deg }
  45%  { rotate: 4.5deg }
  70%  { rotate: -2.5deg }
  100% { rotate: 0deg }
}

/* §2 — As cartas sobem para dentro do slider =========================== */
/* O hero fica por baixo; a secção music entra por cima da borda inferior,
   sem fundo próprio, para as cartas parecerem pousadas no palco. */
.section.music {
  position: relative;
  z-index: 20;
  margin-top: clamp(-190px, -14vw, -90px);
  padding-top: 0;
  background: transparent !important;
}
.section.music .title {
  /* o título fica por cima da zona escura do hero */
  text-shadow: 0 3px 14px #000;
}
/* sem o corte serrilhado entre hero e cartas — a sobreposição substitui-o */
.hero + .section-cut { display: none }

/* §3 — Footer com as imagens laterais ================================== */
.bottom {
  position: relative;
  overflow: hidden;
}
.bottom-left,
.bottom-right {
  /* fixos ao browser: a página rola e eles não mexem (como as correntes) */
  position: fixed;
  bottom: 0;
  z-index: 4;                        /* acima das correntes (3), abaixo do player */
  max-height: clamp(140px, 26vh, 300px);   /* mais pequenos, como pedido */
  width: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .8));
}
.bottom-left  { left:  clamp(4px, 2vw, 40px) }
.bottom-right { right: clamp(4px, 2vw, 40px) }

@media (max-width: 700px) {
  /* telemóvel: só a imagem da esquerda, como pedido */
  .bottom-right { display: none }
  .bottom-left { max-height: clamp(110px, 20vh, 180px) }
}

/* §4 — O player ======================================================== */
/* Nasce escondido. Quando algo toca, ganha .ativo e sobe com fade-up. */
.player {
  /* Flutua sobre a página: fixo ao browser, centrado, a 40px do fundo.
     A página rola; ele fica. Entra em slide+fade up; sai em slide+fade down
     (a mesma transition serve os dois sentidos ao tirar o .ativo). */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 40px;
  margin-inline: auto;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: .9rem;
  width: min(720px, calc(100vw - 2rem));
  padding: .7rem 1rem;
  background:
    linear-gradient(#1a110a, #0b0705);
  border: 1px solid #6b4a22;
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(216, 162, 68, .18);

  opacity: 0;
  transform: translateY(46px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .75, .25, 1);
  pointer-events: none;
}
.player.ativo {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.player-cover {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #4a3418;
}
.player-info { min-width: 130px; line-height: 1.3 }
.player-info strong { display: block; font-family: 'Ringbearer', 'Cinzel', serif; font-size: .92rem; color: #f2e8d4 }
.player-info small  { color: #c0392b; font-size: .72rem }

.controls { display: flex; align-items: center; gap: .35rem }
.controls button {
  background: none;
  border: 0;
  color: #d8aa5c;
  font-size: 1.05rem;
  padding: .25rem .4rem;
  cursor: pointer;
  transition: color .2s, transform .2s;
}
.controls button:hover { color: #f2e8d4; transform: scale(1.12) }
.controls .play {
  width: 44px;
  height: 44px;
  border: 1px solid #a9231d;
  border-radius: 50%;
  color: #fff;
  display: grid;
  place-items: center;
}
.controls .play:hover { background: #a9231d }

/* §5 — Onda + progresso + volume ====================================== */
.player-meio { flex: 1; min-width: 80px; display: flex; flex-direction: column; gap: .3rem }

.onda-canvas {
  width: 100%;
  height: 30px;
  display: block;
}

.progresso-barra {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: #241708;
  border: 1px solid #3a2313;
  cursor: pointer;
}
.progresso-feito {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, #a9231d, #f25a2a);
  box-shadow: 0 0 8px rgba(242, 90, 42, .6);
  transition: width .15s linear;
}

.volume-zona { display: flex; align-items: center; gap: .3rem }
.volume-zona input[type="range"] {
  width: 74px;
  accent-color: #f25a2a;
  cursor: pointer;
}
@media (max-width: 700px) {
  .player-info { display: none }
  .volume-zona input[type="range"] { width: 52px }
}

.btn-letra {
  font-family: 'Ringbearer', 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #d8a244;
  background: #160d08;
  border: 1px solid #6b4a22;
  border-radius: 4px;
  padding: .45rem .7rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-letra:hover { border-color: #d8a244; color: #f2e8d4 }
.btn-letra[hidden] { display: none }

.player-fechar {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: #1a110a;
  border: 1px solid #6b4a22;
  border-radius: 50%;
  color: #d8a244;
  font-size: .8rem;
  cursor: pointer;
}
.player-fechar:hover { color: #fff; border-color: #d8a244 }

/* §6 — Painel lateral da letra ======================================== */
.letra-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(4, 2, 1, .6);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}
.letra-overlay.aberta { opacity: 1; pointer-events: auto }

.letra-painel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  width: min(440px, 92vw);
  padding: 2.2rem 1.8rem;
  overflow-y: auto;
  background:
    repeating-linear-gradient(93deg, rgba(0,0,0,.12) 0 2px, transparent 2px 8px),
    linear-gradient(160deg, #1d1209, #0d0805);
  border-left: 1px solid #6b4a22;
  box-shadow: -22px 0 60px rgba(0, 0, 0, .85);
  transform: translateX(105%);
  transition: transform .45s cubic-bezier(.2, .75, .25, 1);
}
.letra-overlay.aberta + .letra-painel,
.letra-painel.aberta { transform: none }

.letra-painel h3 {
  font-family: 'Ringbearer', 'Cinzel', serif;
  color: #f2e8d4;
  font-size: 1.3rem;
  margin: 0 0 1rem;
  padding-right: 2.2rem;
}
.letra-painel pre {
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: .9rem;
  line-height: 1.9;
  color: #d9cbb2;
  white-space: pre-line;   /* quebras de linha = estrofes (contrato §5) */
  margin: 0;
}
.letra-fechar,
.video-fechar {
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .55);
  border: 1px solid #6b4a22;
  border-radius: 50%;
  color: #d8a244;
  font-size: 1.1rem;
  cursor: pointer;
}
.letra-fechar:hover, .video-fechar:hover { color: #fff; border-color: #d8a244 }

/* §7 — Modal de vídeo ================================================= */
.video-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(3, 2, 1, .88);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.video-overlay.aberta { opacity: 1; pointer-events: auto }

.video-caixa {
  position: relative;
  width: min(960px, 100%);
  background: #000;
  border: 1px solid #6b4a22;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .95);
  transform: scale(.94);
  transition: transform .3s;
}
.video-overlay.aberta .video-caixa { transform: none }

/* youtube (16:9) */
.video-caixa.formato-video { aspect-ratio: 16 / 9 }
/* instagram / tiktok (vertical) */
.video-caixa.formato-vertical {
  width: min(400px, 92vw);
  aspect-ratio: 9 / 16;
  max-height: 88vh;
}
.video-caixa iframe,
.video-caixa video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}
.video-fechar { top: -14px; right: -14px; z-index: 2 }

/* §8 — Menos movimento ================================================ */
@media (prefers-reduced-motion: reduce) {
  .brand-logo, .site-header a:hover .brand-logo { animation: none }
  .player { transition: opacity .2s }
  .letra-painel { transition: none }
}

/* §9 — Menu de placas (PROCESSO_MENU_PICA_TUMILHO) ==================== */
.menu-pica {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  align-items: stretch;
  gap: 12px;
  width: min(1400px, calc(100% - 32px));
  margin-inline: auto;
  padding-block: 24px;
}
.menu-pica__item {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 2 / 3;
  /* A placa comum. ENQUANTO NÃO HOUVER placa_madeira_base.webp (não veio no
     zip), o gradiente por baixo faz de madeira — quando o ficheiro subir,
     tapa-o sozinho. */
  background:
    url("/uploads/images/menu/placa_madeira_base.webp") center / contain no-repeat,
    linear-gradient(165deg, #4a3018 0%, #2c1c0d 55%, #1a1008 100%);
  border-radius: 10px;
  text-decoration: none;
  transform-origin: center;
  transition: transform 220ms ease, filter 220ms ease;
}
.menu-pica__item img {
  display: block;
  width: var(--icone, 88%);
  height: var(--icone, 88%);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transition: transform 220ms ease, filter 220ms ease;
}
.menu-pica__item:hover,
.menu-pica__item:focus-visible {
  z-index: 2;
  transform: translateY(-6px) scale(1.025);
  filter: brightness(1.12);
}
.menu-pica__item:hover img,
.menu-pica__item:focus-visible img {
  transform: scale(1.035);
  filter: drop-shadow(0 10px 12px rgb(0 0 0 / 45%));
}
.menu-pica__item:focus-visible { outline: 2px solid #c98a36; outline-offset: 4px }

@media (max-width: 1100px) { .menu-pica { grid-template-columns: repeat(4, minmax(130px, 1fr)) } }
@media (max-width: 700px)  { .menu-pica { grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 10px } }
@media (max-width: 390px)  { .menu-pica { grid-template-columns: 1fr; width: min(260px, calc(100% - 24px)) } }
@media (prefers-reduced-motion: reduce) {
  .menu-pica__item, .menu-pica__item img { transition: none }
}