/* ==========================================================================
   Zenvio Marketing Premium Animations stylesheet
   ========================================================================== */

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0e0e0e;
}
::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border: 1px solid #131313;
}
::-webkit-scrollbar-thumb:hover {
    background: #8a2be2;
}

/* Custom Cursor */
.custom-cursor-dot {
    width: 6px;
    height: 6px;
    background-color: #dcb8ff;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background-color 0.2s;
    mix-blend-mode: difference;
}

.custom-cursor-ring {
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(138, 43, 226, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99998;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                height 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                background-color 0.3s, 
                border-color 0.3s;
}

/* Cursor Hover states */
body.cursor-hover .custom-cursor-dot {
    width: 8px;
    height: 8px;
    background-color: #8a2be2;
    mix-blend-mode: normal;
}

body.cursor-hover .custom-cursor-ring {
    width: 50px;
    height: 50px;
    border-color: rgba(138, 43, 226, 0.8);
    background-color: rgba(138, 43, 226, 0.05);
}

body.cursor-active .custom-cursor-dot {
    transform: translate(-50%, -50%) scale(0.5);
}

body.cursor-active .custom-cursor-ring {
    transform: translate(-50%, -50%) scale(1.2);
    border-color: #eed9ff;
}

/* Dynamic Page Transition Curtain */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #0e0e0e;
    transform: translateY(100%);
}

.transition-logo {
    opacity: 0;
    transform: scale(0.8);
}

.transition-progress-bar {
    width: 0%;
    height: 2px;
    background: linear-gradient(to right, #8a2be2, #eed9ff);
    position: absolute;
    bottom: 0;
    left: 0;
}

/* GSAP Scroll reveal defaults (prevents flash of unpositioned content) */
[data-scroll-reveal] {
    opacity: 0;
}

/* Magnetic Interaction Transition */
.magnetic-target {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Smooth Page Container */
#content-container {
    opacity: 1;
    transition: opacity 0.5s ease;
}

#content-container.loading {
    opacity: 0;
}

/* Premium Text Glow Utility */
.text-glow {
    text-shadow: 0 0 20px rgba(138, 43, 226, 0.6);
    color: rgb(138, 43, 226);
}

/* ==========================================================================
   Responsive Modal Overrides for Mobile Devices
   ========================================================================== */
@media (max-width: 767px) {
    /* Hide the left-side visual banner on mobile to save vertical space */
    .modal-container > div.primary-gradient {
        display: none !important;
    }

    /* Constrain modal height and enable internal scrolling */
    .modal-container {
        max-height: 85vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce padding around the form container */
    #form-content {
        padding: 1.5rem 1.25rem !important;
    }

    /* Tighten the header margins */
    #form-content .mb-8 {
        margin-bottom: 1rem !important;
    }

    /* Reduce form field spacing */
    #lead-form.space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.75rem !important;
    }

    /* Compact inputs and select elements */
    #lead-form input,
    #lead-form select {
        padding-top: 0.65rem !important;
        padding-bottom: 0.65rem !important;
        font-size: 0.95rem !important;
    }

    /* Compact submit button */
    #lead-form button[type="submit"] {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        margin-top: 0.75rem !important;
        font-size: 1rem !important;
    }
}