/**
 * H Dias Extintores & LA Projetos - Animations
 * Arquivo separado para animações de scroll e efeitos visuais
 */

/* ===============================================
   VARIÁVEIS PARA ANIMAÇÕES
   =============================================== */
:root {
  --transition-slow: 0.8s ease-out;
  --transition-medium: 0.6s ease-out;
  --transition-fast: 0.4s ease-out;
}

/* ===============================================
   ANIMAÇÕES DE SCROLL AVANÇADAS
   =============================================== */

/* Fade In básico */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--transition-slow);
}

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

/* Slide da esquerda */
.slide-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: all var(--transition-medium);
}

.slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide da direita */
.slide-right {
  opacity: 0;
  transform: translateX(60px);
  transition: all var(--transition-medium);
}

.slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale in (zoom) */
.scale-in {
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--transition-medium);
}

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

/* Fade up mais suave */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all var(--transition-slow);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animations (delay em sequência) */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* Rotate in */
.rotate-in {
  opacity: 0;
  transform: rotate(-10deg) scale(0.9);
  transition: all var(--transition-medium);
}

.rotate-in.visible {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Bounce in */
.bounce-in {
  opacity: 0;
  transform: scale(0.3);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bounce-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Blur in */
.blur-in {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(20px);
  transition: all var(--transition-medium);
}

.blur-in.visible {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

/* ===============================================
   SCROLL PROGRESS BAR - REMOVIDO
   =============================================== */
/*
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--cta-primary), #FFEA85);
  z-index: 1000;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}
*/

/* ===============================================
   TYPING EFFECT
   =============================================== */
.typing-effect {
  border-right: 2px solid var(--cta-primary);
  animation: typing-cursor 1s infinite;
}

@keyframes typing-cursor {
  0%, 50% { border-color: var(--cta-primary); }
  51%, 100% { border-color: transparent; }
}

/* ===============================================
   FLOATING ELEMENTS
   =============================================== */
.floating-bg {
  position: absolute;
  pointer-events: none;
  opacity: 0.1;
  z-index: 1;
}

.floating-bg.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--cta-primary);
  animation: float 6s ease-in-out infinite;
}

.floating-bg.square {
  width: 80px;
  height: 80px;
  background: var(--cta-primary);
  animation: float 8s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

/* ===============================================
   SECTION REVEAL
   =============================================== */
.section-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease-out;
}

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

/* ===============================================
   KEYFRAMES ADICIONAIS
   =============================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInError {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===============================================
   ACESSIBILIDADE - REDUCED MOTION
   =============================================== */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .slide-left, .slide-right, .scale-in, .fade-up, 
  .rotate-in, .bounce-in, .blur-in, .section-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
  
  .floating-bg {
    animation: none !important;
  }
  
  .typing-effect {
    animation: none !important;
    border-right: none !important;
  }
  
  .scroll-progress {
    display: none !important;
  }
}

/* ===============================================
   RESPONSIVIDADE PARA ANIMAÇÕES
   =============================================== */
@media (max-width: 768px) {
  /* Floating elements menor em mobile */
  .floating-bg.circle {
    width: 60px;
    height: 60px;
  }
  
  .floating-bg.square {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 480px) {
  /* Esconder floating elements em telas muito pequenas */
  .floating-bg {
    display: none;
  }
  
  /* Scroll progress mais fino em mobile */
  .scroll-progress {
    height: 2px;
  }
}