# Mobile GPU — Eliminar Efeitos Custosos

O Lighthouse testa em **Moto G Power simulado com 4G lento** — CPU throttle 4x.
Efeitos que "funcionam" no desktop podem travar completamente no mobile.

---

## Regra Geral

**Qualquer efeito visual desnecessário no mobile deve ser desativado via `@media(min-width:1024px)`.**

O mobile deve receber apenas o layout e cores. Animações, blur, sombras pesadas e gradientes complexos são para desktop.

---

## Efeitos a desativar no mobile (mover para desktop)

### 1. Animações CSS (`animation`, `transition`)

```css
/* ❌ Mobile recebe animação — custa CPU/GPU */
.elemento { animation: pulse 2s infinite; }

/* ✅ Apenas desktop anima */
@media(min-width:1024px) {
    .elemento { animation: pulse 2s infinite; }
}
```

**Animações mais custosas:**
- `animation: scroll-ticker` — mover DOM em loop (TBT++, FPS--)
- `animation: pulse` com `opacity` — relativamente leve
- `animation: spin` — usar apenas quando necessário (spinner de loading)
- `transition: all` — nunca usar; especificar propriedade exata

### 2. `backdrop-filter: blur()`

```css
/* ❌ Blur é render-layer — cria novo compositor no GPU */
.card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ✅ Apenas desktop blura; mobile usa cor sólida */
.card { background: rgba(15,58,58,.92); }
@media(min-width:1024px) {
    .card { background: rgba(15,58,58,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
```

### 3. `box-shadow` pesados

```css
/* ❌ box-shadow com spread/blur grande — cria layer de GPU */
.btn { box-shadow: 0 0 20px rgba(255,185,0,.4); }

/* ✅ Mobile sem shadow; desktop com shadow */
@media(min-width:1024px) {
    .btn { box-shadow: 0 0 20px rgba(255,185,0,.4); }
}
```

**box-shadow que vale manter no mobile**: `0 0 0 1px color` (outline alternativo) — não cria layer extra.

### 4. Gradientes decorativos (glow, ambient)

```css
/* ❌ Radial-gradient decorativo renderizado em toda viewport */
.glow { background: radial-gradient(circle, rgba(0,79,79,.4) 0%, transparent 70%); }

/* ✅ Apenas desktop exibe */
.glow { display: none; }
@media(min-width:1024px) { .glow { display: block; } }
```

### 5. Grid/pattern backgrounds (data URI SVG)

```css
/* ❌ SVG data URI repedido em todo o background */
.grid-bg { background-image: url('data:image/svg+xml,...'); }

/* ✅ Apenas desktop */
.grid-bg { display: none; }
@media(min-width:1024px) { .grid-bg { display: block; background-image: url('...'); } }
```

### 6. `transition` em elementos de form

```css
/* ❌ Transition ativa em toda interação do mobile */
.input { transition: border-color .2s, box-shadow .2s; }

/* ✅ Manter — é leve e necessário para UX */
/* Mas remover 'transform' de transições desnecessárias */
```

---

## Efeitos a simplificar (não eliminar, mas aliviar)

### `repeating-linear-gradient` (caution tape)
É renderizado uma vez e cacheado. Não precisa ser eliminado.
Mas elementos dentro do tape com animação de scroll devem ter DOM mínimo:
- 2 cópias do conteúdo (para loop sem gap)
- 4-6 itens por cópia (não 8+)

### `linear-gradient` em botões e barras
Leve — manter no mobile. Apenas `radial-gradient` e `background-image` SVG são pesados.

---

## `prefers-reduced-motion` — sempre implementar

```css
@media(prefers-reduced-motion: reduce) {
    .animacao-1,
    .animacao-2 { animation: none; }
}
```

Isso melhora acessibilidade E pode melhorar score do Lighthouse em dispositivos com a preferência ativa.

---

## `will-change` — armadilha comum

```css
/* ❌ NUNCA colocar will-change em muitos elementos */
/* will-change cria GPU layer IMEDIATAMENTE, não apenas quando anima */
/* Em mobile com RAM limitada, layers extras = crash/jank */
.el { will-change: transform; } /* ❌ */

/* ✅ will-change apenas em elementos que DEFINITIVAMENTE vão animar */
/* E remover após a animação via JS: el.style.willChange = 'auto' */
```

---

## Checklist Mobile GPU

- [ ] Todas as `animation:` movidas para `@media(min-width:1024px)`
- [ ] `backdrop-filter` apenas em desktop
- [ ] `box-shadow` ornamentais (glow, spread grande) apenas em desktop
- [ ] Gradientes decorativos (`radial-gradient`) com `display:none` em mobile
- [ ] Grid/pattern `background-image` com `display:none` em mobile
- [ ] DOM de elementos animados (ticker, scroll) mínimo (≤ 8 nós por cópia)
- [ ] `prefers-reduced-motion` implementado
- [ ] Nenhum `will-change` sem necessidade comprovada
