/* ================================================================
 * FIRESPEAK LOGO ANIMATION — firespeak-logo-anim.css
 * Bomber Mídia · v1.0
 *
 * Redimensionamento: altere data-fsl-scale="X" no elemento HTML
 * ou chame FireSpeakLogo.setScale(X) em runtime.
 * Sem necessidade de tocar em nenhuma outra linha de código.
 * ================================================================ */

/* ── Palco ─────────────────────────────────────────────────────── */
.fsl-stage {
  --fsl-scale: 1;

  position:     relative;
  display:      inline-block; /* dimensões definidas pelo JS */
  overflow:     visible;      /* faíscas podem extrapolar levemente o frame */
  line-height:  0;            /* evita espaço extra de inline-block */
}

/* ── Layers — absolutas, cobrem o frame completo ────────────────── */
.fsl-layer {
  position:   absolute;
  inset:      0;
  opacity:    0;              /* começa invisível; JS controla entrada */
  pointer-events: none;
  user-select:    none;
  -webkit-user-select: none;

  /* GPU por layer — crítico para suavidade em 60fps */
  will-change:             transform, opacity, filter;
  backface-visibility:     hidden;
  -webkit-backface-visibility: hidden;
  transform-style:         preserve-3d;
}

.fsl-layer img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: fill;        /* respeita posição exata do PNG no frame */
  -webkit-user-drag: none;
}

/* ================================================================
 * TEMAS
 * ================================================================ */

/*
 * dark (default) — fundo escuro.
 * Nenhuma regra extra necessária: é o comportamento padrão.
 */

/*
 * light — fundo claro.
 * Imagens com sufixo -2 são carregadas automaticamente pelo JS.
 * Adicione aqui overrides visuais CSS caso necessário no futuro.
 */
.fsl-stage[data-fsl-theme="light"] {
  /* Reservado para overrides CSS futuros do tema light. */
  /* Cores e glows são controlados via COLORS.light no JS. */
}

/*
 * FASE 7 (idle) — controlada inteiramente por requestAnimationFrame no JS.
 * Superposição de ondas senoidais não-harmônicas + física mola-amortecedor.
 * Nenhum @keyframes aqui — sem repetição perceptível, sem amadorismo.
 */