/* ícones em camadas. Cada .icone tem 3 camadas: ::before, ::after e .camada.
   Hoje as camadas são SVGs de traço (placeholders). Quando o ícone do Blender
   chegar, basta trocar as background-image por icones/<slug>/<camada>.png —
   a animação continua a mesma. Cada bloco = um ícone. Movimentos declarados
   como @keyframes pra servir tanto no hover da célula quanto no loop do pop-up. */
.icone::before,.icone::after,.icone .camada{content:"";position:absolute;inset:0;background:center/contain no-repeat;transition:transform .5s var(--ease)}

/* ── dia 1 · editor de vídeo: tesoura desce e fecha, filme se parte ─────── */
.ic-editor-video::before{background-image:url(icones/_placeholder/filme-esq.svg)}
.ic-editor-video::after{background-image:url(icones/_placeholder/filme-dir.svg)}
.ic-editor-video .camada{background-image:url(icones/_placeholder/tesoura.svg);transform-origin:50% 18%}
@keyframes ev-esq{to{transform:translate(-9%,2%) rotate(-7deg)}}
@keyframes ev-dir{to{transform:translate(9%,2%) rotate(7deg)}}
@keyframes ev-tes{40%{transform:translateY(10%) scaleX(.55)}to{transform:translateY(10%) scaleX(1)}}
.cel:hover .ic-editor-video::before,.ativa .ic-editor-video::before{animation:ev-esq .5s var(--ease) forwards}
.cel:hover .ic-editor-video::after,.ativa .ic-editor-video::after{animation:ev-dir .5s var(--ease) forwards}
.cel:hover .ic-editor-video .camada,.ativa .ic-editor-video .camada{animation:ev-tes .6s ease-out forwards}
.projeto__icone .ic-editor-video::before{animation:ev-esq 2.2s var(--ease) infinite alternate}
.projeto__icone .ic-editor-video::after{animation:ev-dir 2.2s var(--ease) infinite alternate}
.projeto__icone .ic-editor-video .camada{animation:ev-tes 2.2s ease-in-out infinite alternate}

/* ── dia 2 · capivara: orelhas abanam, corpo dá um pulinho ─────────────── */
.ic-capivara::before{background-image:url(icones/_placeholder/capivara-corpo.svg)}
.ic-capivara .camada{background-image:url(icones/_placeholder/capivara-orelhas.svg);transform-origin:50% 40%}
@keyframes cp-orelha{30%{transform:rotate(-8deg)}60%{transform:rotate(7deg)}to{transform:rotate(0)}}
@keyframes cp-pulo{40%{transform:translateY(-6%)}to{transform:translateY(0)}}
.cel:hover .ic-capivara .camada,.ativa .ic-capivara .camada{animation:cp-orelha .7s var(--ease)}
.cel:hover .ic-capivara::before,.ativa .ic-capivara::before{animation:cp-pulo .5s var(--ease)}
.projeto__icone .ic-capivara .camada{animation:cp-orelha 1.8s var(--ease) infinite}
.projeto__icone .ic-capivara::before{animation:cp-pulo 1.8s var(--ease) infinite}

/* ── dia 3 · gerador de mídia: play pulsa e dispara ───────────────────── */
.ic-gerador-midia::before{background-image:url(icones/_placeholder/midia-tela.svg)}
.ic-gerador-midia .camada{background-image:url(icones/_placeholder/midia-play.svg);transform-origin:50% 47%}
@keyframes gm-play{35%{transform:scale(1.35)}to{transform:scale(1)}}
@keyframes gm-tela{50%{transform:scale(1.03)}to{transform:scale(1)}}
.cel:hover .ic-gerador-midia .camada,.ativa .ic-gerador-midia .camada{animation:gm-play .6s var(--ease)}
.cel:hover .ic-gerador-midia::before,.ativa .ic-gerador-midia::before{animation:gm-tela .6s var(--ease)}
.projeto__icone .ic-gerador-midia .camada{animation:gm-play 1.6s var(--ease) infinite}

/* ── dia 4 · reembolso: moeda sobe e gira, documento treme de leve ─────── */
.ic-reembolso::before{background-image:url(icones/_placeholder/reembolso-doc.svg)}
.ic-reembolso .camada{background-image:url(icones/_placeholder/reembolso-moeda.svg);transform-origin:70% 66%}
@keyframes rb-moeda{50%{transform:translateY(-14%) rotateY(180deg)}to{transform:translateY(0) rotateY(360deg)}}
@keyframes rb-doc{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}to{transform:rotate(0)}}
.cel:hover .ic-reembolso .camada,.ativa .ic-reembolso .camada{animation:rb-moeda .8s var(--ease)}
.cel:hover .ic-reembolso::before,.ativa .ic-reembolso::before{animation:rb-doc .5s ease-in-out}
.projeto__icone .ic-reembolso .camada{animation:rb-moeda 2s var(--ease) infinite}

/* ── dia 5 · meu site: cursor passeia pela grade e clica ──────────────── */
.ic-site::before{background-image:url(icones/_placeholder/site-grade.svg)}
.ic-site .camada{background-image:url(icones/_placeholder/site-cursor.svg)}
@keyframes st-cursor{40%{transform:translate(18%,14%)}55%{transform:translate(18%,14%) scale(.85)}70%{transform:translate(18%,14%) scale(1)}to{transform:translate(0,0)}}
.cel:hover .ic-site .camada,.ativa .ic-site .camada{animation:st-cursor 1.1s var(--ease)}
.projeto__icone .ic-site .camada{animation:st-cursor 2.6s var(--ease) infinite}

/* ── sprites do Blender: tamanho e deslocamento por ícone (vazam do cartão) ── */
.ic-editor-video.icone--sprite{--w:128%;--dx:5%;--dy:-1%}
.ic-capivara.icone--sprite{--w:151%;--dx:-3%;--dy:9%}
.ic-maquina-criativos.icone--sprite{--w:124%;--dx:7%;--dy:3%}
.ic-reembolso-saude.icone--sprite{--w:106%;--dx:0%;--dy:8%}
.ic-calendario-projetos.icone--sprite{--w:120%;--dx:8%;--dy:-6%}