/* A pele da Fenaky Music (pedido do Pedro em 21/10/2026, uma página bonita como a do Ninja, com o DJ da
   Fenaky de fundo e, gerando a música, o vídeo dele tocando numa boate). Só a página do modelo music muda (data-pele="music" em
   .produto-pagina e .produto-config, public/product-studio.js): o vídeo de fundo do DJ com o F na camiseta, ele ou ela, sorteado a cada
   abertura do app (o fundo comum fica em peles.css), a marca no título, que cai no compasso ao abrir, o equalizador que dança sob o
   nome, o anel lima no quadro e o filete lima na barra. A marca é ícone próprio da Fenaky (Pedro, 24/10/2026): uma nota musical cujo
   corpo é o F da marca, no topo (antes do Trocar personagem), no título, no quadro da música e no botão de gerar. */

.produto-pagina[data-pele="music"] { --pele-marca: var(--lima); --pele-brilho: var(--lima); --pele-acento: var(--lima); --pele-foco: 60% 38%; }
/* O DJ fica no meio do vídeo, que é quase da proporção da página: nas telas largas o fundo desliza para a direita, para o DJ ficar entre
   o quadro e o histórico, e a borda esquerda some no fundo do app. */
@media (min-width: 1101px) {
  .produto-pagina[data-pele="music"] .produto-fundo__midia { transform: translateX(16%); -webkit-mask-image: linear-gradient(90deg, transparent, black 30%); mask-image: linear-gradient(90deg, transparent, black 30%); }
}

/* ── Topo: o item da Fenaky Music com a marca lima, que pula no compasso no hover ─────────────────────────────────────────────────── */
.fk-megamenu__marca--music { color: var(--lima); filter: drop-shadow(0 0 var(--space-6) color-mix(in srgb, var(--lima) 45%, transparent)); transform-origin: 30% 85%; }
/* Sem o box em volta e com o hover dos outros itens do meio, como o Ninja e o Ginga (Pedro, 22/10/2026; produtos.css). */
.fk-megamenu__gatilho--music:hover .fk-megamenu__marca--music { animation: fk-music-nota .9s var(--curva-casa); }
@keyframes fk-music-nota { 25% { transform: translateY(-3px) rotate(-10deg); } 50% { transform: none; } 75% { transform: translateY(-1.5px) rotate(6deg); } }

/* ── Título: a marca no poço lima (peles.css), que gira ao abrir, e o equalizador que dança sob o nome ─────────────────────── */
.produto-pagina[data-pele="music"] .produto-titulo { position: relative; display: flex; align-items: center; gap: var(--space-14); padding-bottom: var(--space-16); font-size: 48px; font-weight: 600; letter-spacing: -.05em; }
.produto-pagina[data-pele="music"] .produto-titulo__marca .icon { transform-origin: 30% 85%; animation: fk-music-entra 1.1s calc(var(--duracao-media) * 1.2) var(--curva-casa) both; }
@keyframes fk-music-entra { from { opacity: 0; transform: translateY(-45%) rotate(-24deg) scale(.7); } 60% { opacity: 1; transform: translateY(6%) rotate(5deg); } }
/* Onze barras lima de alturas diferentes: o SVG com a própria animação é a máscara do lima; com "reduzir movimento", as mesmas barras paradas. */
.produto-pagina[data-pele="music"] .produto-titulo::after {
  content: ''; position: absolute; left: 70px; bottom: 0; width: 120px; height: var(--space-14); pointer-events: none;
  background: var(--lima);
  -webkit-mask: no-repeat left bottom / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' fill='black'%3E%3Crect x='0' y='6' width='6' height='8' rx='1'%3E%3Canimate attributeName='height' values='8;13;4;8' dur='.9s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='6;1;10;6' dur='.9s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='11' y='2' width='6' height='12' rx='1'%3E%3Canimate attributeName='height' values='12;5;14;12' dur='1.1s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='2;9;0;2' dur='1.1s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='22' y='8' width='6' height='6' rx='1'%3E%3Canimate attributeName='height' values='6;14;9;6' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='8;0;5;8' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='33' y='4' width='6' height='10' rx='1'%3E%3Canimate attributeName='height' values='10;4;12;10' dur='1s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='4;10;2;4' dur='1s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='44' y='1' width='6' height='13' rx='1'%3E%3Canimate attributeName='height' values='13;7;10;13' dur='1.2s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='1;7;4;1' dur='1.2s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='55' y='7' width='6' height='7' rx='1'%3E%3Canimate attributeName='height' values='7;12;5;7' dur='.85s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='7;2;9;7' dur='.85s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='66' y='3' width='6' height='11' rx='1'%3E%3Canimate attributeName='height' values='11;5;14;11' dur='1.05s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='3;9;0;3' dur='1.05s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='77' y='9' width='6' height='5' rx='1'%3E%3Canimate attributeName='height' values='5;11;7;5' dur='.95s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='9;3;7;9' dur='.95s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='88' y='5' width='6' height='9' rx='1'%3E%3Canimate attributeName='height' values='9;13;6;9' dur='1.15s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='5;1;8;5' dur='1.15s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='99' y='8' width='6' height='6' rx='1'%3E%3Canimate attributeName='height' values='6;10;4;6' dur='.9s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='8;4;10;8' dur='.9s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='110' y='10' width='6' height='4' rx='1'%3E%3Canimate attributeName='height' values='4;8;3;4' dur='1s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='10;6;11;10' dur='1s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E");
  mask: no-repeat left bottom / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' fill='black'%3E%3Crect x='0' y='6' width='6' height='8' rx='1'%3E%3Canimate attributeName='height' values='8;13;4;8' dur='.9s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='6;1;10;6' dur='.9s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='11' y='2' width='6' height='12' rx='1'%3E%3Canimate attributeName='height' values='12;5;14;12' dur='1.1s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='2;9;0;2' dur='1.1s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='22' y='8' width='6' height='6' rx='1'%3E%3Canimate attributeName='height' values='6;14;9;6' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='8;0;5;8' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='33' y='4' width='6' height='10' rx='1'%3E%3Canimate attributeName='height' values='10;4;12;10' dur='1s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='4;10;2;4' dur='1s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='44' y='1' width='6' height='13' rx='1'%3E%3Canimate attributeName='height' values='13;7;10;13' dur='1.2s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='1;7;4;1' dur='1.2s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='55' y='7' width='6' height='7' rx='1'%3E%3Canimate attributeName='height' values='7;12;5;7' dur='.85s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='7;2;9;7' dur='.85s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='66' y='3' width='6' height='11' rx='1'%3E%3Canimate attributeName='height' values='11;5;14;11' dur='1.05s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='3;9;0;3' dur='1.05s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='77' y='9' width='6' height='5' rx='1'%3E%3Canimate attributeName='height' values='5;11;7;5' dur='.95s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='9;3;7;9' dur='.95s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='88' y='5' width='6' height='9' rx='1'%3E%3Canimate attributeName='height' values='9;13;6;9' dur='1.15s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='5;1;8;5' dur='1.15s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='99' y='8' width='6' height='6' rx='1'%3E%3Canimate attributeName='height' values='6;10;4;6' dur='.9s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='8;4;10;8' dur='.9s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='110' y='10' width='6' height='4' rx='1'%3E%3Canimate attributeName='height' values='4;8;3;4' dur='1s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='10;6;11;10' dur='1s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E");
}

/* ── Quadro e configurador: um anel lima com o brilho da boate no quadro (o filete lima no alto da barra vem de peles.css) ─────── */
.produto-pagina[data-pele="music"] .fk-player__quadro { box-shadow: var(--shadow-moldura), 0 0 0 1px color-mix(in srgb, var(--lima) 20%, transparent), 0 0 72px -18px var(--lima-brilho); }

@media (prefers-reduced-motion: reduce) {
  .fk-megamenu__gatilho--music:hover .fk-megamenu__marca--music, .produto-pagina[data-pele="music"] .produto-titulo__marca .icon { animation: none; }
  .produto-pagina[data-pele="music"] .produto-titulo::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' fill='black'%3E%3Crect x='0' y='6' width='6' height='8' rx='1'/%3E%3Crect x='11' y='2' width='6' height='12' rx='1'/%3E%3Crect x='22' y='8' width='6' height='6' rx='1'/%3E%3Crect x='33' y='4' width='6' height='10' rx='1'/%3E%3Crect x='44' y='1' width='6' height='13' rx='1'/%3E%3Crect x='55' y='7' width='6' height='7' rx='1'/%3E%3Crect x='66' y='3' width='6' height='11' rx='1'/%3E%3Crect x='77' y='9' width='6' height='5' rx='1'/%3E%3Crect x='88' y='5' width='6' height='9' rx='1'/%3E%3Crect x='99' y='8' width='6' height='6' rx='1'/%3E%3Crect x='110' y='10' width='6' height='4' rx='1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' fill='black'%3E%3Crect x='0' y='6' width='6' height='8' rx='1'/%3E%3Crect x='11' y='2' width='6' height='12' rx='1'/%3E%3Crect x='22' y='8' width='6' height='6' rx='1'/%3E%3Crect x='33' y='4' width='6' height='10' rx='1'/%3E%3Crect x='44' y='1' width='6' height='13' rx='1'/%3E%3Crect x='55' y='7' width='6' height='7' rx='1'/%3E%3Crect x='66' y='3' width='6' height='11' rx='1'/%3E%3Crect x='77' y='9' width='6' height='5' rx='1'/%3E%3Crect x='88' y='5' width='6' height='9' rx='1'/%3E%3Crect x='99' y='8' width='6' height='6' rx='1'/%3E%3Crect x='110' y='10' width='6' height='4' rx='1'/%3E%3C/svg%3E");
  }
}