/* style.css - Páscoa Lucrativa */

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Animations */
@keyframes slide-left {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@keyframes slide-right {
    from { transform: translate3d(-50%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@keyframes pulse-soft {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Components */
.top-bar-gradient {
    background: linear-gradient(to right, #FF1493, #D97706);
}

.cta-button {
    background-color: #10B981;
    color: white;
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    text-align: center;
    display: block;
    width: 100%;
}

@media (min-width: 640px) {
    .cta-button {
        width: auto;
    }
}

.cta-button:hover {
    filter: brightness(1.1);
}

.cta-button:active {
    transform: scale(0.95);
}

/* Carousel Animations - Infinite & Unstoppable */
.animate-slide-left {
    animation: slide-left 40s linear infinite !important;
    will-change: transform;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    position: relative;
    z-index: 10;
    gap: 0 !important;
    backface-visibility: hidden;
    perspective: 1000px;
    /* Force animation on mobile */
    -webkit-animation: slide-left 40s linear infinite !important;
}

.animate-slide-right {
    animation: slide-right 40s linear infinite !important;
    will-change: transform;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    position: relative;
    z-index: 10;
    gap: 0 !important;
    backface-visibility: hidden;
    perspective: 1000px;
    /* Force animation on mobile */
    -webkit-animation: slide-right 40s linear infinite !important;
}

.animate-marquee {
    animation: marquee 40s linear infinite !important;
    will-change: transform;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    position: relative;
    z-index: 10;
    gap: 0 !important;
    backface-visibility: hidden;
    perspective: 1000px;
    /* Force animation on mobile */
    -webkit-animation: marquee 40s linear infinite !important;
}

/* Perfect Loop Spacing - Replaces gap for precise 50% translation */
.animate-slide-left > *,
.animate-slide-right > * {
    margin-right: 1.5rem !important; /* Default Desktop Spacing */
}

@media (max-width: 768px) {
    .animate-slide-left > *,
    .animate-slide-right > * {
        margin-right: 2.5rem !important; /* Increased Mobile Spacing */
    }
    
    .animate-marquee > * {
        margin-right: 3rem !important; /* Increased Mobile Spacing for Marquee */
    }
}

.animate-marquee > * {
    margin-right: 2rem !important; /* Default Desktop Spacing */
}

/* Prevent pausing on hover/touch - Unstoppable movement */
.animate-slide-left, 
.animate-slide-right, 
.animate-marquee {
    pointer-events: none !important; /* Ignora cliques e toques para manter o movimento infinito */
}

/* Carousel Images */
.carousel-img {
    height: 200px; /* Fixed height for mobile */
    width: auto !important;
    display: block !important;
    border-radius: 1rem;
    object-fit: cover;
    border: 4px solid white;
    flex-shrink: 0;
}

.carousel-img-contain {
    height: 200px; /* Fixed height for mobile */
    width: auto !important;
    display: block !important;
    border-radius: 1rem;
    object-fit: contain;
    border: 4px solid white;
    flex-shrink: 0;
}

/* Container Safety */
.overflow-hidden {
    overflow: hidden !important;
}

@media (min-width: 640px) {
    .carousel-img, .carousel-img-contain {
        height: 300px;
    }
}

/* Buttons */
.liquid-button {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #8B185B;
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: 9999px;
    box-shadow: 0 8px 32px 0 rgba(139, 24, 91, 0.2);
    transition: all 0.3s ease;
    text-align: center;
    display: block;
    width: 100%;
}

.liquid-button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.liquid-button:active {
    transform: scale(0.95);
}

.metal-button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #FFD700 0%, #FFF8DC 50%, #DAA520 100%);
    color: #8B185B;
    font-weight: 900;
    padding: 1rem 2rem;
    border-radius: 9999px;
    box-shadow: 0 10px 20px -5px rgba(139, 24, 91, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    text-align: center;
    display: block;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.metal-button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    transition: transform 1s ease;
}

.metal-button:hover::after {
    transform: translateX(100%);
}

.metal-button:hover {
    filter: brightness(1.1);
}

.metal-button:active {
    transform: scale(0.95);
}

/* Hover Effects */
.hover-y:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* FAQ Styles */
.faq-item {
    border-bottom: 1px solid #e5e7eb;
    padding: 0.75rem 0;
}

.faq-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    font-weight: 600;
    color: #8B185B;
    transition: color 0.2s ease;
}

.faq-button:hover {
    color: #FF1493;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease;
    opacity: 0;
}

.faq-answer.open {
    max-height: 200px;
    opacity: 1;
    padding-top: 0.25rem;
}

.faq-icon {
    transition: transform 0.3s ease;
}

.faq-icon.rotate {
    transform: rotate(180deg);
}

/* Sales Notification */
#sales-notification {
    transition: all 0.5s ease;
}

#sales-notification.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

#sales-notification:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}