/* ==========================================
   VERSE — CONTACT PAGE
   Atmospheric / Chromatic / Minimal
========================================== */

/* ==========================================
   THEME VARIABLES
========================================== */

.verse-contact {
    --verse-bg: #080b20;
    --verse-text: #f5f3ff;
    --verse-muted: #b4b8d3;

    --verse-pink: #ff397c;
    --verse-cyan: #39dcff;
    --verse-purple: #894aff;

    --verse-surface: #14162e;
    --verse-line: rgba(150, 150, 210, .28);

    margin: 0;

    color: var(--verse-text);
    background: var(--verse-bg);
    background-image: none;

    font: 500 16px/1.7 "DM Sans", sans-serif;

    -webkit-font-smoothing: antialiased;
}

/* LIGHT MODE */

html[data-theme="light"] .verse-contact {
    --verse-bg: #f0e7f8;
    --verse-text: #17112f;
    --verse-muted: #514c6e;

    --verse-pink: #e80065;
    --verse-cyan: #007da8;
    --verse-purple: #7543d9;

    --verse-surface: #e4d9f4;
    --verse-line: rgba(60, 40, 100, .23);
}

/* ==========================================
   GLOBAL RESETS
========================================== */

.verse-contact *,
.verse-contact *::before,
.verse-contact *::after {
    box-sizing: border-box;
}

.verse-contact .effect {
    opacity: 1;
    animation: none;
    clip-path: none;
    transform: none;
    overflow: clip;
}

.verse-contact img {
    image-rendering: auto;
}

.verse-contact h1,
.verse-contact h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 900;
    letter-spacing: -.045em;
}

.verse-contact .eyebrow {
    margin: 0 0 28px;

    color: var(--verse-cyan);

    font: 800 11px/1.5 "DM Sans", sans-serif;
    letter-spacing: .16em;
}

.verse-contact .eyebrow::before {
    content: none;
}

/* ==========================================
   NAVIGATION
========================================== */

.verse-contact .navbar {
    position: relative;
    z-index: 20;

    max-width: 1440px;

    padding:
        22px
        clamp(20px, 5vw, 70px);

    border-bottom: 1px solid var(--verse-line);
}

.verse-contact .logo {
    color: var(--verse-text);

    font: 900 25px/1 "Barlow Condensed", sans-serif;

    letter-spacing: -.03em;
    text-transform: uppercase;
}

.verse-contact .logo img {
    width: 42px;
    height: 42px;

    object-fit: cover;
    border-radius: 50%;

    box-shadow:
        -2px 0 var(--verse-cyan),
         2px 0 var(--verse-pink);
}

.verse-contact .navbar nav a {
    color: var(--verse-muted);

    font: 800 12px "DM Sans", sans-serif;

    letter-spacing: .04em;
    text-transform: uppercase;

    transition: color .2s ease;
}

.verse-contact .navbar nav a:hover,
.verse-contact .navbar nav a[aria-current="page"] {
    color: var(--verse-pink);
}

.verse-contact .theme-toggle {
    padding: 8px 12px;

    color: var(--verse-text);
    background: transparent;

    border: 1px solid var(--verse-purple);
    box-shadow: none;

    font: 800 11px "DM Sans", sans-serif;

    letter-spacing: .05em;
}

.verse-contact .theme-toggle:hover,
.verse-contact .theme-toggle:focus-visible {
    color: var(--verse-cyan);
    border-color: var(--verse-cyan);
    box-shadow: none;
}

/* ==========================================
   CONTACT SECTION
========================================== */

.verse-contact .contact-section {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    max-width: 1440px;
    min-height: 720px;

    margin: 0 auto;

    padding:
        95px
        clamp(20px, 5vw, 70px)
        100px;

    background: transparent;

    border: none;
    box-shadow: none;

    overflow: hidden;
}

.verse-contact .contact-content {
    position: relative;
    z-index: 2;
}

/* ==========================================
   ATMOSPHERE
========================================== */

.verse-contact .contact-atmosphere {
    position: absolute;
    z-index: -1;

    inset: 0;

    pointer-events: none;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 85% 15%,
            rgba(136, 45, 255, .24),
            transparent 48%
        ),

        radial-gradient(
            ellipse at 5% 65%,
            rgba(236, 26, 108, .12),
            transparent 45%
        ),

        radial-gradient(
            ellipse at 70% 95%,
            rgba(25, 155, 255, .12),
            transparent 45%
        );
}

/* Subtle halftone texture */

.verse-contact .contact-atmosphere::after {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(255, 255, 255, .18) .7px,
            transparent .9px
        );

    background-size: 6px 6px;

    opacity: .12;
}

.verse-contact .contact-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);
    opacity: .28;

    animation: contactFloat 13s ease-in-out infinite alternate;
}

.verse-contact .orb-one {
    width: 400px;
    height: 400px;

    top: -20%;
    right: -10%;

    background: #ad35ff;
}

.verse-contact .orb-two {
    width: 300px;
    height: 300px;

    bottom: -20%;
    left: -10%;

    background: #ed256c;

    animation-delay: -4s;
}

.verse-contact .orb-three {
    width: 350px;
    height: 350px;

    bottom: -30%;
    right: 20%;

    background: #126bff;

    animation-delay: -8s;
}

@keyframes contactFloat {

    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(30px, -30px) scale(1.12);
    }

}

/* ==========================================
   CONTACT HEADING
========================================== */

.verse-contact .contact-heading {
    margin-bottom: 65px;
}

.verse-contact .contact-heading h1 {
    max-width: none;
    margin: 0;

    color: var(--verse-text);

    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(100px, 13vw, 190px);
    font-weight: 900;

    line-height: .77;
    letter-spacing: -.075em;

    text-transform: uppercase;
}

/* Heading lines */

.verse-contact .heading-line {
    display: block;
    width: fit-content;
}

.verse-contact .heading-line:first-child {
    color: var(--verse-text);

    text-shadow:
        -3px 0 var(--verse-cyan),
         3px 0 var(--verse-pink);
}

.verse-contact .heading-shift {
    margin-left: clamp(30px, 8vw, 115px);

    color: var(--verse-pink);

    text-shadow:
        -5px 2px var(--verse-cyan),
         5px -2px rgba(130, 45, 255, .75);
}

.verse-contact .period {
    color: var(--verse-text);
}

/* Intro */

.verse-contact .contact-intro {
    max-width: 600px;

    margin: 45px 0 0;

    color: var(--verse-muted);

    font: 500 clamp(15px, 1.3vw, 18px)/1.8 "DM Sans", sans-serif;
}

/* ==========================================
   CONTACT GRID
========================================== */

.verse-contact .contact-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 25px;

    width: 100%;
    margin: 0;
    padding: 0;
}

/* ==========================================
   CONTACT CARDS
========================================== */

.verse-contact .contact-item {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    min-height: 320px;

    margin: 0;
    padding: 30px;

    color: var(--verse-text);

    background:
        linear-gradient(
            145deg,
            rgba(137, 74, 255, .15),
            transparent 75%
        ),
        var(--verse-surface);

    border: 1px solid var(--verse-line);
    border-radius: 0;

    box-shadow: none;

    text-decoration: none;
    overflow: hidden;

    transition:
        transform .3s ease,
        border-color .3s ease;
}

.verse-contact .contact-item:hover {
    transform: translateY(-7px);

    background-color: var(--verse-surface);
    border-color: var(--verse-cyan);

    box-shadow: none;
}

/* Card metadata */

.verse-contact .contact-item-top {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 55px;
}

.verse-contact .contact-index {
    color: var(--verse-cyan);

    font: 800 10px "DM Sans", sans-serif;

    letter-spacing: .14em;
}

.verse-contact .contact-arrow {
    color: var(--verse-pink);

    font-size: 28px;
    line-height: 1;

    transition: transform .2s ease;
}

.verse-contact .contact-item:hover .contact-arrow {
    transform: translate(4px, -4px);
}

/* Card content */

.verse-contact .contact-item-content {
    position: relative;
    z-index: 2;

    margin-top: auto;
}

.verse-contact .contact-label {
    display: block;

    margin-bottom: 14px;

    color: var(--verse-muted);

    font: 800 10px "DM Sans", sans-serif;

    letter-spacing: .16em;
}

.verse-contact .contact-item h2 {
    margin: 0 0 25px;

    color: var(--verse-text);

    font: 900 clamp(55px, 6vw, 90px)/.85 "Barlow Condensed", sans-serif;

    letter-spacing: -.055em;
}

.verse-contact .contact-item h2 span {
    color: var(--verse-pink);

    text-shadow: -2px 0 var(--verse-cyan);
}

/* Contact link */

.verse-contact .contact-link {
    display: inline-block;

    max-width: 100%;

    padding-top: 15px;

    color: var(--verse-cyan);

    border-top: 1px solid var(--verse-line);

    font: 700 clamp(14px, 1.5vw, 18px)/1.5 "DM Sans", sans-serif;

    overflow-wrap: anywhere;
}

/* Decorative background text */

.verse-contact .contact-item-background {
    position: absolute;
    z-index: -1;

    right: -5px;
    bottom: 35px;

    color: var(--verse-purple);

    font: 900 200px/.8 "Barlow Condensed", sans-serif;

    letter-spacing: -.08em;

    opacity: .1;

    pointer-events: none;
}

/* ==========================================
   CONTACT BOTTOM
========================================== */

.verse-contact .contact-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    flex-wrap: wrap;
    gap: 20px;

    margin-top: 55px;
    padding-top: 20px;

    border-top: 1px solid var(--verse-line);
}

.verse-contact .contact-bottom > span {
    color: var(--verse-muted);

    font: 800 10px "DM Sans", sans-serif;

    letter-spacing: .14em;
}

/* Back link */

.verse-contact .back-link {
    display: inline-flex;
    align-items: center;

    padding: 0;
    margin: 0;

    color: var(--verse-cyan);
    background: transparent;

    border: none;
    box-shadow: none;

    font: 800 11px "DM Sans", sans-serif;

    letter-spacing: .1em;
    text-decoration: none;

    transition: color .2s ease;
}

.verse-contact .back-link:hover {
    color: var(--verse-pink);

    background: transparent;
    border: none;
    box-shadow: none;

    transform: none;
}

/* ==========================================
   FOOTER
========================================== */

.verse-contact .retro-footer {
    padding: 40px 25px;

    color: var(--verse-muted);

    background: rgba(0, 0, 0, .2);

    border-top: 1px solid var(--verse-line);

    font-family: "DM Sans", sans-serif;
}

.verse-contact .footer-nav a {
    color: var(--verse-text);

    font: 800 12px "DM Sans", sans-serif;

    letter-spacing: .08em;
}

.verse-contact .footer-nav a:hover {
    color: var(--verse-pink);
}

.verse-contact .footer-link-icon {
    color: var(--verse-text);
}

.verse-contact .footer-link-icon svg {
    fill: currentColor;
}

.verse-contact .footer-copy {
    color: var(--verse-muted);

    font: 500 12px "DM Sans", sans-serif;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 800px) {

    .verse-contact .navbar {
        flex-wrap: wrap;
    }

    .verse-contact .navbar nav {
        width: 100%;

        flex-wrap: wrap;
        gap: 15px;
    }

    .verse-contact .contact-section {
        min-height: auto;

        padding:
            75px
            clamp(20px, 5vw, 45px)
            85px;
    }

    .verse-contact .contact-heading h1 {
        font-size: clamp(90px, 15vw, 140px);
    }

    .verse-contact .contact-grid {
        grid-template-columns: 1fr;
    }

    .verse-contact .contact-item {
        min-height: 290px;
    }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 520px) {

    .verse-contact .contact-section {
        padding:
            55px
            22px
            70px;
    }

    .verse-contact .contact-heading {
        margin-bottom: 45px;
    }

    .verse-contact .contact-heading h1 {
        font-size: clamp(75px, 18vw, 105px);
    }

    .verse-contact .heading-shift {
        margin-left: 25px;
    }

    .verse-contact .contact-intro {
        margin-top: 35px;

        font-size: 15px;
    }

    .verse-contact .contact-grid {
        gap: 18px;
    }

    .verse-contact .contact-item {
        min-height: 270px;
        padding: 25px;
    }

    .verse-contact .contact-item-top {
        margin-bottom: 45px;
    }

    .verse-contact .contact-item h2 {
        font-size: clamp(55px, 13vw, 75px);
    }

    .verse-contact .contact-item-background {
        font-size: 150px;
    }

    .verse-contact .contact-link {
        font-size: 15px;
    }

    .verse-contact .contact-bottom {
        margin-top: 45px;
    }

}

/* ==========================================
   ACCESSIBILITY
========================================== */

@media (prefers-reduced-motion: reduce) {

    .verse-contact *,
    .verse-contact *::before,
    .verse-contact *::after {
        animation: none !important;
        transition: none !important;
    }

}