/* hero-animations.css */

/* ===== ANIMAÇÕES DE ENTRADA PRINCIPAL ===== */

/* Animação da entrada do container hero */
@keyframes heroContainerReveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Animação para o grid de fundo */
@keyframes gridFadeIn {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
}

/* Animação inovadora para texto: Revelação com máscara */
@keyframes textRevealMask {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform: scale(0.95);
    opacity: 0;
    filter: blur(4px);
  }
  10% {
    opacity: 1;
    filter: blur(4px);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

/* Animação para palavras separadas */
@keyframes wordFadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes fadeInHero {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Animação para letters separadas */
@keyframes letterFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.8);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Efeito de destaque de texto */
@keyframes textHighlight {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Animação para o vídeo de fundo - Revelação com grade */
@keyframes videoGridReveal {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* Animação para o overlay do vídeo */
@keyframes videoOverlayReveal {
  0% {
    opacity: 0;
    background: rgba(18, 18, 18, 0.95);
  }
  100% {
    opacity: 1;
    background: linear-gradient(
      135deg,
      rgba(18, 18, 18, 0.65) 0%,
      rgba(18, 18, 18, 0.55) 100%
    );
  }
}

/* Efeito de partículas flutuantes */
@keyframes floatingParticle {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-15px) translateX(10px);
  }
  50% {
    transform: translateY(-25px) translateX(0);
  }
  75% {
    transform: translateY(-15px) translateX(-10px);
  }
}

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

/* Animação do container principal */
.hero {
  animation: heroContainerReveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
}

/* Animações inovadoras para as linhas de título */
.hero-title .title-line {
  opacity: 0;
  display: block;
  position: relative;
  overflow: hidden;
}

.hero-title .title-line.animate {
  animation: textRevealMask 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Sequência de animação para as linhas do título */
.hero-title .title-line:nth-child(1).animate {
  animation-delay: 0.7s;
}

.hero-title .title-line:nth-child(2).animate {
  animation-delay: 1s;
}

.hero-title .title-line:nth-child(3).animate {
  animation-delay: 1.3s;
}

/* Animação para palavras individuais */
.title-word {
  display: inline-block;
  opacity: 0;
}

.title-word.animate {
  animation: wordFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Estilizar e animar letras individuais para o texto com gradiente */
.gradient-text .title-letter {
  display: inline-block;
  opacity: 0;
  background: linear-gradient(to right, var(--primary), var(--primary-light));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.gradient-text .title-letter.animate {
  animation: letterFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Animação para a descrição */
.hero-description {
  opacity: 0;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: none !important;
  animation: none !important;
}

.hero-description.animate {
  animation: textRevealMask 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  animation-delay: 1.8s !important;
}

/* Animação para os botões */
.hero-buttons {
  opacity: 0;
  transform: translateY(20px);
  transition: none !important;
  animation: none !important;
}

.hero-buttons.animate {
  animation: softFadeRise 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  animation-delay: 2.2s !important;
}

/* Animação para o indicador de scroll */
.scroll-indicator {
  opacity: 0;
  transition: none !important;
  animation: none !important;
}

.scroll-indicator.animate {
  animation: fadeInHero 1s ease forwards !important;
  animation-delay: 2.6s !important;
}

/* Video container com revelação em grade */
.hero-video-container {
  opacity: 0;
}

.hero-video-container.animate {
  animation: videoGridReveal 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Overlay para o vídeo com aparecimento gradual */
.video-overlay {
  opacity: 0;
}

.video-overlay.animate {
  animation: videoOverlayReveal 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Estilo para os blocos de grade do vídeo */
.video-grid-item {
  position: absolute;
  opacity: 0;
  overflow: hidden;
}

.video-grid-item.animate {
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Partículas flutuantes */
.hero-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.hero-particle.animate {
  animation: floatingParticle 15s ease-in-out infinite, fadeIn 1s ease forwards;
}

/* Badge de destaque com entrada inovadora */
.hero-badge {
  opacity: 0;
  transform: translateY(-20px);
  animation: none !important;
}

.hero-badge.animate {
  animation: textRevealMask 1s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  animation-delay: 0.5s !important;
}

/* ===== RESPONSIVIDADE DAS ANIMAÇÕES ===== */

@media (max-width: 768px) {
  .hero-title .title-line.animate,
  .hero-description.animate,
  .hero-badge.animate {
    animation: fadeIn 0.8s ease forwards; /* Animação mais rápida */
    clip-path: none;
    opacity: 0; /* Garantir que começa invisível */
    transform: none; /* Remover transformações que podem causar problemas */
  }

  /* Reduzir os delays */
  .hero-title .title-line:nth-child(1).animate {
    animation-delay: 0.3s;
  }

  .hero-title .title-line:nth-child(2).animate {
    animation-delay: 0.5s;
  }

  .hero-title .title-line:nth-child(3).animate {
    animation-delay: 0.7s; /* Delay reduzido */
    display: block !important; /* Forçar exibição */
    visibility: visible !important; /* Garantir visibilidade */
  }
  
  /* Garantir que todos os elementos do título sejam visíveis */
  .hero-title {
    min-height: auto; /* Evitar altura fixa que pode cortar conteúdo */
    overflow: visible !important; /* Evitar que conteúdo seja cortado */
  }
}

/* Preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Animação de entrada suave com movimento para cima */
@keyframes softFadeRise {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}