# Mobile GPU — Eliminar Efeitos Custosos

Lighthouse testa em Moto G Power simulado com 4G lento — CPU throttle 4x.

## Regra Geral
Efeitos visuais desnecessários no mobile → desativar via `@media(min-width:1024px)`.

## Efeitos a mover para desktop only

### Animações CSS
```css
/* Mobile: sem animação. Desktop: anima */
@media(min-width:1024px) {
    .elemento { animation: pulse 2s infinite; }
}
```
NUNCA `transition: all` — especificar propriedade exata.

### backdrop-filter: blur()
```css
.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); }
}
```

### box-shadow pesados
```css
@media(min-width:1024px) {
    .btn { box-shadow: 0 0 20px rgba(255,185,0,.4); }
}
```
`0 0 0 1px color` (outline) é leve — pode manter no mobile.

### Gradientes decorativos
```css
.glow { display: none; }
@media(min-width:1024px) { .glow { display: block; } }
```

### Grid/pattern backgrounds (data URI SVG)
```css
.grid-bg { display: none; }
@media(min-width:1024px) { .grid-bg { display: block; } }
```

## Sempre implementar
```css
@media(prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
```

## will-change — armadilha
NUNCA em muitos elementos. Cria GPU layer imediatamente. Usar só em elementos que definitivamente vão animar.

## Checklist

- [ ] Animações em `@media(min-width:1024px)` apenas
- [ ] `backdrop-filter` desktop only
- [ ] `box-shadow` ornamentais desktop only
- [ ] Gradientes decorativos `display:none` no mobile
- [ ] `prefers-reduced-motion` implementado
- [ ] Nenhum `will-change` desnecessário
