/**
 * Animação para o vídeo do topo (hero).
 */
@keyframes hero-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

/**
 * Animação de pulso para o efeito neon.
 */
@keyframes neon-pulse {
    0% { text-shadow: 0 0 4px #0099cc, 0 0 10px #0099cc, 0 0 18px #82b1ff; }
    100% { text-shadow: 0 0 8px #0099cc, 0 0 16px #0099cc, 0 0 24px #82b1ff; }
}


/* --- Aplicação das Animações --- */

/*
 * Animação de entrada ao rolar a página (Scroll-triggered).
 * Os elementos começam invisíveis e deslocados para baixo.
 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(.4, 0, .2, 1), transform 0.8s cubic-bezier(.4, 0, .2, 1);
    transition-delay: var(--delay, 0s); /* Permite atrasos personalizados */
}

/* Quando o elemento se torna visível, ele aparece suavemente. */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animação de entrada para o vídeo */
#hero-video {
    opacity: 0;
    animation: hero-fadein 1.2s 0.2s ease-in forwards;
}

/* Animação para o texto neon */
.neon-nathoxi {
    animation: neon-pulse 1.8s infinite alternate;
}

/* --- Animações de Interação (Hover) --- */

/* Transição base para a maioria dos elementos interativos */
.produto-item,
.tamanho-item,
.directions-button,
.produto-cta-geral,
.btn-red,
a:not(.nav-cta), 
.main-nav ul li a:not(.nav-cta) {
    transition: all 0.3s ease;
}
.tamanho-item .tamanho-foto {
    transition: all 0.3s ease;
}

/* Efeito de elevação e brilho para cards de produtos e medidas */
.produto-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 123, 255, 0.25), 0 0 12px rgba(130, 177, 255, 0.2);
    border-color: var(--color-primary-accent);
}
/* O hover no item aplica o efeito na imagem interna */
.tamanho-item:hover .tamanho-foto {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 123, 255, 0.25), 0 0 12px rgba(130, 177, 255, 0.2);
    border-color: var(--color-primary-accent);
}

/* Efeito de brilho para links de texto */
a:not(.nav-cta):hover, 
.main-nav ul li a:not(.nav-cta):hover {
    color: var(--color-primary-accent);
    text-shadow: 0 0 6px var(--color-primary-accent);
}

/* Efeito para o botão de "Como Chegar" */
.directions-button:hover {
    background: var(--color-primary-accent);
    color: var(--color-background-end);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(130, 177, 255, 0.4);
}

/* Efeito para o botão CTA geral */
.produto-cta-geral:hover {
    transform: translateY(-2px) scale(1.02);
    background-position: 100% 0%;
    border-color: var(--color-primary-accent);
    box-shadow: 0 6px 18px rgba(0, 123, 255, 0.25);
}