/* Animações Mobile Avançadas - Alojamento Rio Neiva */

/* Variáveis para animações */
:root {
    --animation-duration: 0.6s;
    --animation-delay: 0.1s;
    --bounce-ease: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --smooth-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --elastic-ease: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Animações de entrada avançadas */
@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px) rotateY(-15deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg);
    }
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(50px) rotateY(15deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg);
    }
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(-100px);
    }
    50% {
        opacity: 1;
        transform: scale(1.05) translateY(10px);
    }
    70% {
        transform: scale(0.9) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes flipInX {
    0% {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
    40% {
        transform: perspective(400px) rotateX(-20deg);
    }
    60% {
        transform: perspective(400px) rotateX(10deg);
    }
    80% {
        transform: perspective(400px) rotateX(-5deg);
    }
    100% {
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animações de hover e interação */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

@keyframes wiggle {
    0%, 7% {
        transform: rotateZ(0);
    }
    15% {
        transform: rotateZ(-15deg);
    }
    20% {
        transform: rotateZ(10deg);
    }
    25% {
        transform: rotateZ(-10deg);
    }
    30% {
        transform: rotateZ(6deg);
    }
    35% {
        transform: rotateZ(-4deg);
    }
    40%, 100% {
        transform: rotateZ(0);
    }
}

/* Animações de scroll */
@keyframes parallaxScroll {
    0% {
        transform: translateY(0) scale(1);
    }
    100% {
        transform: translateY(-20px) scale(1.02);
    }
}

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

/* Classes de animação para mobile */
.mobile-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--animation-duration) var(--smooth-ease);
}

.mobile-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.mobile-animate-delay-1 {
    transition-delay: calc(var(--animation-delay) * 1);
}

.mobile-animate-delay-2 {
    transition-delay: calc(var(--animation-delay) * 2);
}

.mobile-animate-delay-3 {
    transition-delay: calc(var(--animation-delay) * 3);
}

/* Animações específicas para elementos */
.hero-title-mobile {
    animation: slideInFromTop var(--animation-duration) var(--bounce-ease);
}

.hero-subtitle-mobile {
    animation: slideInFromBottom var(--animation-duration) var(--bounce-ease) 0.2s both;
}

.hero-stats-mobile {
    animation: fadeInScale var(--animation-duration) var(--elastic-ease) 0.4s both;
}

.feature-card-mobile {
    animation: flipInX var(--animation-duration) var(--smooth-ease);
}

.testimonial-card-mobile {
    animation: slideInFromLeft var(--animation-duration) var(--smooth-ease);
}

.platform-card-mobile {
    animation: zoomIn var(--animation-duration) var(--elastic-ease);
}

.cta-button-mobile {
    animation: bounceIn var(--animation-duration) var(--bounce-ease);
}

/* Efeitos de hover para mobile */
@media (hover: hover) {
    .mobile-hover-pulse:hover {
        animation: pulse 0.6s var(--elastic-ease);
    }
    
    .mobile-hover-shake:hover {
        animation: shake 0.6s var(--elastic-ease);
    }
    
    .mobile-hover-wiggle:hover {
        animation: wiggle 0.6s var(--elastic-ease);
    }
}

/* Efeitos de touch para mobile */
.mobile-touch-active {
    transform: scale(0.95);
    transition: transform 0.1s var(--smooth-ease);
}

.mobile-touch-active:active {
    transform: scale(0.9);
}

/* Animações de scroll com Intersection Observer */
.scroll-animate {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s var(--smooth-ease);
}

.scroll-animate.scroll-in {
    opacity: 1;
    transform: translateY(0);
}

.scroll-animate-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s var(--smooth-ease);
}

.scroll-animate-left.scroll-in {
    opacity: 1;
    transform: translateX(0);
}

.scroll-animate-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s var(--smooth-ease);
}

.scroll-animate-right.scroll-in {
    opacity: 1;
    transform: translateX(0);
}

.scroll-animate-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s var(--smooth-ease);
}

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

/* Efeitos de parallax para mobile */
.parallax-mobile {
    transform: translateZ(0);
    will-change: transform;
}

.parallax-mobile-slow {
    transform: translateY(0);
    transition: transform 0.1s ease-out;
}

.parallax-mobile-medium {
    transform: translateY(0);
    transition: transform 0.15s ease-out;
}

.parallax-mobile-fast {
    transform: translateY(0);
    transition: transform 0.2s ease-out;
}

/* Animações de loading */
@keyframes loadingPulse {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 0.6;
        transform: scale(1);
    }
}

.loading-animate {
    animation: loadingPulse 1.5s infinite var(--smooth-ease);
}

/* Animações de menu mobile */
.side-menu-mobile-enter {
    transform: translateX(100%);
    transition: transform 0.3s var(--elastic-ease);
}

.side-menu-mobile-enter.active {
    transform: translateX(0);
}

.side-menu-item-mobile {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.3s var(--smooth-ease);
}

.side-menu.active .side-menu-item-mobile {
    opacity: 1;
    transform: translateX(0);
    transition-delay: calc(var(--i, 0) * 0.1s);
}

/* Garantir que o menu seja visível quando ativo */
.side-menu.active {
    transform: translateX(0) !important;
    right: 0 !important;
}

/* Animações de botões */
.button-mobile-ripple {
    position: relative;
    overflow: hidden;
}

.button-mobile-ripple::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.button-mobile-ripple:active::before {
    width: 300px;
    height: 300px;
}

/* Efeito ripple personalizado */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Animações de cards com 3D */
.card-3d-mobile {
    transform-style: preserve-3d;
    transition: transform 0.3s var(--smooth-ease);
}

.card-3d-mobile:hover {
    transform: rotateY(5deg) rotateX(5deg);
}

/* Animações de texto */
.text-reveal-mobile {
    overflow: hidden;
}

.text-reveal-mobile span {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.5s var(--smooth-ease);
}

.text-reveal-mobile.reveal span {
    opacity: 1;
    transform: translateY(0);
}

/* Animações de imagens */
.image-fade-mobile {
    opacity: 0;
    transform: scale(1.1);
    transition: all 0.8s var(--smooth-ease);
}

.image-fade-mobile.loaded {
    opacity: 1;
    transform: scale(1);
}

/* Animações de progresso */
.progress-bar-mobile {
    width: 0%;
    transition: width 1s var(--smooth-ease);
}

.progress-bar-mobile.animate {
    width: 100%;
}

/* Animações de contador */
.counter-mobile {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s var(--elastic-ease);
}

.counter-mobile.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos específicos para contadores animados */
.stat-number {
    transition: all 0.3s var(--smooth-ease);
    display: inline-block;
}

.stat-number.counter-animating {
    color: var(--accent-color);
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(0, 195, 255, 0.3);
}

.stat-number.counter-completed {
    color: var(--text-color);
    transform: scale(1);
    text-shadow: none;
}

/* Animação de pulso para contadores */
@keyframes counterPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.counter-animating {
    animation: counterPulse 0.5s ease-in-out;
}

/* Efeito de destaque para contadores completos */
.counter-completed {
    position: relative;
}

.counter-completed::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(39, 174, 96, 0.1), transparent);
    animation: counterGlow 1s ease-out;
    pointer-events: none;
}

@keyframes counterGlow {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* Estilos para estatísticas do hero */
.hero-stats .stat {
    transition: all 0.3s var(--smooth-ease);
}

.hero-stats .stat:hover {
    transform: translateY(-5px);
}

.hero-stats .stat-number {
    font-weight: bold;
    font-size: 2.5rem;
    color: var(--accent-color) !important;
    text-shadow: 0 2px 8px rgba(0,195,255,0.15);
    transition: all 0.3s var(--smooth-ease);
}

.hero-stats .stat-label {
    font-size: 0.9rem;
    color: var(--white);
    margin-top: 0.5rem;
    opacity: 0.9;
}

/* Responsividade para contadores */
@media (max-width: 768px) {
    .hero-stats .stat-number {
        font-size: 2rem;
    }
    
    .hero-stats .stat-label {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .hero-stats .stat-number {
        font-size: 1.8rem;
    }
    
    .hero-stats .stat-label {
        font-size: 0.75rem;
    }
}

/* Media queries para diferentes tamanhos de ecrã */
@media (max-width: 768px) {
    .mobile-animate {
        transform: translateY(20px);
    }
    
    .scroll-animate {
        transform: translateY(30px);
    }
    
    .scroll-animate-left,
    .scroll-animate-right {
        transform: translateX(30px);
    }
}

@media (max-width: 480px) {
    .mobile-animate {
        transform: translateY(15px);
    }
    
    .scroll-animate {
        transform: translateY(20px);
    }
    
    .scroll-animate-left,
    .scroll-animate-right {
        transform: translateX(20px);
    }
}

/* Reduzir animações para utilizadores que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
    .mobile-animate,
    .scroll-animate,
    .scroll-animate-left,
    .scroll-animate-right,
    .scroll-animate-scale,
    .parallax-mobile,
    .card-3d-mobile,
    .text-reveal-mobile span,
    .image-fade-mobile,
    .progress-bar-mobile,
    .counter-mobile {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    .mobile-animate.animate-in,
    .scroll-animate.scroll-in,
    .scroll-animate-left.scroll-in,
    .scroll-animate-right.scroll-in,
    .scroll-animate-scale.scroll-in,
    .text-reveal-mobile.reveal span,
    .image-fade-mobile.loaded,
    .progress-bar-mobile.animate,
    .counter-mobile.animate {
        opacity: 1 !important;
        transform: none !important;
    }
}