/* =====================================================================
   📱 ANIMAÇÕES RCS HOME V2 - 100% CSS PURO
   
   Descrição: Sistema de animação que simula um cursor interagindo com
              elementos da interface (logo, nome, ícone verificado)
   
   Funcionalidades:
   - Cursor vem de baixo junto com a logo
   - Clica na logo e permanece durante digitação do nome
   - Move-se até o ícone verificado e clica
   - Loop infinito e suave
   
   ===================================================================== */

/* ====== ⏱️ VARIÁVEIS DE CONTROLE (ajuste aqui para modificar a animação) ====== */
:root {
  /* ⏱️ TEMPOS DA ANIMAÇÃO - MAIS RÁPIDO */
  --tempo-fase-1: 6s; /* Fase 1: Logo + Nome + Ícone */
  --tempo-fase-2: 1s; /* Fase 2: Seta + Card + Logos trocando */
  --tempo-global: 18s; /* Tempo total = Fase 1 + Fase 2 (mais rápido) */

  /* Opacidade e efeitos visuais */
  --opacidade-inicio: 1; /* Cursor sempre visível */
  --cursor-scale-clique: 0.7; /* Redução do cursor ao clicar (85%) */
  --elemento-scale-clique: 0.85; /* Redução do elemento ao ser clicado (85%) */
}

/* ════════════════════════════════════════════════════════════════
   CURSOR - Fase 1 (0-10s | 0-33.33%)
   ════════════════════════════════════════════════════════════════ */
@keyframes rcs-home-v2-cursor-movimento {
  /* Início: aparece com fade e clica */
  0% {
    opacity: 0;
    left: 28%;
    top: 35px;
    transform: scale(1);
  }
  5% {
    opacity: 0;
    left: 28%;
    top: 35px;
    transform: scale(1);
  }
  7% {
    opacity: 0;
    left: 28%;
    top: 35px;
    transform: scale(1);
  }
  8% {
    opacity: 0;
    left: 28%;
    top: 35px;
    transform: scale(var(--cursor-scale-clique));
  }
  8.33% {
    opacity: 0;
    left: 28%;
    top: 40px;
    transform: scale(1);
  }

  /* Nome: cursor desaparece */
  9.5% {
    opacity: 0;
    left: 28.5%;
    top: 50px;
    transform: scale(1);
  }

  18% {
    opacity: 0;
    left: 70%;
    top: 50px;
    transform: scale(1);
  }
  /* Ícone: cursor aparece e clica */
  19% {
    opacity: 0;
    left: 79%;
    top: 45px;
    transform: scale(1);
  }
  21% {
    opacity: 1;
    left: 77%;
    top: 40px;
    transform: scale(var(--cursor-scale-clique));
  }
  23%,
  100% {
    opacity: 0;
    left: 79%;
    top: 45px;
    transform: scale(1);
  }
}

/* =====================================================================
   📦 ANIMAÇÕES DOS ELEMENTOS
   
   Os elementos (logo, nome, ícone) são "puxados" da esquerda para suas
   posições finais, sincronizados com o movimento do cursor.
   
   ===================================================================== */

/* ════════════════════════════════════════════════════════════════
   LOGO - Fase 1 (0-8.33%)
   ════════════════════════════════════════════════════════════════ */
@keyframes rcs-home-v2-logo-animacao {
  0%,
  2% {
    opacity: 0;
    transform: scale(1);
  }
  4% {
    opacity: 1;
    transform: scale(1);
  }
  8.33%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* ════════════════════════════════════════════════════════════════
   NOME - Digitação (10.42-16.67%)
   ════════════════════════════════════════════════════════════════ */
@keyframes rcs-home-v2-nome-animacao {
  0%,
  10.42% {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
  }
  10.43% {
    opacity: 1;
    max-width: 0;
    overflow: hidden;
  }
  15.63% {
    opacity: 1;
    max-width: 100px;
    overflow: hidden;
  }
  16.13% {
    opacity: 1;
    max-width: 150px;
    overflow: hidden;
  }
  16.67%,
  90% {
    opacity: 1;
    max-width: 200px;
    overflow: hidden;
  }
  100% {
    opacity: 0;
    max-width: 200px;
    overflow: hidden;
  }
}

/* ════════════════════════════════════════════════════════════════
   ÍCONE - Bounce (18.75-25%)
   ════════════════════════════════════════════════════════════════ */
@keyframes rcs-home-v2-icone-animacao {
  0%,
  14.75% {
    opacity: 0;
    transform: scale(0);
  }
  15.33% {
    opacity: 1;
    transform: scale(1.3);
  }
  20%,
  21% {
    opacity: 1;
    transform: scale(1);
  }
  22% {
    opacity: 1;
    transform: scale(var(--elemento-scale-clique));
  }
  25%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* =====================================================================
   APLICAÇÃO DAS ANIMAÇÕES NOS ELEMENTOS
   ===================================================================== */

/* =====================================================================
   🎬 FASE 1 + FASE 2: APLICAÇÃO DAS ANIMAÇÕES (30s total)
   Tudo usa --tempo-global para sincronizar perfeitamente
   ===================================================================== */

/* Cursor */
#rcs-home-v2-mouse-cursor {
  animation: rcs-home-v2-cursor-movimento var(--tempo-global) linear infinite;
}

/* Logo no celular */
.rcs-home-v2-conv-logo {
  opacity: 0;
  animation: rcs-home-v2-logo-animacao var(--tempo-global) linear infinite;
}

.rcs-home-v2-conv-avatar {
  overflow: visible;
}

/* Nome no celular */
.rcs-home-v2-titulo-app.rcs-home-v2-conv-nome {
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  animation: rcs-home-v2-nome-animacao var(--tempo-global) linear infinite;
}

/* Ícone verificado no celular */
.rcs-home-v2-appbar
  .rcs-home-v2-acoes
  .rcs-home-v2-btn-ico[title="Verificado"] {
  opacity: 0;
  animation: rcs-home-v2-icone-animacao var(--tempo-global) linear infinite;
}

/* =====================================================================
   🎬 FASE 2: ANIMAÇÕES (20s - Seta, Card, Logos)
   Inicia após a Fase 1 (33.33% do tempo global)
   ===================================================================== */

/* ════════════════════════════════════════════════════════════════
   SETA - Desenha estilo stroke-dasharray (20-35%)
   ════════════════════════════════════════════════════════════════ */
@keyframes rcs-home-v2-seta-animacao {
  0%,
  19.99% {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  25% {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  30% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
  32.01%,
  90% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes rcs-home-v2-seta-arrow1-animacao {
  0%,
  31.99% {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  32% {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  34% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
  34.01%,
  90% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes rcs-home-v2-seta-arrow2-animacao {
  0%,
  33.99% {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  34% {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  35% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
  35.01%,
  90% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
}

/* ════════════════════════════════════════════════════════════════
   CARD - Fade+slide (30-35%) com fade out no final
   ════════════════════════════════════════════════════════════════ */
@keyframes rcs-home-v2-card-verificado-animacao {
  0%,
  32% {
    opacity: 0;
    transform: translateY(15px) scale(0.9);
  }
  34% {
    opacity: 0.5;
    transform: translateY(5px) scale(0.95);
  }
  35%,
  90% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
}

/* ════════════════════════════════════════════════════════════════
   LOGOS - Trocam em sequência (45-100%)
   ════════════════════════════════════════════════════════════════ */

/* Google: 30-50% - transição rápida sincronizada com digitação, zoom reduzido, blur reduzido */
@keyframes rcs-home-v2-logo-google-animacao {
  0%,
  29.5% {
    opacity: 0;
    transform: scale(0.95) translateZ(-120px);
  }
  /* Transição rápida - menos etapas, zoom menor, blur menor */
  30% {
    opacity: 0.3;
    transform: scale(0.96) translateZ(-70px);
  }
  31% {
    opacity: 0.6;
    transform: scale(0.97) translateZ(-40px);
  }
  32% {
    opacity: 0.85;
    transform: scale(0.99) translateZ(-15px);
  }
  33% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
  /* Permanece visível enquanto texto está completo (33-49%) */
  34%,
  48.5% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
  /* Transição rápida de saída */
  49% {
    opacity: 0.7;
    transform: scale(0.97) translateZ(-50px);
  }
  50%,
  90% {
    opacity: 0;
    transform: scale(0.95) translateZ(-120px);
  }
  100% {
    opacity: 0;
    transform: scale(0.95) translateZ(-120px);
  }
}

/* Vivo: 50-70% - transição rápida sincronizada com digitação, zoom reduzido, blur reduzido */
@keyframes rcs-home-v2-logo-vivo-animacao {
  0%,
  49.5% {
    opacity: 0;
    transform: scale(0.95) translateZ(-120px);
  }
  /* Transição rápida - menos etapas, zoom menor, blur menor */
  50% {
    opacity: 0.3;
    transform: scale(0.96) translateZ(-70px);
  }
  51% {
    opacity: 0.6;
    transform: scale(0.97) translateZ(-40px);
  }
  52% {
    opacity: 0.85;
    transform: scale(0.99) translateZ(-15px);
  }
  53% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
  /* Permanece visível enquanto texto está completo (53-69%) */
  54%,
  68.5% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
  /* Transição rápida de saída */
  69% {
    opacity: 0.7;
    transform: scale(0.97) translateZ(-50px);
  }
  70%,
  90% {
    opacity: 0;
    transform: scale(0.95) translateZ(-120px);
  }
  100% {
    opacity: 0;
    transform: scale(0.95) translateZ(-120px);
  }
}

/* TIM: 70-85% - transição rápida sincronizada com digitação, zoom reduzido, blur reduzido */
@keyframes rcs-home-v2-logo-tim-animacao {
  0%,
  69.5% {
    opacity: 0;
    transform: scale(0.95) translateZ(-120px);
  }
  /* Transição rápida - menos etapas, zoom menor, blur menor */
  70% {
    opacity: 0.3;
    transform: scale(0.96) translateZ(-70px);
  }
  71% {
    opacity: 0.6;
    transform: scale(0.97) translateZ(-40px);
  }
  72% {
    opacity: 0.85;
    transform: scale(0.99) translateZ(-15px);
  }
  73% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
  /* Permanece visível enquanto texto está completo (73-84%) */
  74%,
  83.5% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
  /* Transição rápida de saída */
  84% {
    opacity: 0.7;
    transform: scale(0.97) translateZ(-50px);
  }
  85%,
  90% {
    opacity: 0;
    transform: scale(0.95) translateZ(-120px);
  }
  100% {
    opacity: 0;
    transform: scale(0.95) translateZ(-120px);
  }
}

/* Claro: 85-95% - transição rápida sincronizada com digitação, zoom reduzido, blur reduzido */
@keyframes rcs-home-v2-logo-claro-animacao {
  0%,
  84.5% {
    opacity: 0;
    transform: scale(0.95) translateZ(-120px);
  }
  /* Transição rápida - menos etapas, zoom menor, blur menor */
  85% {
    opacity: 0.3;
    transform: scale(0.96) translateZ(-70px);
  }
  86% {
    opacity: 0.6;
    transform: scale(0.97) translateZ(-40px);
  }
  87% {
    opacity: 0.85;
    transform: scale(0.99) translateZ(-15px);
  }
  88% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
  /* Permanece visível enquanto texto está completo (88-94%) */
  89%,
  93.5% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
  /* Transição rápida de saída */
  94% {
    opacity: 0.7;
    transform: scale(0.97) translateZ(-50px);
  }
  95%,
  100% {
    opacity: 0;
    transform: scale(0.95) translateZ(-120px);
  }
}

/* ====== ANIMAÇÃO DE TEXTO DIGITADO SINCRONIZADA COM OS 4 ÍCONES ====== */

/* Aplicação das animações da Fase 2 */
.rcs-home-v2-seta-verificado svg {
  opacity: 0;
  animation: rcs-home-v2-seta-opacity var(--tempo-global) linear infinite;
}

.rcs-home-v2-seta-path {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rcs-home-v2-seta-path-main {
  animation: rcs-home-v2-seta-animacao var(--tempo-global) linear infinite;
}

.rcs-home-v2-seta-path-arrow1 {
  animation: rcs-home-v2-seta-arrow1-animacao var(--tempo-global) linear
    infinite;
}

.rcs-home-v2-seta-path-arrow2 {
  animation: rcs-home-v2-seta-arrow2-animacao var(--tempo-global) linear
    infinite;
}

/* Animação de opacidade do SVG */
@keyframes rcs-home-v2-seta-opacity {
  0%,
  19.99% {
    opacity: 0;
  }
  20%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.rcs-home-v2-verificado-card {
  opacity: 0;
  animation: rcs-home-v2-card-verificado-animacao var(--tempo-global) linear
    infinite;
}

.rcs-home-v2-logo:nth-child(1) {
  animation: rcs-home-v2-logo-google-animacao var(--tempo-global)
    cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center center;
}

.rcs-home-v2-logo:nth-child(2) {
  animation: rcs-home-v2-logo-vivo-animacao var(--tempo-global)
    cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center center;
}

.rcs-home-v2-logo:nth-child(3) {
  animation: rcs-home-v2-logo-tim-animacao var(--tempo-global)
    cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center center;
}

.rcs-home-v2-logo:nth-child(4) {
  animation: rcs-home-v2-logo-claro-animacao var(--tempo-global)
    cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center center;
}

/* ====== ANIMAÇÃO DE TEXTO DIGITADO 100% CSS - SINCRONIZADA COM ÍCONES ====== */
#rcs-typed-verificado {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 700;
  font-size: 20px;
}

#rcs-typed-verificado > span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  max-width: 0;
}

/* Google: 30-50% - digitação mais lenta e sincronizada com imagem */
.rcs-texto-google {
  color: #4285f4;
  animation: rcs-home-v2-digitar-google var(--tempo-global) ease-out infinite;
}

@keyframes rcs-home-v2-digitar-google {
  0%,
  29.5% {
    opacity: 0;
    max-width: 0;
    transform: translateX(-10px);
  }
  30% {
    opacity: 1;
    max-width: 0;
    transform: translateX(0);
  }
  31% {
    opacity: 1;
    max-width: 15px;
    transform: translateX(0);
  }
  32% {
    opacity: 1;
    max-width: 30px;
    transform: translateX(0);
  }
  33% {
    opacity: 1;
    max-width: 50px;
    transform: translateX(0);
  }
  34% {
    opacity: 1;
    max-width: 70px;
    transform: translateX(0);
  }
  35% {
    opacity: 1;
    max-width: 100px;
    transform: translateX(0);
  }
  50% {
    opacity: 1;
    max-width: 100px;
    transform: translateX(0);
  }
  50.1%,
  90% {
    opacity: 0;
    max-width: 0;
    transform: translateX(10px);
  }
  100% {
    opacity: 0;
    max-width: 0;
    transform: translateX(10px);
  }
}

/* Vivo: 50-70% - digitação mais lenta e sincronizada com imagem */
.rcs-texto-vivo {
  color: #7b2fff;
  animation: rcs-home-v2-digitar-vivo var(--tempo-global) ease-out infinite;
}

@keyframes rcs-home-v2-digitar-vivo {
  0%,
  49.5% {
    opacity: 0;
    max-width: 0;
    transform: translateX(-10px);
  }
  50% {
    opacity: 1;
    max-width: 0;
    transform: translateX(0);
  }
  51% {
    opacity: 1;
    max-width: 15px;
    transform: translateX(0);
  }
  52% {
    opacity: 1;
    max-width: 30px;
    transform: translateX(0);
  }
  53% {
    opacity: 1;
    max-width: 50px;
    transform: translateX(0);
  }
  54% {
    opacity: 1;
    max-width: 80px;
    transform: translateX(0);
  }
  70% {
    opacity: 1;
    max-width: 80px;
    transform: translateX(0);
  }
  70.1%,
  90% {
    opacity: 0;
    max-width: 0;
    transform: translateX(10px);
  }
  100% {
    opacity: 0;
    max-width: 0;
    transform: translateX(10px);
  }
}

/* TIM: 70-85% - digitação mais lenta e sincronizada com imagem */
.rcs-texto-tim {
  color: #0046ad;
  animation: rcs-home-v2-digitar-tim var(--tempo-global) ease-out infinite;
}

@keyframes rcs-home-v2-digitar-tim {
  0%,
  69.5% {
    opacity: 0;
    max-width: 0;
    transform: translateX(-10px);
  }
  70% {
    opacity: 1;
    max-width: 0;
    transform: translateX(0);
  }
  71% {
    opacity: 1;
    max-width: 15px;
    transform: translateX(0);
  }
  72% {
    opacity: 1;
    max-width: 30px;
    transform: translateX(0);
  }
  73% {
    opacity: 1;
    max-width: 60px;
    transform: translateX(0);
  }
  85% {
    opacity: 1;
    max-width: 60px;
    transform: translateX(0);
  }
  85.1%,
  90% {
    opacity: 0;
    max-width: 0;
    transform: translateX(10px);
  }
  100% {
    opacity: 0;
    max-width: 0;
    transform: translateX(10px);
  }
}

/* Claro: 85-95% - digitação mais lenta e sincronizada com imagem */
.rcs-texto-claro {
  color: #e60000;
  animation: rcs-home-v2-digitar-claro var(--tempo-global) ease-out infinite;
}

@keyframes rcs-home-v2-digitar-claro {
  0%,
  84.5% {
    opacity: 0;
    max-width: 0;
    transform: translateX(-10px);
  }
  85% {
    opacity: 1;
    max-width: 0;
    transform: translateX(0);
  }
  86% {
    opacity: 1;
    max-width: 15px;
    transform: translateX(0);
  }
  87% {
    opacity: 1;
    max-width: 35px;
    transform: translateX(0);
  }
  88% {
    opacity: 1;
    max-width: 55px;
    transform: translateX(0);
  }
  89% {
    opacity: 1;
    max-width: 75px;
    transform: translateX(0);
  }
  95% {
    opacity: 1;
    max-width: 75px;
    transform: translateX(0);
  }
  95.1%,
  90% {
    opacity: 0;
    max-width: 0;
    transform: translateX(10px);
  }
  100% {
    opacity: 0;
    max-width: 0;
    transform: translateX(10px);
  }
}

/* ════════════════════════════════════════════════════════════════
   🎬 FASE 3: CARD PROMOCIONAL + RESPOSTA + 3 CARDS (Independente!)
   Animações que NÃO mexem na Fase 1 e Fase 2
   ════════════════════════════════════════════════════════════════ */

/* ====== CURSOR FASE 3 - Move do ícone até o botão ====== */
@keyframes rcs-home-v2-cursor-fase3 {
  /* Invisível até 50% da timeline */
  0%,
 

  /* Aparece na posição do ícone */
  49% {
    opacity: 0;
    left: 62%;
    top: 170px;
    transform: scale(1);
  }
  53% {
    opacity: 1;
    left: 62%;
    top: 170px;
    transform: scale(var(--cursor-scale-clique));
  }

  /* Desaparece */
  55%,
  90% {
    opacity: 0;
    left: 62%;
    top: 170px;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    left: 62%;
    top: 170px;
    transform: scale(1);
  }
}

#rcs-home-v2-mouse-cursor-fase3 {
  animation: rcs-home-v2-cursor-fase3 var(--tempo-global) linear infinite;
}

/* ====== CARD PROMOCIONAL - Aparece em 50% da timeline com fade out ====== */
@keyframes rcs-home-v2-promo-card-animacao {
  0%,
  15% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  19% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  90% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
}

.rcs-home-v2-promo-card {
  opacity: 0;
  animation: rcs-home-v2-promo-card-animacao var(--tempo-global) ease-out
    infinite;
}

/* ====== RESPOSTA DO USUÁRIO - Aparece após clicar no botão (56%) com fade out ====== */
@keyframes rcs-home-v2-resposta-animacao {
  0%,
  56% {
    opacity: 0;
    transform: translateX(20px) scale(0.9);
  }
  57% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(0) scale(1);
  }
}

.rcs-home-v2-resposta {
  opacity: 0;
  animation: rcs-home-v2-resposta-animacao var(--tempo-global) ease-out infinite;
}

/* ====== 3 CARDS DE PRODUTOS - Efeito dominó (58-60%) ====== */

/* Card 1 - Aparece primeiro com fade out */
@keyframes rcs-home-v2-produto-card1-animacao {
  0%,
  59% {
    opacity: 0;
    transform: translateY(30px) scale(0.85);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
}

/* Card 2 - Aparece 0.3s depois com fade out */
@keyframes rcs-home-v2-produto-card2-animacao {
  0%,
  62% {
    opacity: 0;
    transform: translateY(30px) scale(0.85);
  }
  63% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
}

/* Card 3 - Aparece 0.3s depois com fade out */
@keyframes rcs-home-v2-produto-card3-animacao {
  0%,
  65% {
    opacity: 0;
    transform: translateY(30px) scale(0.85);
  }
  66% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
}

/* Aplicação das animações nos cards */
.rcs-home-v2-card-produto:nth-child(1) {
  animation: rcs-home-v2-produto-card1-animacao var(--tempo-global) ease-out
    infinite !important;
}

.rcs-home-v2-card-produto:nth-child(2) {
  animation: rcs-home-v2-produto-card2-animacao var(--tempo-global) ease-out
    infinite !important;
}

.rcs-home-v2-card-produto:nth-child(3) {
  animation: rcs-home-v2-produto-card3-animacao var(--tempo-global) ease-out
    infinite !important;
}

/* =====================================================================
   ANIMAÇÕES BÁSICAS DA PÁGINA (mantidas para compatibilidade)
   ===================================================================== */

@keyframes rcs-home-v2-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rcs-home-v2-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rcs-home-v2-popIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rcs-home-v2-slideLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes rcs-home-v2-slideRight {
  from {
    transform: translateX(50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes rcs-home-v2-logoFloat {
  0% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.03) translateY(-5px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

@keyframes rcs-home-v2-subirDescer {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Classes de animação */
.rcs-home-v2-fadeInDelay {
  animation: rcs-home-v2-fadeInUp 1s ease 0.3s forwards;
}

.rcs-home-v2-fadeInDelay2 {
  animation: rcs-home-v2-fadeInUp 1s ease 0.9s forwards;
}
@media (max-width: 415px) {
  @keyframes rcs-home-v2-cursor-fase3 {
    /* Invisível até 49% da timeline */
    0%,
    49% {
      opacity: 0;
      left: 60%;
      top: 140px;
      transform: scale(1);
    }
    /* Aparece na posição do ícone */
    53% {
      opacity: 1;
      left: 58%;
      top: 140px;
      transform: scale(var(--cursor-scale-clique));
    }
    /* Desaparece */
    55%,
    90% {
      opacity: 0;
      left: 60%;
      top: 140px;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      left: 60%;
      top: 140px;
      transform: scale(1);
    }
  }
  @keyframes rcs-home-v2-cursor-movimento {
    /* Início: aparece com fade e clica */
    0% {
      opacity: 0;
      left: 20%;
      top: 30px;
      transform: scale(1);
    }
    5% {
      opacity: 0;
      left: 20%;
      top: 35px;
      transform: scale(1);
    }
    7% {
      opacity: 0;
      left: 20%;
      top: 30px;
      transform: scale(1);
    }
    8% {
      opacity: 0;
      left: 22%;
      top: 30px;
      transform: scale(var(--cursor-scale-clique));
    }
    8.33% {
      opacity: 0;
      left: 20%;
      top: 30px;
      transform: scale(1);
    }

    /* Nome: cursor desaparece */
    9.5% {
      opacity: 0;
      left: 28.5%;
      top: 50px;
      transform: scale(1);
    }

    18% {
      opacity: 0;
      left: 70%;
      top: 50px;
      transform: scale(1);
    }
    /* Ícone: cursor aparece e clica */
    19% {
      opacity: 0;
      left: 79%;
      top: 45px;
      transform: scale(1);
    }
    21% {
      opacity: 1;
      left: 73%;
      top: 32px;
      transform: scale(var(--cursor-scale-clique));
    }
    23%,
    100% {
      opacity: 0;
      left: 79%;
      top: 45px;
      transform: scale(1);
    }
  }
}
@media (max-width: 375px) {
  @keyframes rcs-home-v2-cursor-fase3 {
    /* Invisível até 49% da timeline */
    0%,
    49% {
      opacity: 0;
      left: 60%;
      top: 140px;
      transform: scale(1);
    }
    /* Aparece na posição do ícone */
    53% {
      opacity: 1;
      left: 60%;
      top: 140px;
      transform: scale(var(--cursor-scale-clique));
    }
    /* Desaparece */
    55%,
    90% {
      opacity: 0;
      left: 60%;
      top: 140px;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      left: 60%;
      top: 140px;
      transform: scale(1);
    }
  }
  @keyframes rcs-home-v2-cursor-movimento {
    /* Início: aparece com fade e clica */
    0% {
      opacity: 0;
      left: 28%;
      top: 35px;
      transform: scale(1);
    }
    5% {
      opacity: 0;
      left: 28%;
      top: 35px;
      transform: scale(1);
    }
    7% {
      opacity: 0;
      left: 28%;
      top: 35px;
      transform: scale(1);
    }
    8% {
      opacity: 0;
      left: 28%;
      top: 35px;
      transform: scale(var(--cursor-scale-clique));
    }
    8.33% {
      opacity: 0;
      left: 28%;
      top: 40px;
      transform: scale(1);
    }

    /* Nome: cursor desaparece */
    9.5% {
      opacity: 0;
      left: 28.5%;
      top: 50px;
      transform: scale(1);
    }

    18% {
      opacity: 0;
      left: 70%;
      top: 50px;
      transform: scale(1);
    }
    /* Ícone: cursor aparece e clica */
    19% {
      opacity: 0;
      left: 79%;
      top: 45px;
      transform: scale(1);
    }
    21% {
      opacity: 1;
      left: 73%;
      top: 32px;
      transform: scale(var(--cursor-scale-clique));
    }
    23%,
    100% {
      opacity: 0;
      left: 79%;
      top: 45px;
      transform: scale(1);
    }
  }
}

/* =====================================================================
   📖 GUIA DE MODIFICAÇÃO RÁPIDA
   ===================================================================== */

/*
  ⏱️ AJUSTAR VELOCIDADE DA ANIMAÇÃO:
  --------------------------------------------------------------------
  FASE 1 (Logo + Nome + Ícone):
  - Edite --tempo-fase-1 no :root (linha ~16)
  - Valor atual: 10s (10 segundos)
  - Sugestões: 8s (rápido), 12s (moderado), 15s (lento)
  
  FASE 2 (Seta + Card + Logos):
  - Edite --tempo-fase-2 no :root (linha ~17)
  - Valor atual: 20s (20 segundos)
  - Sugestões: 15s (rápido), 20s (moderado), 25s (lento)
  
  GLOBAL (Tempo total do loop):
  - Edite --tempo-global no :root (linha ~18)
  - Valor atual: 30s (Fase 1 + Fase 2)
  - Deve ser a soma de Fase 1 + Fase 2
  
  🎨 AJUSTAR EFEITOS VISUAIS:
  --------------------------------------------------------------------
  - --cursor-scale-clique: Tamanho do cursor ao clicar (0.85 = 85%)
  - --elemento-scale-clique: Tamanho dos elementos ao clicar (0.85 = 85%)
  
  📊 ESTRUTURA DA ANIMAÇÃO (30s total = Fase 1 + Fase 2 + Fase 3):
  --------------------------------------------------------------------
  🎬 FASE 1 (0-10s | 0-33.33%): Logo + Nome + Ícone (INTACTO!)
  
  0-2.5s (0-8.33%): Logo é puxada + cursor clica
  2.5-5s (8.33-16.67%): Nome é digitado
  5-7.5s (16.67-25%): Ícone aparece + cursor clica e desaparece
  7.5-10s (25-33.33%): Elementos ficam parados ✋
  
  🎬 FASE 2 (10-15s | 33.33-50%): Seta + Card (INTACTO!)
  
  7.5-12s (25-40%): 🔽 Seta desenha de cima para baixo
  12-13.5s (40-45%): 📦 Card verificado aparece
  13.5-15s (45-50%): Pausa
  
  🎬 FASE 3 (15-18s | 50-60%): Card Promo + Resposta + 3 Cards
  
  15s (50%): 📦 Card Promocional aparece
  15-16.8s (51-56%): 🖱️ NOVO CURSOR aparece e move até botão e clica
  16.8s (56%): 💬 Resposta do usuário aparece
  17.4-18s (58-60%): 🎴 3 cards aparecem em dominó
  
  🎬 FASE 4 (18-30s | 60-100%): Logos Trocando
  
  18-22.5s (60-75%): 🔵 Vivo
  22.5-26s (75-87%): 🔴 TIM
  26-30s (87-100%): 🟡 Claro
  
  🔁 Após 30s, tudo reinicia do zero!
  
  🎯 COMPORTAMENTO DOS ELEMENTOS:
  --------------------------------------------------------------------
  FASE 1:
  - CURSOR: Movimenta-se com linear, clica com scale
  - LOGO: Entra da esquerda/baixo com movimento diagonal suave
  - NOME: Aparece com efeito de digitação (typing effect)
  - ÍCONE: Surge com bounce rápido (scale 0 → 1.3 → 1)
  
  FASE 2:
  - SETA: Desenha de cima para baixo usando clip-path polygon
  - CARD: Aparece com fade in + slide up
  - LOGOS: Trocam com fade in/out e scale sincronizadas
  
  📍 AJUSTAR POSIÇÕES DO CURSOR:
  --------------------------------------------------------------------
  Edite os valores de left e top no @keyframes rcs-home-v2-cursor-movimento
  
  Posições atuais:
  • Logo: left: 28%, top: 55px
  • Ícone: left: 79%, top: 45px
  
  Exemplo - Mover cursor mais à direita:
    left: 28%; → left: 35%;
  
  Exemplo - Ajustar altura vertical:
    top: 55px; → top: 60px;
  
  🔧 AJUSTAR MOVIMENTO DOS ELEMENTOS:
  --------------------------------------------------------------------
  Edite as funções transform nos keyframes específicos:
  
  • Logo (@keyframes rcs-home-v2-logo-animacao):
    - translateX(-110px): Distância horizontal inicial
    - translateY(80px): Distância vertical inicial
    - Valores negativos = esquerda, positivos = direita
  
  • Nome (@keyframes rcs-home-v2-nome-animacao):
    - max-width: 0 → 200px (ajustar conforme tamanho do texto)
    - Efeito de digitação revelando o texto gradualmente
  
  • Ícone (@keyframes rcs-home-v2-icone-animacao):
    - scale(0) → scale(1.3) → scale(1)
    - Ajustar 1.3 para mudar intensidade do bounce
  
  ⚠️ IMPORTANTE:
  --------------------------------------------------------------------
  • Sempre teste as mudanças incrementalmente
  • O cursor e os elementos devem estar visualmente sincronizados
  • Para animações mais rápidas: reduza --tempo-total (ex: 8s)
  • Para animações mais lentas: aumente --tempo-total (ex: 15s)
  • Use valores consistentes para manter a fluidez
*/