/* Animações e Efeitos de Movimento para Moda Inclusiva */

/* Definições de Animações */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes rotateIn {
  from { transform: rotate(-10deg) scale(0.8); opacity: 0; }
  to { transform: rotate(0) scale(1); opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* Efeitos para o Cabeçalho */
.header-animated {
  background: linear-gradient(135deg, #8A2BE2, #FF3366, #00CCCC);
  background-size: 300% 300%;
  animation: gradientFlow 15s ease infinite;
}

.header-title {
  animation: slideInLeft 1.2s ease-out forwards;
}

.header-subtitle {
  animation: slideInRight 1.2s ease-out 0.3s forwards;
  opacity: 0;
  animation-fill-mode: forwards;
}

.header-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 1;
}

.header-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.2;
  animation: float 6s ease-in-out infinite;
}

.circle-1 {
  width: 150px;
  height: 150px;
  background-color: rgba(255, 255, 255, 0.2);
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.circle-2 {
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.15);
  top: 60%;
  right: 20%;
  animation-delay: 1s;
}

.circle-3 {
  width: 70px;
  height: 70px;
  background-color: rgba(255, 255, 255, 0.1);
  bottom: 10%;
  left: 30%;
  animation-delay: 2s;
}

/* Efeitos para a Seção Hero */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-image {
  animation: rotateIn 1.5s ease-out forwards;
}

.hero-text {
  animation: fadeIn 1.2s ease-out 0.5s forwards;
  opacity: 0;
  animation-fill-mode: forwards;
}

.hero-cta {
  animation: pulse 2s infinite;
}

/* Efeitos para os Vídeos */
.video-grid {
  perspective: 1000px;
}

.video-card {
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  animation: fadeIn 0.8s ease-out forwards;
  opacity: 0;
  animation-fill-mode: forwards;
}

.video-card:hover {
  transform: translateY(-15px) scale(1.03);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.video-card:nth-child(1) { animation-delay: 0.1s; }
.video-card:nth-child(2) { animation-delay: 0.2s; }
.video-card:nth-child(3) { animation-delay: 0.3s; }
.video-card:nth-child(4) { animation-delay: 0.4s; }
.video-card:nth-child(5) { animation-delay: 0.5s; }
.video-card:nth-child(6) { animation-delay: 0.6s; }

.video-info {
  position: relative;
  overflow: hidden;
}

.video-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #8A2BE2, #FF3366, #00CCCC);
  background-size: 200% 100%;
  animation: shimmer 2s infinite linear;
}

/* Efeitos para Elementos Decorativos */
.shape {
  position: absolute;
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
  animation-fill-mode: forwards;
}

.shape-1 {
  animation-delay: 0.3s;
}

.shape-2 {
  animation-delay: 0.6s;
}

.shape-3 {
  animation-delay: 0.9s;
}

/* Efeitos para Scroll */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Efeitos para Navegação */
.nav-item {
  position: relative;
  overflow: hidden;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #00CCCC;
  transition: width 0.3s ease;
}

.nav-item:hover::after {
  width: 100%;
}

/* Efeitos para Botões */
.btn-animated {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-animated::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s ease;
}

.btn-animated:hover::before {
  left: 100%;
}

/* Efeitos para Imagens */
.image-hover {
  transition: transform 0.5s ease;
  overflow: hidden;
}

.image-hover img {
  transition: transform 0.5s ease;
}

.image-hover:hover img {
  transform: scale(1.1);
}

/* Efeitos para Texto */
.text-highlight {
  position: relative;
  display: inline-block;
}

.text-highlight::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background-color: rgba(0, 204, 204, 0.2);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.text-highlight:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Efeitos para o Footer */
.footer-animated {
  position: relative;
  overflow: hidden;
}

.footer-wave {
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 50px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%238A2BE2" opacity="0.4"></path></svg>');
  background-size: cover;
}

/* Acessibilidade para Animações */