/* A pele do Ninja (Pedro, 20/10/2026; proposta aprovada no Artifact "Ninja no configurador": fundo em vídeo, selo Novo).
   Só a página do modelo ninja muda (data-pele="ninja" em .produto-pagina e .produto-config, public/product-studio.js): o vídeo de
   fundo atrás do quadro (o fundo comum fica em peles.css), a marca no título, o brilho lima no quadro e o filete lima no configurador.
   No topo, o item do Ninja leva a marca e o selo NOVO em todas as telas. Ícone: game-icons ninja-head (CC BY 3.0,
   assets/GameIcons-LICENSE.txt). */

/* ── Topo: o item do Ninja com a marca lima e um brilho que passa pelo selo ───────────────────────────────────────────────────── */
.fk-megamenu__marca--ninja { color: var(--lima); filter: drop-shadow(0 0 var(--space-6) color-mix(in srgb, var(--lima) 45%, transparent)); }
/* Sem o box em volta e com o hover dos outros itens do meio (Pedro, 22/10/2026; produtos.css): a marca e o selo. */
.fk-megamenu__gatilho--ninja .fk-megamenu__tag--novo { position: relative; overflow: hidden; }
.fk-megamenu__gatilho--ninja .fk-megamenu__tag--novo::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--branco) 75%, transparent) 50%, transparent 70%);
  animation: fk-ninja-brilho 3.6s 1.2s var(--curva-casa) infinite;
}
@keyframes fk-ninja-brilho { 0%, 55% { transform: translateX(-120%); } 80%, 100% { transform: translateX(120%); } }

/* ── Título: a marca no poço lima (peles.css), o nome maior e um corte de lâmina que passa uma vez ─────────────────────────────── */
.produto-pagina[data-pele="ninja"] .produto-titulo { position: relative; display: flex; align-items: center; gap: var(--space-14); font-size: 52px; font-weight: 600; letter-spacing: -.055em; }
.produto-pagina[data-pele="ninja"] .produto-titulo::after {
  content: ''; position: absolute; left: -8%; right: -8%; top: 55%; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--lima) 30%, var(--lima-topo) 60%, transparent); box-shadow: 0 0 14px var(--lima);
  transform: rotate(-9deg) scaleX(0); transform-origin: 0 50%; opacity: 0;
  animation: fk-ninja-corte 1.1s calc(var(--duracao-media) * 1.2) var(--curva-casa) both;
}
@keyframes fk-ninja-corte { 0% { transform: rotate(-9deg) scaleX(0); opacity: 1; } 55% { transform: rotate(-9deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-9deg) scaleX(1); opacity: 0; } }

/* ── Quadro: um anel lima discreto (o filete lima no alto da barra vem de peles.css) ────────────────────────────────────────── */
.produto-pagina[data-pele="ninja"] { --pele-acento: var(--lima); }
.produto-pagina[data-pele="ninja"] .fk-player__quadro { box-shadow: var(--shadow-moldura), 0 0 0 1px color-mix(in srgb, var(--lima) 18%, transparent), 0 0 60px -20px var(--lima-brilho); }
/* A máscara no botão de gerar (Pedro, 21/10/2026): um pouco maior que os 15 px dos outros ícones, porque o desenho ocupa o quadro inteiro. */
.produto-config[data-pele="ninja"] .produto-cta > .icon:first-child { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .fk-megamenu__gatilho--ninja .fk-megamenu__tag--novo::after, .produto-pagina[data-pele="ninja"] .produto-titulo::after { animation: none; }
}