/* =========================================================
   ILUSTRAÇÕES ANIMADAS — base comum
   Os desenhos (SVG) ficam no index.html, dentro de cada
   seção. Aqui ficam o painel .art, os traços (.s, .g, .f…)
   e as animações reaproveitadas (.blink, .pulse, .spin…).
   As cores vêm das variáveis do tema: funcionam no claro
   e no escuro.
   ========================================================= */

/* painel de ilustração no topo dos cards (Serviços, Laboratório, Abordagem) */
.art {
  height: 120px; margin-bottom: 1.5rem;
  border-radius: .9rem; border: 1px solid var(--border);
  background:
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 19px, color-mix(in srgb, var(--gray) 10%, transparent) 19px 20px),
    repeating-linear-gradient(90deg, transparent 0 19px, color-mix(in srgb, var(--gray) 10%, transparent) 19px 20px);
  color: var(--accent);
  display: grid; place-items: center; overflow: hidden;
}
.art svg { width: 100%; height: 100%; }

/* traços e preenchimentos */
.ill .s  { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* traço na cor de destaque */
.ill .g  { fill: none; stroke: var(--gray); stroke-width: 1.4; stroke-linecap: round; opacity: .55; }           /* traço cinza */
.ill .f  { fill: currentColor; }                                                                                /* preenchimento de destaque */
.ill .ft { fill: #5fe0d8; }                                                                                     /* preenchimento verde-água */
.ill .fb { fill: color-mix(in srgb, var(--accent) 14%, transparent); }                                          /* fundo suave */
.ill .tx { fill: var(--cream); font-family: var(--mono); font-size: 11px; }
.ill .tx.dim { fill: var(--gray); }
.ill * { transform-box: fill-box; transform-origin: center; }

/* animações */
/* quadros duros com tempo linear: pisca igual a steps(1), mas sem recalcular a página a cada quadro */
@keyframes ill-blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: .15; } }
@keyframes ill-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes ill-spin { to { transform: rotate(360deg); } }
@keyframes ill-spin-rev { to { transform: rotate(-360deg); } }
@keyframes ill-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ill-grow { 0% { transform: scaleX(0); } 40%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes ill-pop { 0%, 8% { opacity: 0; transform: translateY(6px) scale(.9); } 18%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
@keyframes ill-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(46px); } }
@keyframes ill-wave { 0%, 100% { opacity: .15; } 30%, 60% { opacity: 1; } }
@keyframes ill-draw { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
@keyframes ill-rise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .8; } 100% { transform: translateY(-50px); opacity: 0; } }
@keyframes ill-bars { 0%, 100% { transform: scaleY(var(--a)); } 50% { transform: scaleY(var(--b)); } }
@keyframes ill-swing { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes ill-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.ill .blink   { animation: ill-blink 1.4s linear infinite; }        /* pisca (LEDs) */
.ill .pulse   { animation: ill-pulse 2.2s ease-out infinite; }        /* onda que expande */
.ill .spin    { animation: ill-spin 8s linear infinite; }             /* gira */
.ill .spin-r  { animation: ill-spin-rev 5s linear infinite; }         /* gira ao contrário */
.ill .bob     { animation: ill-bob 3.2s ease-in-out infinite; }       /* flutua */
.ill .grow    { transform-origin: left center; animation: ill-grow 3.6s ease-in-out infinite; } /* barra que cresce */
.ill .pop     { opacity: 0; animation: ill-pop 4.5s ease-in-out infinite; }  /* aparece e some */
.ill .scan    { animation: ill-scan 2.6s ease-in-out infinite; }      /* linha de escaneamento */
.ill .wave    { animation: ill-wave 1.8s ease-in-out infinite; }      /* sinal Wi-Fi */
.ill .draw    { stroke-dasharray: 260; animation: ill-draw 2.4s ease-in-out both; } /* traço desenhado uma vez ao aparecer: repetir redesenharia a cada quadro */
.ill .rise    { opacity: 0; animation: ill-rise 3.4s ease-out infinite; }  /* sobe e some */
.ill .bar     { transform-origin: bottom center; animation: ill-bars 2.4s ease-in-out infinite; } /* barras do gráfico */
.ill .swing   { transform-origin: top center; animation: ill-swing 2.6s ease-in-out infinite; }  /* balança */
.ill .line-in { opacity: 0; animation: ill-pop 6s ease-in-out infinite; }
/* atrasos para escalonar */
.ill .d1 { animation-delay: .3s; } .ill .d2 { animation-delay: .6s; } .ill .d3 { animation-delay: .9s; }
.ill .d4 { animation-delay: 1.2s; } .ill .d5 { animation-delay: 1.5s; } .ill .d6 { animation-delay: 1.8s; }

@media (prefers-reduced-motion: reduce) {
  .ill * { animation: none !important; opacity: 1 !important; }
}

/* ---------- pontos que correm por uma linha: --x0/--y0 até --x1/--y1, no próprio elemento ---------- */
.ill-mov { animation: ill-mov 2s linear infinite; }
@keyframes ill-mov { from { transform: translate(var(--x0), var(--y0)); } to { transform: translate(var(--x1), var(--y1)); } }
/* seta que acompanha a curva do desenho de contato (posição e ângulo calculados ao longo do traço) */
.ill-rota { animation: ill-rota 5s linear infinite; }
@keyframes ill-rota {
  0.00% { transform: translate(10.0px, 55.0px) rotate(-0.2deg); }
  4.17% { transform: translate(23.2px, 54.5px) rotate(-4.2deg); }
  8.33% { transform: translate(36.3px, 53.0px) rotate(-8.6deg); }
  12.50% { transform: translate(48.6px, 50.7px) rotate(-12.6deg); }
  16.67% { transform: translate(60.9px, 47.6px) rotate(-16.1deg); }
  20.83% { transform: translate(74.1px, 43.4px) rotate(-18.9deg); }
  25.00% { transform: translate(85.9px, 39.2px) rotate(-20.2deg); }
  29.17% { transform: translate(98.0px, 34.7px) rotate(-19.9deg); }
  33.33% { transform: translate(110.8px, 30.3px) rotate(-17.6deg); }
  37.50% { transform: translate(122.9px, 26.9px) rotate(-13.6deg); }
  41.67% { transform: translate(135.5px, 24.5px) rotate(-7.9deg); }
  45.83% { transform: translate(148.8px, 23.4px) rotate(-1.2deg); }
  50.00% { transform: translate(162.1px, 23.9px) rotate(5.7deg); }
  54.17% { transform: translate(174.4px, 25.8px) rotate(10.4deg); }
  58.33% { transform: translate(187.2px, 28.4px) rotate(12.6deg); }
  62.50% { transform: translate(199.8px, 31.4px) rotate(14.1deg); }
  66.67% { transform: translate(212.3px, 34.6px) rotate(14.4deg); }
  70.83% { transform: translate(225.5px, 37.8px) rotate(12.8deg); }
  75.00% { transform: translate(238.0px, 40.2px) rotate(8.8deg); }
  79.17% { transform: translate(250.7px, 41.5px) rotate(1.9deg); }
  83.33% { transform: translate(264.0px, 40.8px) rotate(-8.0deg); }
  87.50% { transform: translate(276.8px, 37.8px) rotate(-18.6deg); }
  91.67% { transform: translate(288.7px, 32.7px) rotate(-27.8deg); }
  95.83% { transform: translate(299.8px, 25.9px) rotate(-34.8deg); }
  100.00% { transform: translate(310.0px, 18.0px) rotate(-39.9deg); }
}