/* VTEX Day 2025 - Animações e Transições */

/* Animações de entrada */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

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

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Animações de destaque */
@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 rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Animação de mudança de cor de fundo - Versão melhorada */
@keyframes backgroundTransition {
    0% {
        background-color: var(--white);
    }
    50% {
        background-color: var(--rebel-pink-lighter);
    }
    100% {
        background-color: var(--white);
    }
}

/* Animação para o carregador conectado - Versão melhorada */
@keyframes chargerConnected {
    0% {
        background: linear-gradient(135deg, var(--white) 0%, var(--white-ice) 100%);
    }
    100% {
        background: linear-gradient(135deg, var(--rebel-pink-lighter) 0%, var(--white-ice) 100%);
    }
}

/* Animação para o carregador desconectado - Versão melhorada */
@keyframes chargerDisconnected {
    0% {
        background: linear-gradient(135deg, var(--rebel-pink-lighter) 0%, var(--white-ice) 100%);
    }
    100% {
        background: linear-gradient(135deg, var(--white) 0%, var(--white-ice) 100%);
    }
}

/* Animação para detecção de movimento */
@keyframes motionDetected {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.2);
    }
    100% {
        filter: brightness(1);
    }
}

/* Classes de animação */
.fade-in {
    animation: fadeIn 1s ease forwards;
}

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

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

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

.scale-in {
    animation: scaleIn 0.8s ease forwards;
}

.pulse {
    animation: pulse 2s infinite ease-in-out;
}

.float {
    animation: float 3s infinite ease-in-out;
}

.rotate {
    animation: rotate 10s infinite linear;
}

/* Animações para elementos específicos */
.hero-title {
    animation: slideInLeft 0.8s ease forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

.hero-subtitle {
    animation: slideInLeft 0.8s ease forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

.hero-cta {
    animation: slideInLeft 0.8s ease forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

#geo-element-1 {
    animation: float 6s infinite ease-in-out;
}

#geo-element-2 {
    animation: float 8s infinite ease-in-out;
    animation-delay: 0.5s;
}

#geo-element-3 {
    animation: float 7s infinite ease-in-out;
    animation-delay: 1s;
}

/* Animações para o botão CTA */
.btn-primary {
    position: relative;
    overflow: hidden;
}

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

.btn-primary:hover:after {
    left: 100%;
}

/* Animações para os elementos de feature */
.feature-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.feature-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animações para o elemento do giroscópio - Versão melhorada */
.gyro-element {
    transition: transform 0.2s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Animações para a bateria */
.battery-level {
    transition: width 1s ease, background-color 1s ease;
}

.charging .battery-level {
    background-color: #4CAF50;
}

/* Animações para mudança de fundo quando conectar/desconectar carregador - Versão melhorada */
.charging-connected .background-overlay {
    animation: chargerConnected 1s forwards;
}

.charging-disconnected .background-overlay {
    animation: chargerDisconnected 1s forwards;
}

/* Animação para detecção de movimento */
.motion-detected {
    animation: motionDetected 0.3s ease;
}

/* Animações para elementos que aparecem ao scroll */
.reveal {
  
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Garantir que a seção de giroscópio sempre apareça */
.gyro-demo {
    display: block !important;
}

/* Animações responsivas */
@media (max-width: 768px) {
    .hero-title, .hero-subtitle, .hero-cta {
        animation-name: slideInUp;
    }
}