/* ==========================================================================
   Joyas del Corazón - Estilos Personalizados y Micro-Animações
   ========================================================================== */

/* Efeito Fade-In Geral (Utilizado na entrada do site) */
.fade-in {
    animation: fadeIn 1.5s ease-in-out;
}
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Efeito de revelação suave no scroll (Intersection Observer) */
.scroll-reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.scroll-reveal-active {
    opacity: 1;
    transform: translateY(0);
}

/* Efeito Shimmer sutil para imagens e cards (Reflexo Metálico) */
.shimmer-effect {
    position: relative;
    overflow: hidden;
}
.shimmer-effect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 30%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.05) 70%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
    z-index: 10;
}
.shimmer-effect:hover::after {
    transform: translate(150%, 150%) rotate(30deg);
}

/* Linha sutil expansiva nos links da navbar */
.nav-link-underline {
    position: relative;
}
.nav-link-underline::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #7E191B; /* brand-red */
    transform-origin: bottom center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link-underline:hover::after {
    transform: scaleX(1);
}

/* Zoom cinematográfico lento do Hero Carrossel (Ken Burns Effect) */
.carousel-zoom {
    transform: scale(1.08) !important;
}