/* ============================================
   ANIMAÇÕES CSS - Scroll e Efeitos de Surgimento
   ============================================ */

/* Definição das Keyframes */

/* Fade In - Desvanecer entrada */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade In Up - Surgir de baixo para cima */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down - Surgir de cima para baixo */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left - Surgir da esquerda */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right - Surgir da direita */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In Up - Deslizar de baixo */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide In Down - Deslizar de cima */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide In Left - Deslizar da esquerda */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In Right - Deslizar da direita */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Zoom In - Aumentar escala */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Zoom In Up - Aumentar e subir */
@keyframes zoomInUp {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Bounce In - Efeito de quique */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

/* Bounce Up - Quique de baixo para cima */
@keyframes bounceUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    60% {
        opacity: 1;
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Flip In X - Girar horizontal */
@keyframes flipInX {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
}

/* Flip In Y - Girar vertical */
@keyframes flipInY {
    from {
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateY(0deg);
    }
}

/* Rotate In - Girar */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: rotate(0deg);
    }
}

/* Pulse - Pulsação */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Glow - Brilho */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 199, 183, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 199, 183, 0.8);
    }
}

/* ============================================
   CLASSES DE ANIMAÇÃO UTILITÁRIAS
   ============================================ */

/* Fade In */
.animate-fade-in {
    animation: fadeIn 0.8s ease-in-out forwards;
}

/* Fade In Up */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-in-out forwards;
}

/* Fade In Down */
.animate-fade-in-down {
    animation: fadeInDown 0.8s ease-in-out forwards;
}

/* Fade In Left */
.animate-fade-in-left {
    animation: fadeInLeft 0.8s ease-in-out forwards;
}

/* Fade In Right */
.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-in-out forwards;
}

/* Slide In Up */
.animate-slide-in-up {
    animation: slideInUp 0.8s ease-in-out forwards;
}

/* Slide In Down */
.animate-slide-in-down {
    animation: slideInDown 0.8s ease-in-out forwards;
}

/* Slide In Left */
.animate-slide-in-left {
    animation: slideInLeft 0.8s ease-in-out forwards;
}

/* Slide In Right */
.animate-slide-in-right {
    animation: slideInRight 0.8s ease-in-out forwards;
}

/* Zoom In */
.animate-zoom-in {
    animation: zoomIn 0.8s ease-in-out forwards;
}

/* Zoom In Up */
.animate-zoom-in-up {
    animation: zoomInUp 0.8s ease-in-out forwards;
}

/* Bounce In */
.animate-bounce-in {
    animation: bounceIn 0.8s ease-in-out forwards;
}

/* Bounce Up */
.animate-bounce-up {
    animation: bounceUp 0.8s ease-in-out forwards;
}

/* Flip In X */
.animate-flip-in-x {
    animation: flipInX 0.8s ease-in-out forwards;
}

/* Flip In Y */
.animate-flip-in-y {
    animation: flipInY 0.8s ease-in-out forwards;
}

/* Rotate In */
.animate-rotate-in {
    animation: rotateIn 0.8s ease-in-out forwards;
}

/* Pulse */
.animate-pulse {
    animation: pulse 2s infinite;
}

/* Glow */
.animate-glow {
    animation: glow 2s infinite;
}

/* ============================================
   DELAYS - Para efeito em cascata
   ============================================ */

.animate-delay-100 {
    animation-delay: 0.1s;
}

.animate-delay-200 {
    animation-delay: 0.2s;
}

.animate-delay-300 {
    animation-delay: 0.3s;
}

.animate-delay-400 {
    animation-delay: 0.4s;
}

.animate-delay-500 {
    animation-delay: 0.5s;
}

.animate-delay-600 {
    animation-delay: 0.6s;
}

.animate-delay-700 {
    animation-delay: 0.7s;
}

.animate-delay-800 {
    animation-delay: 0.8s;
}

/* ============================================
   DURAÇÃO CUSTOMIZÁVEL
   ============================================ */

.animate-duration-300 {
    animation-duration: 0.3s;
}

.animate-duration-500 {
    animation-duration: 0.5s;
}

.animate-duration-800 {
    animation-duration: 0.8s;
}

.animate-duration-1000 {
    animation-duration: 1s;
}

.animate-duration-1200 {
    animation-duration: 1.2s;
}

.animate-duration-1500 {
    animation-duration: 1.5s;
}

/* ============================================
   EFEITOS DE SCROLL - Requer JS para ativar
   ============================================ */

/* Estado inicial - Invisível antes do scroll */
.scroll-animate {
    opacity: 0;
}

/* Estado quando ativada a animação */
.scroll-animate.active {
    opacity: 1;
}

/* Efeitos específicos para scroll */
.scroll-fade-in {
    opacity: 0;
}

.scroll-fade-in.active {
    animation: fadeIn 0.8s ease-in-out forwards;
}

.scroll-fade-in-up {
    opacity: 0;
    transform: translateY(30px);
}

.scroll-fade-in-up.active {
    animation: fadeInUp 0.8s ease-in-out forwards;
}

.scroll-fade-in-down {
    opacity: 0;
    transform: translateY(-30px);
}

.scroll-fade-in-down.active {
    animation: fadeInDown 0.8s ease-in-out forwards;
}

.scroll-fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
}

.scroll-fade-in-left.active {
    animation: fadeInLeft 0.8s ease-in-out forwards;
}

.scroll-fade-in-right {
    opacity: 0;
    transform: translateX(30px);
}

.scroll-fade-in-right.active {
    animation: fadeInRight 0.8s ease-in-out forwards;
}

.scroll-slide-in-up {
    opacity: 0;
    transform: translateY(50px);
}

.scroll-slide-in-up.active {
    animation: slideInUp 0.8s ease-in-out forwards;
}

.scroll-slide-in-left {
    opacity: 0;
    transform: translateX(-60px);
}

.scroll-slide-in-left.active {
    animation: slideInLeft 0.8s ease-in-out forwards;
}

.scroll-slide-in-right {
    opacity: 0;
    transform: translateX(60px);
}

.scroll-slide-in-right.active {
    animation: slideInRight 0.8s ease-in-out forwards;
}

.scroll-zoom-in {
    opacity: 0;
    transform: scale(0.8);
}

.scroll-zoom-in.active {
    animation: zoomIn 0.8s ease-in-out forwards;
}

.scroll-zoom-in-up {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
}

.scroll-zoom-in-up.active {
    animation: zoomInUp 0.8s ease-in-out forwards;
}

.scroll-bounce-in {
    opacity: 0;
    transform: scale(0.3);
}

.scroll-bounce-in.active {
    animation: bounceIn 0.8s ease-in-out forwards;
}

.scroll-bounce-up {
    opacity: 0;
    transform: translateY(40px);
}

.scroll-bounce-up.active {
    animation: bounceUp 0.8s ease-in-out forwards;
}

.scroll-flip-in-x {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
}

.scroll-flip-in-x.active {
    animation: flipInX 0.8s ease-in-out forwards;
}

.scroll-flip-in-y {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
}

.scroll-flip-in-y.active {
    animation: flipInY 0.8s ease-in-out forwards;
}

.scroll-rotate-in {
    opacity: 0;
    transform: rotate(-10deg);
}

.scroll-rotate-in.active {
    animation: rotateIn 0.8s ease-in-out forwards;
}

/* ============================================
   EFEITOS DE PARALLAX (Opcional)
   ============================================ */

.parallax-light {
    transform: translateY(var(--parallax-offset, 0px));
}

/* ============================================
   EFEITOS PARA TEXTOS
   ============================================ */

/* Animação de digitação */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.typing-animation {
    overflow: hidden;
    border-right: 3px solid #00C7B7;
    white-space: nowrap;
    animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: #00C7B7;
    }
}

/* ============================================
   EFEITOS DE HOVER
   ============================================ */

.hover-lift {
    transition: all 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 199, 183, 0.2);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow {
    transition: all 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(0, 199, 183, 0.6);
}

.hover-shadow {
    transition: all 0.3s ease;
}

.hover-shadow:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* ============================================
   EFEITOS RESPONSIVOS
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   ANIMAÇÃO DE ONDAS
   ============================================ */

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

.wave-animation {
    display: inline-block;
    animation: wave 2s ease-in-out infinite;
}

.wave-animation:nth-child(1) { animation-delay: 0s; }
.wave-animation:nth-child(2) { animation-delay: 0.1s; }
.wave-animation:nth-child(3) { animation-delay: 0.2s; }
.wave-animation:nth-child(4) { animation-delay: 0.3s; }
.wave-animation:nth-child(5) { animation-delay: 0.4s; }

/* ============================================
   ANIMAÇÃO DE FADE TEXTO NÚMERO
   ============================================ */

@keyframes countUp {
    from {
        counter-increment: count 0;
    }
    to {
        counter-increment: count var(--target);
    }
}

/* ============================================
   ANIMAÇÕES DE BACKGROUND
   ============================================ */

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

.gradient-shift {
    background: linear-gradient(-45deg, #00C7B7, #00a89d, #00d4c4, #009f92);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* ============================================
   ANIMAÇÃO DE BARRAS DE PROGRESSO
   ============================================ */

@keyframes slideProgress {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.progress-bar-animate {
    animation: slideProgress 1.5s ease-in-out forwards;
}

/* ============================================
   ANIMAÇÃO DE CARDS
   ============================================ */

.card-hover {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 199, 183, 0.15);
}

/* ============================================
   ESTILO PADRÃO PARA ELEMENTOS ANIMADOS
   ============================================ */

[data-animate] {
    opacity: 0;
    animation-fill-mode: both;
}

[data-animate].in-view {
    opacity: 1;
}