/* Scroll Animations - Efeitos de fade-in para seções */

/* Fallback: se o script não rodar, tornar as seções visíveis após 1.5s */
@keyframes fade-in-fallback {
  to {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

/* Bloquear scroll horizontal globalmente */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Container principal */
.container,
.container-fluid {
  overflow-x: hidden;
  /* Preserva o tamanho natural dos containers */
  width: 100%;
}

/* Estado inicial das seções */
.fade-in-section {
  opacity: 0;
  transition: all 0.6s ease-out;
  /* Mantém o tamanho original durante a animação */
  min-height: fit-content;
  width: 100%;
  /* Fallback quando o JS não carrega ou falha */
  animation: fade-in-fallback 0.4s ease-out 1.5s forwards;
}

/* Estado quando a seção está visível */
.fade-in-section.fade-in-visible {
  animation: none; /* Cancela o fallback quando o JS funcionar */
  opacity: 1;
}

/* Variações de timing para criar efeito cascata */
.fade-in-section.fade-in-delay-1 {
  transition-delay: 0.1s;
}

.fade-in-section.fade-in-delay-2 {
  transition-delay: 0.2s;
}

.fade-in-section.fade-in-delay-3 {
  transition-delay: 0.3s;
}

/* Diferentes direções de entrada */
.fade-in-section.fade-in-left {
  transform: translateX(-20px); /* Reduzido de -30px para -20px */
  transition: all 0.6s ease-out;
}

.fade-in-section.fade-in-left.fade-in-visible {
  transform: translateX(0);
}

.fade-in-section.fade-in-right {
  transform: translateX(20px); /* Reduzido de 30px para 20px */
  transition: all 0.6s ease-out;
}

.fade-in-section.fade-in-right.fade-in-visible {
  transform: translateX(0);
}

.fade-in-section.fade-in-up {
  transition: all 0.6s ease-out;
}

.fade-in-section.fade-in-up.fade-in-visible {
}

.fade-in-section.fade-in-down {
  transform: translateY(-30px);
  transition: all 0.6s ease-out;
}

.fade-in-section.fade-in-down.fade-in-visible {
  transform: translateY(0);
}

/* Efeitos especiais para elementos internos */
.fade-in-section .fade-in-child {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease-out;
}

.fade-in-section.fade-in-visible .fade-in-child {
  opacity: 1;
  transform: translateY(0);
}

/* Delays para elementos filhos */
.fade-in-section.fade-in-visible .fade-in-child:nth-child(1) {
  transition-delay: 0.1s;
}
.fade-in-section.fade-in-visible .fade-in-child:nth-child(2) {
  transition-delay: 0.2s;
}
.fade-in-section.fade-in-visible .fade-in-child:nth-child(3) {
  transition-delay: 0.3s;
}
.fade-in-section.fade-in-visible .fade-in-child:nth-child(4) {
  transition-delay: 0.4s;
}
.fade-in-section.fade-in-visible .fade-in-child:nth-child(5) {
  transition-delay: 0.5s;
}

/* Otimizações para performance */
.fade-in-section {
  backface-visibility: hidden;
  /* Mantém o tamanho original */
  box-sizing: border-box;
  /* Preserva o layout natural */
  display: block;
}

/* Efeito mais sutil para elementos menores */
.fade-in-section.fade-in-subtle {
  transform: translateY(15px);
  transition: all 0.4s ease-out;
}

.fade-in-section.fade-in-subtle.fade-in-visible {
  transform: translateY(0);
}

/* Efeito de escala para elementos especiais */
.fade-in-section.fade-in-scale {
  transform: scale(0.95);
  transition: all 0.5s ease-out;
}

.fade-in-section.fade-in-scale.fade-in-visible {
  transform: scale(1);
}

/* Garantir que as seções mantenham suas dimensões */
.fade-in-section {
  /* Preserva o espaço durante a animação */
  min-height: inherit;
  /* Mantém o fluxo normal do documento */
  float: none;
  clear: both;
}

/* Media queries para dispositivos móveis */
@media (max-width: 768px) {
  .fade-in-section {
    transition-duration: 0.6s;
  }

  .fade-in-section.fade-in-left,
  .fade-in-section.fade-in-right {
    transform: translateX(0); /* Desabilita movimento lateral no mobile */
  }
}

/* Regras específicas para prevenir scroll horizontal */
.fade-in-section * {
  /* Preserva o tamanho natural dos elementos */
  box-sizing: border-box;
}

/* Garantir que imagens mantenham proporções naturais */
.fade-in-section img {
  max-width: 100%;
  height: auto;
  /* Preserva o layout natural */
  display: inline-block;
}

/* Preferências de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .fade-in-section {
    animation: none;
    opacity: 1;
    transition: none;
    transform: none;
  }

  .fade-in-section.fade-in-visible {
    opacity: 1;
    transform: none;
  }
}

/* ========== Parallax Scroll ========== */

.parallax-section {
  --parallax-offset: 0px;
  opacity: 0;
  transition: opacity 0.6s ease-out;
  min-height: fit-content;
  width: 100%;
  backface-visibility: hidden;
  box-sizing: border-box;
  display: block;
  min-height: inherit;
  float: none;
  clear: both;
}

.parallax-section.parallax-visible {
.parallax-section.parallax-up .parallax-layer {
  transform: translateY(var(--parallax-offset, 0px));
  transition: transform 0.4s ease-out, opacity 0.6s ease-out;
}

.parallax-section.parallax-up.parallax-visible .parallax-layer {
  --parallax-offset: 0px;
}

.parallax-section.parallax-up .parallax-layer {
  transform: translateY(var(--parallax-offset, 0px));
  transition: transform 0.4s ease-out, opacity 0.6s ease-out;
}

.parallax-section.parallax-up.parallax-visible .parallax-layer {
  --parallax-offset: 0px;
}

  opacity: 1;
}

.parallax-layer {
  --parallax-offset: 40px;
  transform: translateY(var(--parallax-offset));
  transition: transform 0.4s ease-out, opacity 0.6s ease-out;
}

.parallax-section.parallax-visible .parallax-layer {
  transition: transform 0.3s ease-out;
}

.parallax-layer--slow {
  /* Fator 0.5 aplicado via JS */
}

.parallax-layer--slower {
  /* Fator 0.25 aplicado via JS */
}

.parallax-section * {
  box-sizing: border-box;
}

.parallax-section img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

@media (max-width: 768px) {
  .parallax-section .parallax-layer {
    transition-duration: 0.5s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-section {
    opacity: 1;
    transition: none;
  }

  .parallax-section .parallax-layer {
    transform: none;
    transition: none;
  }

  .parallax-section.parallax-visible .parallax-layer {
    --parallax-offset: 0px;
  }
}