/* ============================================================
   PREMIUM CONTACT FORM STYLING
   Minimal premium design with animated gradients
   ============================================================ */

.contact-section {
    position: relative;
    padding: 0 2rem 8rem;
    background: var(--bg-primary);
    overflow: hidden;
    scroll-margin-top: -60px;
    /* Pulls section UP under the nav */
}

/* Animated Grid Background */
.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 800px;
    width: 800px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 1rem 1rem;
    background-position: center center;
    z-index: 0;
    filter: blur(1px);
    pointer-events: none;
}

.contact-section h2,
.contact-section p,
.contact-grid {
    position: relative;
    z-index: 1;
}

/* Premium Input Field Container */
.contact-form input,
.contact-form textarea {
    position: relative;
    background-color: rgba(20, 20, 30, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.1);
    padding: 1.2rem 1.5rem;
    width: 100%;
    border-radius: 12px;
    color: white;
    font-size: 16px;
    font-family: inherit;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Allow text selection in input fields */
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(192, 185, 192, 0.6);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    background-color: rgba(20, 20, 30, 0.7);
    border-color: rgba(142, 92, 246, 0.5);
}

/* Premium Input Wrapper with Animated Border */
.premium-input-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* White Glow Layer - Disabled (no rotation on hover) */
.premium-input-wrapper::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 12px;
    padding: 3px;
    background: conic-gradient(from 0deg at 50% 50%,
            rgba(0, 0, 0, 0) 0%,
            rgba(160, 153, 216, 0.8),
            rgba(0, 0, 0, 0) 8%,
            rgba(0, 0, 0, 0) 50%,
            rgba(223, 162, 218, 0.8),
            rgba(0, 0, 0, 0) 58%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(2px);
    pointer-events: none;
    /* animation: rotateGradient 4s linear infinite; */
    /* Disabled */
}

.premium-input-wrapper:hover::before,
.premium-input-wrapper:focus-within::before {
    opacity: 0;
    /* Keep hidden - no rotation effect */
}

/* Border Glow Layer - Disabled (no rotation on hover) */
.premium-input-wrapper::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 11px;
    padding: 2px;
    background: conic-gradient(from 0deg at 50% 50%,
            #1c191c,
            #402fb5 5%,
            #1c191c 14%,
            #1c191c 50%,
            #cf30aa 60%,
            #1c191c 64%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(0.5px);
    pointer-events: none;
    /* animation: rotateGradient 4s 0.1s linear infinite; */
    /* Disabled */
}

.premium-input-wrapper:hover::after,
.premium-input-wrapper:focus-within::after {
    opacity: 0;
    /* Keep hidden - no rotation effect */
}

/* Outer Glow Effect - Disabled (no rotation on hover) */
.premium-input-wrapper .input-glow {
    position: absolute;
    inset: -15px;
    border-radius: 12px;
    background: conic-gradient(from 0deg at 50% 50%,
            rgba(0, 0, 0, 0),
            rgba(64, 47, 181, 0.4) 5%,
            rgba(0, 0, 0, 0) 38%,
            rgba(0, 0, 0, 0) 50%,
            rgba(207, 48, 170, 0.4) 60%,
            rgba(0, 0, 0, 0) 87%);
    z-index: -2;
    opacity: 0;
    filter: blur(30px);
    transition: opacity 0.4s ease;
    pointer-events: none;
    /* animation: rotateGradient 4s 0.3s linear infinite; */
    /* Disabled */
}

.premium-input-wrapper:hover .input-glow,
.premium-input-wrapper:focus-within .input-glow {
    opacity: 0;
    /* Keep hidden - no glow effect */
}

/* Continuous Rotation Animation - Disabled */
@keyframes rotateGradient {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-section {
        padding: 0 1.5rem 6rem;
    }

    .premium-input-wrapper {
        margin-bottom: 1.2rem;
    }
}

/* Ensure existing submit button stays premium */
.shimmer-btn-container {
    margin-top: 1rem;
    position: relative;
    z-index: 1;
}