/* ==========================================================================
   iago · componente da logo + animações usadas no site
   --------------------------------------------------------------------------
   Versão enxuta do motion lab (logo-anim): geometria canônica via
   <template> no index.html e aqui só o CSS de componente + os escopos que o
   site usa: boot3 (intro), idle, thinking, wave e success.

   Empilhamento de transformações:
     .iago__body > tudo   .iago__head > visor + olhos
     .iago__look > olhar  .iago__blink > piscar  .iago__eye--* > pop
   ========================================================================== */

:root {
  --e-draw: cubic-bezier(.4, .05, .3, 1);
  --e-pop: cubic-bezier(.34, 1.56, .64, 1);
  --e-soft: cubic-bezier(.22, 1, .36, 1);
  --e-io: cubic-bezier(.65, 0, .35, 1);
  --e-snap: cubic-bezier(.72, 0, .18, 1);
  --e-bounce: cubic-bezier(.3, 1.5, .5, 1);
}

.anim {
  --cycle: 6s;
  --t: calc(var(--cycle) / var(--speed, 1));
}

/* --- componente ---------------------------------------------------------- */

.iago {
  --len-visor: 487;
  --len-g: 120;
  --len-o: 126;
  --len-eye-i: 40;
  --len-eye-a: 67;

  --ink: #ffffff;
  --accent: #6ee7b7;
  --accent-2: #7dd3fc;
  --blush: #ff8fb8;

  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.iago *,
.iago *::before {
  transform-box: view-box;
}

.iago__visor,
.iago__eye,
.iago__eye--i2,
.iago__g,
.iago__o {
  fill: none;
  stroke: var(--ink);
}

.iago__visor--glow {
  stroke: var(--accent);
  stroke-width: 15;
  opacity: 0;
  filter: blur(7px);
}

.iago__visor--trace {
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
  opacity: 0;
}

.iago__o { transform-origin: 287.507px 62.5px; }

.iago__body  { transform-origin: 156.5px 62.5px; }
.iago__head  { transform-origin: 93px 62.5px; }
.iago__look  { transform-origin: 93px 62.5px; }
.iago__blink { transform-origin: 93px 62.5px; }
.iago__word  { transform-origin: 255.5px 62.5px; }

.iago__visor  { transform-origin: 93px 62.5px; }
.iago__eye--i { transform-origin: 56.5067px 62.5px; }
.iago__eye--a { transform-origin: 126.091px 67.75px; }
.iago__eye--i2 {
  transform-origin: 126.091px 62.5px;
  opacity: 0;
}
.iago__g { transform-origin: 223.507px 62.5px; }

.iago__fx-happy {
  fill: none;
  stroke: var(--ink);
  transform-box: fill-box;
  transform-origin: center bottom;
  opacity: 0;
}

.iago__fx-hearteye {
  fill: var(--blush);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.iago__blush {
  fill: var(--blush);
  stroke: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.iago__fx-check {
  fill: none;
  stroke: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.iago__fx-xeye {
  fill: none;
  stroke: #ff7b7b;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.iago__fx-shape {
  fill: var(--accent);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
}

.iago__fx-stroke {
  fill: none;
  stroke: var(--ink);
  transform-box: fill-box;
  transform-origin: center;
}

.iago__spark,
.iago__z,
.iago__fheart,
.iago__sweat { opacity: 0; }

.iago__spark--1 { transform: translate(16px, 30px); }
.iago__spark--2 { transform: translate(176px, 20px); }
.iago__spark--3 { transform: translate(249px, 25px); }
.iago__spark--4 { transform: translate(305px, 96px); }
.iago__spark--5 { transform: translate(197px, 103px); }

.iago__z--1 { transform: translate(189px, 47px); }
.iago__z--2 { transform: translate(205px, 30px); }
.iago__z--3 { transform: translate(222px, 12px); }

.iago__fheart--1 { transform: translate(58px, 26px); }
.iago__fheart--2 { transform: translate(93px, 17px); }
.iago__fheart--3 { transform: translate(128px, 26px); }

.iago__sweat { transform: translate(189px, 34px); }
.iago__sweat .iago__fx-shape { fill: var(--accent-2); }

.iago__fheart .iago__fx-shape,
.iago__fx-hearteye { fill: var(--blush); }

/* --- modo somente rosto --------------------------------------------------- */

.iago--face .iago__word { display: none; }

.anim--happy .iago--face .iago__body,
.anim--wave .iago--face .iago__body {
  transform-origin: 93px 122px;
}

.iago--face .iago__z--1 { transform: translate(152px, 26px); }
.iago--face .iago__z--2 { transform: translate(165px, 10px); }
.iago--face .iago__z--3 { transform: translate(178px, -6px); }
.iago--face .iago__sweat { transform: translate(170px, 26px); }
.iago--face .iago__spark--3 { transform: translate(172px, 104px); }
.iago--face .iago__spark--4 { transform: translate(14px, 104px); }
.iago--face .iago__spark--5 { transform: translate(96px, 4px); }

/* ==========================================================================
   BOOT III · intro do site
   Power-on CRT: o visor abre do centro, os olhos estalam, o G desliza e o O
   quica, quique de alegria com flash e faíscas e a piscada final vira "A".
   A formação roda na velocidade original (~3,3s) em iteração única; depois o
   logo fica formado segurando (fill forwards) até a cortina subir.
   ========================================================================== */

.anim--boot3 { --cycle: 6s; --accent: #a78bfa; }

.anim--boot3 .iago__body {
  transform-origin: 156.5px 62.5px;
  animation: boot3-body var(--t) var(--e-pop) 1 both;
}

.anim--boot3 .iago__visor--glow {
  animation: boot3-flash var(--t) var(--e-io) 1 both;
}

.anim--boot3 .iago__head {
  animation: boot3-head var(--t) var(--e-io) 1 both;
}

.anim--boot3 .iago__eye--i {
  animation: boot3-eye var(--t) var(--e-pop) 1 both;
}

.anim--boot3 .iago__eye--i2 {
  animation: boot3-right var(--t) var(--e-pop) 1 both;
}

.anim--boot3 .iago__eye--a {
  animation: boot3-wink var(--t) var(--e-pop) 1 both;
}

.anim--boot3 .iago__g {
  animation: boot3-g var(--t) var(--e-pop) 1 both;
}

.anim--boot3 .iago__o {
  animation: boot3-o var(--t) var(--e-bounce) 1 both;
}

.anim--boot3 .iago__spark--1,
.anim--boot3 .iago__spark--4 { opacity: 1; }

.anim--boot3 .iago__spark--1 .iago__fx-shape,
.anim--boot3 .iago__spark--4 .iago__fx-shape {
  animation: boot3-spark var(--t) var(--e-pop) 1 both;
}

.anim--boot3 .iago__spark--4 .iago__fx-shape {
  animation-delay: calc(var(--t) * .05);
}

@keyframes boot3-body {
  0%, 1.4% { opacity: 0; transform: scaleY(.04) scaleX(1.15) }
  4.3% { opacity: 1; transform: scaleY(.04) scaleX(1.15) }
  8.7% { transform: scaleY(1.12) scaleX(.94) }
  11.6% { transform: scaleY(.94) scaleX(1.04) }
  14.5%, 40% { opacity: 1; transform: scaleY(1) scaleX(1) }
  45% { transform: translateY(-12px) scaleY(1.06) scaleX(.96) }
  51% { transform: translateY(0) scaleY(.94) scaleX(1.05) }
  55%, 100% { opacity: 1; transform: scaleY(1) scaleX(1) }
}

@keyframes boot3-head {
  0%, 8.7% { transform: rotate(0deg) }
  11.6% { transform: rotate(-2deg) }
  14.5% { transform: rotate(1.5deg) }
  17.4%, 100% { transform: rotate(0deg) }
}

@keyframes boot3-eye {
  0%, 11.6% { opacity: 0; transform: scale(0) }
  16% { opacity: 1; transform: scale(1.3) }
  19.6% { transform: scale(.92) }
  22.4%, 100% { opacity: 1; transform: scale(1) }
}

@keyframes boot3-g {
  0%, 21.7% { opacity: 0; transform: translateX(30px) }
  29% { opacity: 1; transform: translateX(-4px) }
  33.3%, 100% { opacity: 1; transform: translateX(0) }
}

@keyframes boot3-o {
  0%, 27.5% { opacity: 0; transform: scale(0) rotate(-90deg) }
  34.8% { opacity: 1; transform: scale(1.25) rotate(0deg) }
  39.1% { transform: scale(.9) rotate(0deg) }
  43.5%, 100% { opacity: 1; transform: scale(1) rotate(0deg) }
}

@keyframes boot3-flash {
  0%, 2.9% { opacity: 0 }
  5.8% { opacity: .9 }
  11.6% { opacity: .2 }
  43.5% { opacity: .2 }
  47.8% { opacity: .6 }
  55%, 100% { opacity: 0 }
}

@keyframes boot3-spark {
  0%, 42% { opacity: 0; transform: scale(0) rotate(-50deg) }
  46.3% { opacity: 1; transform: scale(1.25) rotate(0deg) }
  50.7% { opacity: 1; transform: scale(.9) rotate(16deg) }
  58%, 100% { opacity: 0; transform: scale(0) rotate(50deg) }
}

/* olho direito abre como "I" e, depois do quique, pisca e vira o "A",
   ficando fechado enquanto o logo formado segura */
@keyframes boot3-right {
  0%, 11.6% { opacity: 0; transform: scale(0) }
  16% { opacity: 1; transform: scale(1.3) }
  19.6% { transform: scale(.92) }
  22.4%, 56% { opacity: 1; transform: scale(1) }
  60%, 100% { opacity: 0; transform: scale(1) }
}

@keyframes boot3-wink {
  0%, 56% { opacity: 0; transform: scaleY(.4) }
  60%, 100% { opacity: 1; transform: scaleY(1) }
}

/* ==========================================================================
   IDLE · repouso do assistente (nó central do circuito, avatar do chat)
   ========================================================================== */

.anim--idle { --cycle: 6s; }

/* empurrão de cabeça da piscada vai no body (wrapper livre); a respiração
   fica no head, assim os dois transforms não brigam */
.anim--idle .iago__body {
  animation: wink-thrust var(--t) var(--e-soft) infinite;
}

.anim--idle .iago__head {
  animation: idle-breath var(--t) var(--e-io) infinite;
}

.anim--idle .iago__blink { animation: none; }

/* piscada I→A compartilhada, na mesma janela do empurrão de cabeça */
.anim--idle .iago__eye--i2 { animation: swap-i2 var(--t) linear infinite; }
.anim--idle .iago__eye--a { animation: swap-a var(--t) linear infinite; }

.anim--idle .iago__look {
  animation: idle-look var(--t) var(--e-snap) infinite;
}

.anim--idle .iago__word {
  animation: idle-word var(--t) var(--e-io) infinite;
}

@keyframes idle-breath {
  0%, 100% { transform: translateY(0) scale(1) }
  25% { transform: translateY(-3px) scale(1.02) }
  50% { transform: translateY(0) scale(1) }
  75% { transform: translateY(-2px) scale(1.014) }
}

@keyframes idle-look {
  0%, 18% { transform: translate(0, 0) }
  21%, 38% { transform: translate(5px, -1.5px) }
  41%, 62% { transform: translate(-4.5px, .8px) }
  65%, 100% { transform: translate(0, 0) }
}

@keyframes idle-word {
  0%, 100% { transform: translateY(0) }
  30% { transform: translateY(-2px) }
  60% { transform: translateY(0) }
  80% { transform: translateY(-1.4px) }
}

/* trocas de olho e empurrão de cabeça vindos do motion lab */
@keyframes swap-i2 {
  0%, 86%, 96%, 100% { opacity: 1; transform: scaleY(1) }
  89%, 93% { opacity: 0; transform: scaleY(.08) }
}

@keyframes swap-a {
  0%, 86%, 96%, 100% { opacity: 0; transform: scaleY(.4) }
  89%, 93% { opacity: 1; transform: scaleY(1) }
}

@keyframes wink-thrust {
  0%, 84%, 100% { transform: rotate(0deg) translate(0, 0) }
  88% { transform: rotate(5deg) translate(3px, 1.5px) }
  91% { transform: rotate(8deg) translate(5px, 3px) scale(1.02) }
  95% { transform: rotate(2deg) translate(1px, 0) }
}

/* ==========================================================================
   THINKING · agente analisando (loader de traço no visor)
   ========================================================================== */

.anim--thinking {
  --cycle: 3.4s;
  --accent: #a78bfa;
}

.anim--thinking .iago__visor--main { opacity: .34; }
.anim--thinking .iago__word { opacity: .5; }

.anim--thinking .iago__visor--trace {
  opacity: 1;
  stroke-dasharray: 108 379;
  animation: thinking-trace var(--t) linear infinite;
}

.anim--thinking .iago__head {
  animation: thinking-head var(--t) var(--e-io) infinite;
}

.anim--thinking .iago__look {
  animation: thinking-look var(--t) var(--e-soft) infinite;
}

.anim--thinking .iago__blink { animation: none; }

@keyframes thinking-trace {
  from { stroke-dashoffset: 0 }
  to { stroke-dashoffset: -487 }
}

@keyframes thinking-head {
  0%, 100% { transform: rotate(-3.5deg) translateY(-1px) }
  50% { transform: rotate(-2deg) translateY(-2.5px) }
}

@keyframes thinking-look {
  0%, 12% { transform: translate(-6px, -6px) }
  50% { transform: translate(-8px, -7px) }
  88%, 100% { transform: translate(-6px, -6px) }
}

/* ==========================================================================
   WAVE · cumprimento (passo 01 da jornada)
   ========================================================================== */

.anim--wave {
  --cycle: 3.8s;
  --accent: #ffec6d;
}

.anim--wave .iago__body {
  transform-origin: 156.5px 120px;
  animation: wave-body var(--t) var(--e-bounce) infinite;
}

.anim--wave .iago__head {
  animation: wave-head var(--t) var(--e-soft) infinite;
}

.anim--wave .iago__look {
  animation: wave-look var(--t) var(--e-snap) infinite;
}

.anim--wave .iago__blink { animation: none; }

.anim--wave .iago__o {
  transform-origin: 287.507px 62.5px;
  animation: wave-o var(--t) var(--e-pop) infinite;
}

.anim--wave .iago__g {
  animation: wave-g var(--t) var(--e-pop) infinite;
}

.anim--wave .iago__spark--2,
.anim--wave .iago__spark--3 { opacity: 1; }

.anim--wave .iago__spark--2 .iago__fx-shape,
.anim--wave .iago__spark--3 .iago__fx-shape {
  animation: wave-spark var(--t) var(--e-pop) infinite;
}

.anim--wave .iago__spark--3 .iago__fx-shape { animation-delay: calc(var(--t) * .18); }

@keyframes wave-body {
  0%, 100% { transform: rotate(0deg) }
  10% { transform: rotate(-6.5deg) }
  24% { transform: rotate(6deg) }
  38% { transform: rotate(-5.5deg) }
  52% { transform: rotate(4.5deg) }
  66% { transform: rotate(-2deg) }
  80% { transform: rotate(0deg) }
}

@keyframes wave-head {
  0%, 100% { transform: rotate(0deg) translateY(0) }
  10% { transform: rotate(3.2deg) translateY(-1.5px) }
  24% { transform: rotate(-3deg) translateY(-1.5px) }
  38% { transform: rotate(2.6deg) translateY(-1px) }
  52% { transform: rotate(-2deg) translateY(-1px) }
  66% { transform: rotate(1deg) translateY(0) }
}

@keyframes wave-look {
  0%, 12% { transform: translate(0, 0) }
  20%, 60% { transform: translate(6px, -1px) }
  72%, 100% { transform: translate(0, 0) }
}

@keyframes wave-o {
  0%, 100% { transform: translateY(0) scale(1) }
  14% { transform: translateY(-11px) scale(1.05) }
  30% { transform: translateY(0) scale(.97, 1.03) }
  44% { transform: translateY(-8px) scale(1.03) }
  60% { transform: translateY(0) scale(1) }
  72% { transform: translateY(-4px) scale(1.01) }
  84% { transform: translateY(0) scale(1) }
}

@keyframes wave-g {
  0%, 100% { transform: translateY(0) rotate(0deg) }
  20% { transform: translateY(-4px) rotate(-4deg) }
  48% { transform: translateY(-2px) rotate(3deg) }
  72% { transform: translateY(0) rotate(0deg) }
}

@keyframes wave-spark {
  0%, 6% { opacity: 0; transform: scale(0) rotate(-50deg) }
  13% { opacity: 1; transform: scale(1.2) rotate(0deg) }
  20% { opacity: 1; transform: scale(.9) rotate(16deg) }
  30%, 100% { opacity: 0; transform: scale(0) rotate(50deg) }
}

/* ==========================================================================
   SUCCESS · deu certo (passo 03 e resposta do agente)
   ========================================================================== */

.anim--success {
  --cycle: 6s;
  --accent: #6ee7b7;
}

.anim--success .iago__head {
  animation: success-head var(--t) var(--e-pop) infinite;
}

.anim--success .iago__eye {
  animation: success-eye-out var(--t) var(--e-io) infinite;
}

.anim--success .iago__fx-happy {
  animation: success-happy var(--t) var(--e-pop) infinite;
}

.anim--success .iago__fx-check {
  stroke-dasharray: 28;
  animation: success-check var(--t) var(--e-draw) infinite;
}

.anim--success .iago__blush {
  animation: success-blush var(--t) var(--e-io) infinite;
}

.anim--success .iago__visor--glow {
  animation: success-glow var(--t) var(--e-io) infinite;
}

.anim--success .iago__g { animation: success-letter var(--t) var(--e-pop) infinite; }

.anim--success .iago__o {
  animation: success-letter var(--t) var(--e-pop) infinite;
  animation-delay: calc(var(--t) * .05);
}

.anim--success .iago__spark--1,
.anim--success .iago__spark--2,
.anim--success .iago__spark--3,
.anim--success .iago__spark--4 { opacity: 1; }

.anim--success .iago__spark--1 .iago__fx-shape,
.anim--success .iago__spark--2 .iago__fx-shape,
.anim--success .iago__spark--3 .iago__fx-shape,
.anim--success .iago__spark--4 .iago__fx-shape {
  animation: success-spark var(--t) var(--e-pop) infinite;
}

.anim--success .iago__spark--2 .iago__fx-shape { animation-delay: calc(var(--t) * .04); }
.anim--success .iago__spark--3 .iago__fx-shape { animation-delay: calc(var(--t) * .08); }
.anim--success .iago__spark--4 .iago__fx-shape { animation-delay: calc(var(--t) * .12); }

@keyframes success-head {
  0%, 8% { transform: rotate(0deg) translateY(0) }
  15% { transform: rotate(5deg) translateY(4px) }
  23% { transform: rotate(-3.5deg) translateY(-4px) }
  30% { transform: rotate(1.2deg) translateY(-1px) }
  37%, 100% { transform: rotate(0deg) translateY(0) }
}

@keyframes success-eye-out {
  0%, 10% { opacity: 1 }
  13%, 89% { opacity: 0 }
  93%, 100% { opacity: 1 }
}

@keyframes success-happy {
  0%, 13% { opacity: 0; transform: scaleY(.35) }
  17% { opacity: 1; transform: scaleY(1.16) }
  21% { transform: scaleY(.94) }
  26%, 86% { opacity: 1; transform: scaleY(1) }
  89%, 100% { opacity: 0; transform: scaleY(.35) }
}

@keyframes success-check {
  0%, 18% { opacity: 1; stroke-dashoffset: 28; transform: scale(.6) }
  28% { stroke-dashoffset: 0; transform: scale(1.2) }
  33%, 84% { opacity: 1; stroke-dashoffset: 0; transform: scale(1) }
  91%, 100% { opacity: 0; stroke-dashoffset: 0; transform: scale(.75) }
}

@keyframes success-blush {
  0%, 14% { opacity: 0 }
  24%, 84% { opacity: .5 }
  92%, 100% { opacity: 0 }
}

@keyframes success-glow {
  0%, 22% { opacity: 0 }
  30% { opacity: .6 }
  48%, 100% { opacity: 0 }
}

@keyframes success-letter {
  0%, 30% { transform: translateY(0) scale(1) }
  37% { transform: translateY(-9px) scale(1.13) }
  45% { transform: translateY(0) scale(.96, 1.04) }
  52% { transform: translateY(-2px) scale(1.02) }
  60%, 100% { transform: translateY(0) scale(1) }
}

@keyframes success-spark {
  0%, 34% { opacity: 0; transform: scale(0) rotate(-55deg) }
  40% { opacity: 1; transform: scale(1.25) rotate(-5deg) }
  46% { opacity: 1; transform: scale(.92) rotate(14deg) }
  56%, 100% { opacity: 0; transform: scale(0) rotate(50deg) }
}

/* ==========================================================================
   LOOK · logo completa olhando em volta (header/footer)
   ========================================================================== */

.anim--look { --cycle: 9s; }

.anim--look .iago__look {
  animation: look-eyes var(--t) var(--e-snap) infinite;
}

.anim--look .iago__head {
  animation: look-head var(--t) var(--e-soft) infinite;
  animation-delay: calc(var(--t) * .012);
}

.anim--look .iago__blink { animation: none; }

.anim--look .iago__body {
  animation: look-bob var(--t) var(--e-io) infinite;
}

@keyframes look-eyes {
  0%, 7% { transform: translate(0, 0) }
  13%, 23% { transform: translate(-15px, -1px) }
  29%, 38% { transform: translate(-12px, -8px) }
  45%, 54% { transform: translate(12px, -8px) }
  60%, 68% { transform: translate(15px, 2px) }
  74%, 82% { transform: translate(9px, 7px) }
  90%, 100% { transform: translate(0, 0) }
}

@keyframes look-head {
  0%, 9% { transform: rotate(0deg) translate(0, 0) }
  15%, 23% { transform: rotate(-3deg) translate(-3px, 0) }
  29%, 38% { transform: rotate(-3.5deg) translate(-3px, -2.5px) }
  45%, 54% { transform: rotate(3.5deg) translate(3px, -2.5px) }
  60%, 68% { transform: rotate(3deg) translate(3px, 0) }
  74%, 82% { transform: rotate(2deg) translate(2px, 2.5px) }
  90%, 100% { transform: rotate(0deg) translate(0, 0) }
}

@keyframes look-bob {
  0%, 100% { transform: translateY(0) }
  33% { transform: translateY(-2px) }
  66% { transform: translateY(1px) }
}

/* --- movimento reduzido: rosto parado e completo -------------------------- */

@media (prefers-reduced-motion: reduce) {
  .anim .iago__spark,
  .anim .iago__z,
  .anim .iago__fheart,
  .anim .iago__sweat,
  .anim .iago__fx-xeye { opacity: 0 !important; }

  .anim .iago__eye--i2 { opacity: 0 !important; }

  .anim .iago,
  .anim .iago * { animation: none !important; }
}