/* Arte desenhada (arte.js): traço, cores, versões em traço e negativo, e a vida dos desenhos */

.arte { display: block; width: 100%; height: auto; overflow: visible; }
.arte .t, .arte .t2 { stroke: var(--l-tinta); stroke-linejoin: round; stroke-linecap: round; }
.arte .t { stroke-width: 4; }
.arte .t2 { stroke-width: 3; }
.arte .t3 { stroke-width: 6; }
.arte .t2 path, .arte .t2 ellipse, .arte .t2 circle, .arte .t2 rect { stroke: var(--l-tinta); stroke-width: 3; stroke-linejoin: round; }
.arte .fn { fill: none; }
.arte .f1 { fill: var(--l-1); }
.arte .f2 { fill: var(--l-2); }
.arte .f3 { fill: var(--l-3); }
.arte .f4 { fill: var(--l-4); }
.arte .f5 { fill: var(--l-5); }
.arte .ft { fill: var(--l-tampa, var(--l-3)); }
.arte .fb { fill: var(--l-brilho); }
.arte .sb { fill: var(--l-tinta); opacity: .16; }
.arte .br { fill: none; stroke: var(--l-brilho); stroke-width: 6; stroke-linecap: round; opacity: .9; }

.arte .lg-nome { font-family: var(--display); font-weight: var(--display-peso); fill: var(--l-letra); }
.arte .lg-nome-sombra { fill: var(--l-sombra-letra); }
.arte .lg-sub { font-family: var(--display); font-weight: var(--display-peso); fill: var(--l-sub); }
.arte .lg-sub-fita { fill: var(--l-fita-texto); }
.arte .lg-linha { fill: none; stroke: var(--l-sub); stroke-width: 5; stroke-linecap: round; }
.arte .lg-arabesco { stroke-width: 3.5; }
.arte .lg-regua { fill: none; stroke-width: 4; stroke-linecap: round; }
.arte .lg-regua-1 { stroke: var(--l-1); }
.arte .lg-regua-2 { stroke: var(--l-2); }
.arte .lg-lema { font-family: var(--texto); font-weight: 800; font-size: 15px; letter-spacing: .1em; fill: var(--l-letra); }

/* Traço de uma cor: tudo vira papel, o desenho fica só no nanquim (carimbo, bordado, gráfica barata) */
.arte-traco {
  --l-1: var(--l-papel); --l-2: var(--l-papel); --l-3: var(--l-papel); --l-4: var(--l-papel); --l-5: var(--l-papel);
  --l-tampa: var(--l-papel); --l-brilho: var(--l-papel);
  --l-letra: var(--l-tinta); --l-sub: var(--l-tinta); --l-sombra-letra: transparent; --l-fita-texto: var(--l-tinta);
}
.arte-traco .sb, .arte-traco .br { display: none; }
.arte-traco .lg-regua-1, .arte-traco .lg-regua-2 { stroke: var(--l-tinta); }
/* Negativo: nanquim claro sobre fundo escuro */
.arte-negativo { --l-tinta: var(--sobre-escuro); --l-papel: var(--escuro); }
/* Carimbo sobre a cor principal (tampa de caixa, toldo) */
.arte-carimbo { --l-tinta: var(--branco); --l-papel: var(--primaria); }

/* ---------- Vida: só onde houver .arte-viva (ou ao passar o mouse em .vivo-ao-passar) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .arte .lg-vapor path, .arte .lg-chama, .arte .lg-gotas path, .arte .lg-folhas, .arte .lg-sol, .arte .lg-brilhos, .arte .lg-bandeira {
    transform-box: fill-box;
  }
  :is(.arte-viva, .vivo-ao-passar:hover) .lg-vapor path { animation: arte-vapor 2.8s ease-in-out infinite; }
  :is(.arte-viva, .vivo-ao-passar:hover) .lg-vapor path:nth-child(2) { animation-delay: .9s; }
  :is(.arte-viva, .vivo-ao-passar:hover) .lg-vapor path:nth-child(3) { animation-delay: 1.8s; }
  :is(.arte-viva, .vivo-ao-passar:hover) .lg-chama { transform-origin: 50% 100%; animation: arte-chama .55s ease-in-out infinite alternate; }
  :is(.arte-viva, .vivo-ao-passar:hover) .lg-gotas path { transform-origin: 50% 0; animation: arte-gota 2.4s ease-in-out infinite; }
  :is(.arte-viva, .vivo-ao-passar:hover) .lg-gotas path:nth-child(2) { animation-delay: .6s; }
  :is(.arte-viva, .vivo-ao-passar:hover) .lg-gotas path:nth-child(3) { animation-delay: 1.2s; }
  :is(.arte-viva, .vivo-ao-passar:hover) .lg-folhas { transform-origin: 50% 100%; animation: arte-balanca 3s ease-in-out infinite; }
  :is(.arte-viva, .vivo-ao-passar:hover) .lg-sol { transform-origin: 50% 50%; animation: arte-gira 14s linear infinite; }
  :is(.arte-viva, .vivo-ao-passar:hover) .lg-brilhos { transform-origin: 50% 50%; animation: arte-pisca 1.6s ease-in-out infinite; }
  :is(.arte-viva, .vivo-ao-passar:hover) .lg-bandeira { transform-origin: 0 50%; animation: arte-tremula 1.2s ease-in-out infinite alternate; }

  /* Entrada da logo grande: símbolo pula, nome cai, faixa abre, lema aparece */
  .anima-entrada .lg-simbolo, .anima-entrada .lg-nome-g, .anima-entrada .lg-sub-g, .anima-entrada .lg-lema { transform-box: fill-box; transform-origin: 50% 50%; }
  .js .anima-entrada:not(.visivel) :is(.lg-simbolo, .lg-nome-g, .lg-sub-g, .lg-lema) { opacity: 0; }
  .anima-entrada.visivel .lg-simbolo { animation: arte-pula .8s cubic-bezier(.3, 1.5, .5, 1) both; }
  .anima-entrada.visivel .lg-nome-g { animation: arte-cai .7s cubic-bezier(.3, 1.4, .5, 1) .25s both; }
  .anima-entrada.visivel .lg-sub-g { animation: arte-abre .6s cubic-bezier(.3, 1.5, .5, 1) .5s both; }
  .anima-entrada.visivel .lg-lema { animation: arte-surge .5s ease-out .75s both; }
}

@keyframes arte-vapor { 0% { opacity: 0; transform: translateY(8px); } 35% { opacity: .9; } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes arte-chama { from { transform: scaleY(.86) skewX(-3deg); } to { transform: scaleY(1.07) skewX(3deg); } }
@keyframes arte-gota { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.25); } }
@keyframes arte-balanca { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes arte-gira { to { transform: rotate(360deg); } }
@keyframes arte-pisca { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.85); } }
@keyframes arte-tremula { from { transform: skewY(-6deg) scaleX(.92); } to { transform: skewY(6deg) scaleX(1.04); } }
@keyframes arte-pula { 0% { opacity: 0; transform: scale(.2) rotate(-14deg); } 60% { opacity: 1; transform: scale(1.12) rotate(4deg); } 100% { transform: none; } }
@keyframes arte-cai { 0% { opacity: 0; transform: translateY(-40px) scaleY(1.2); } 70% { opacity: 1; transform: translateY(4px) scaleY(.92); } 100% { transform: none; } }
@keyframes arte-abre { 0% { opacity: 0; transform: scaleX(0); } 100% { opacity: 1; transform: none; } }
@keyframes arte-surge { from { opacity: 0; } to { opacity: 1; } }