/* ============================================================
   Tavares Tech — Animations CSS
   Portado 1:1 do globals.css do projeto Next.js
   ============================================================ */

/* (A regra global do logo e o bloco de reduced-motion ficam em main.css, pois
   este arquivo agora só carrega nas páginas com hero/carrossel.) */

/* Perf: pausa as animações contínuas do hero quando ele sai da viewport.
   Sem efeito visual — só afeta o que está fora da tela. Alternado por JS
   (reveal.js) via IntersectionObserver em elementos [data-anim-pause]. */
.tt-anim-paused,
.tt-anim-paused * {
  animation-play-state: paused !important;
}

/* ===== Portfolio carousel autoscroll =====
   O fim do pan é uma PORCENTAGEM da própria altura da imagem (--pan-end),
   calculada no PHP a partir da proporção do print e do "viewport". Assim o
   scroll fica correto em qualquer resolução, sem depender de altura em px. */
.portfolio-pan {
  animation: portfolio-pan var(--pan-dur, 18s) ease-in-out infinite alternate;
}
@keyframes portfolio-pan {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--pan-end, -60%)); }
}

.portfolio-progress {
  animation: portfolio-progress 7s linear forwards;
}
@keyframes portfolio-progress {
  from { width: 0%; }
  to   { width: 100%; }
}
[data-paused] .portfolio-progress { animation-play-state: paused; }

/* ===== Ondas do Hero ===== */
.wave-a { animation: wave-fwd 20s linear infinite; }
.wave-b { animation: wave-rev 15s linear infinite; }
.wave-c { animation: wave-fwd 11s linear infinite; }

@keyframes wave-fwd {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes wave-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ===== Cena do Hero (cursor → clique → site no ar) ===== */
.scene-cursor   { animation: scene-cursor   6s ease-in-out infinite; }
.scene-browser  { animation: scene-browser  6s ease-out    infinite; }
.scene-wire     { animation: scene-wire     6s ease-in-out infinite; }
.scene-live     { animation: scene-live     6s ease-out    infinite; }
.scene-goal     { animation: scene-goal     6s ease-out    infinite; }
.scene-flash    { animation: scene-flash    6s ease-out    infinite; }
.scene-confetti { animation: scene-confetti 6s ease-out    infinite; }
.scene-pop-a    { animation: scene-pop-a    6s ease-out    infinite; }
.scene-pop-b    { animation: scene-pop-b    6s ease-out    infinite; }

@keyframes scene-cursor {
  /* Mesmo trajeto da bola (de baixo-esquerda subindo até a aba), mas o cursor
     PARA na aba e "clica" (escala menor no press), depois sai de cena. */
  0%    { transform: translate(-14px, 300px) scale(1);    opacity: 0; animation-timing-function: ease-out; }
  4%    { opacity: 1; }
  7%    { transform: translate(6px, 150px) scale(1);      opacity: 1; animation-timing-function: ease-in; }
  10%   { transform: translate(40px, 92px) scale(1);      opacity: 1; }
  13%   { transform: translate(68px, 62px) scale(1);      opacity: 1; animation-timing-function: ease-out; } /* chega na aba */
  14.5% { transform: translate(68px, 62px) scale(0.82);   opacity: 1; } /* clica (press) */
  16%   { transform: translate(68px, 62px) scale(1);      opacity: 1; } /* solta */
  22%   { transform: translate(68px, 62px) scale(1);      opacity: 1; }
  28%   { transform: translate(98px, 38px) scale(1);      opacity: 0; } /* sai de cena */
  100%  { transform: translate(98px, 38px) scale(1);      opacity: 0; }
}
@keyframes scene-browser {
  /* Reação sutil ao clique (um "toque" para baixo), não mais o tranco do chute. */
  0%, 13%   { transform: translate(0, 0) scale(1); }
  15%       { transform: translate(0, 1px) scale(0.992); }
  17.5%     { transform: translate(0, 0) scale(1); }
  100%      { transform: translate(0, 0) scale(1); }
}
@keyframes scene-wire {
  0%, 12% { opacity: 1; }
  18%     { opacity: 0; }
  86%     { opacity: 0; }
  93%     { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes scene-live {
  0%, 12% { opacity: 0; transform: scale(0.96); }
  19%     { opacity: 1; transform: scale(1); }
  86%     { opacity: 1; transform: scale(1); }
  93%     { opacity: 0; transform: scale(0.96); }
  100%    { opacity: 0; transform: scale(0.96); }
}
@keyframes scene-goal {
  0%, 12% { opacity: 0; transform: scale(0.4); }
  15%     { opacity: 1; transform: scale(1.18); }
  19%     { transform: scale(1); }
  30%     { opacity: 1; transform: scale(1); }
  37%     { opacity: 0; transform: scale(0.9); }
  100%    { opacity: 0; transform: scale(0.9); }
}
@keyframes scene-flash {
  /* Ripple do clique: anel que expande a partir do ponto clicado e some. */
  0%, 13%  { opacity: 0;    transform: scale(0.3); }
  15%      { opacity: 0.85; transform: scale(0.6); }
  20%      { opacity: 0;    transform: scale(1.85); }
  100%     { opacity: 0;    transform: scale(1.85); }
}
@keyframes scene-confetti {
  0%, 12% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  13%     { opacity: 1; }
  21%     { transform: translate(calc(var(--dx) * 0.6), var(--dy)) rotate(calc(var(--r) * 0.6)); }
  26%     { opacity: 1; }
  30%     { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 54px)) rotate(var(--r)); }
  100%    { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 54px)) rotate(var(--r)); }
}
@keyframes scene-pop-a {
  0%, 13% { opacity: 0; transform: translate(28px, 30px) scale(0.9); }
  18%     { opacity: 1; }
  24%     { opacity: 1; transform: translate(0, 0) scale(1); }
  86%     { opacity: 1; transform: translate(0, 0) scale(1); }
  92%     { opacity: 0; transform: translate(28px, 30px) scale(0.9); }
  100%    { opacity: 0; transform: translate(28px, 30px) scale(0.9); }
}
@keyframes scene-pop-b {
  0%, 15% { opacity: 0; transform: translate(-16px, 22px) scale(0.82); }
  21%     { opacity: 1; }
  27%     { opacity: 1; transform: translate(0, 0) scale(1); }
  86%     { opacity: 1; transform: translate(0, 0) scale(1); }
  92%     { opacity: 0; transform: translate(-16px, 22px) scale(0.82); }
  100%    { opacity: 0; transform: translate(-16px, 22px) scale(0.82); }
}

/* Reduced motion: mantém o cursor do hero rodando (mesma escolha de design da
   cena antiga da bola, que ficava na lista de exceções do main.css). O restante
   das cenas já é tratado lá. */
@media (prefers-reduced-motion: reduce) {
  .scene-cursor { animation-duration: 6s !important; }
}