/* ==========================================================================
 * DSTAIR — Contact Page
 * Background with depth, form focus effects, sticky profile card.
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * § 1. BACKGROUND
 * -------------------------------------------------------------------------- */
.contact-background {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(26, 58, 110, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 75%, rgba(var(--color-accent-rgb), 0.06) 0%, transparent 40%),
        var(--color-dark);
    z-index: var(--z-background);
}


/* --------------------------------------------------------------------------
 * § 2. FORM FIELDS
 * -------------------------------------------------------------------------- */
.contact-input,
.contact-textarea {
    transition: all var(--transition-base);
}

.contact-input:focus,
.contact-textarea:focus,
input:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(var(--color-highlight-rgb), 0.1);
    border-color: rgba(var(--color-highlight-rgb), 0.3) !important;
}


/* --------------------------------------------------------------------------
 * § 3. STICKY PROFILE CARD
 * -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .sticky {
        position: sticky;
        position: -webkit-sticky;
    }
}


/* --------------------------------------------------------------------------
 * § 4. PROFILE IMAGE
 * -------------------------------------------------------------------------- */
.aspect-square {
    aspect-ratio: 1 / 1;
}

.glass-card img {
    transition: transform 0.4s var(--ease-out);
    object-position: center;
}

.glass-card:hover img {
    transform: scale(1.03);
}


/* --------------------------------------------------------------------------
 * § 5. SOCIAL LINK ICONS
 * -------------------------------------------------------------------------- */
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: var(--white-05);
    border: 1px solid var(--white-10);
    color: var(--white-60);
    transition: all var(--transition-base);
}

.social-link:hover {
    color: var(--color-highlight);
    border-color: rgba(var(--color-highlight-rgb), 0.3);
    background: rgba(var(--color-highlight-rgb), 0.08);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-lime);
}