/* ========================================
   CONTACT — INTEGRATED PAGE REVEAL
======================================== */

.verse-contact {
    --reveal-cyan: #39dcff;
    --reveal-pink: #ff397c;
    --reveal-purple: #894aff;
}

/* ========================================
   HEADING ENTRANCE
======================================== */

.verse-contact .contact-heading {
    position: relative;
    isolation: isolate;
}

.verse-contact .contact-heading .eyebrow {
    animation:
        contactEyebrowReveal .65s ease-out both,
        visibleFlicker 5s 2s infinite steps(1, end);
}

.verse-contact .contact-heading h1 {
    position: relative;

    animation: contactHeadingReveal 1.4s ease-out both;
}

.verse-contact .contact-heading .heading-line {
    position: relative;
    will-change: transform;
}

/* LET'S */

.verse-contact .contact-heading .heading-line:first-child {
    animation:
        contactLineOne 2s steps(1, end) both,
        contactAmbientGlitch 8s 2s infinite steps(1, end);
}

/* TALK. */

.verse-contact .contact-heading .heading-line:nth-child(2) {
    animation:
        contactLineTwo 2s steps(1, end) both,
        contactAmbientGlitch 8s 2.5s infinite steps(1, end);
}

/* ========================================
   TEMPORARY RGB DISTORTION
======================================== */

.verse-contact .contact-heading .glitch-text::before {
    animation:
        contactIntroCyan 2s steps(1, end) both,
        strongGlitchOne 4s 2s infinite steps(1, end);
}

.verse-contact .contact-heading .glitch-text::after {
    animation:
        contactIntroPink 2s steps(1, end) both,
        strongGlitchTwo 4s 2s infinite steps(1, end);
}

/* ========================================
   SUPPORTING TEXT
======================================== */

.verse-contact .contact-heading .contact-intro {
    animation: contactCopyReveal 1.1s .65s ease-out both;
}

/* ========================================
   CONTACT CARD ENTRANCE
======================================== */

.verse-contact .contact-grid {
    perspective: 1000px;
}

.verse-contact .contact-item:nth-child(1) {
    animation: contactCardReveal .8s .85s cubic-bezier(
        .16, 1, .3, 1
    ) both;
}

.verse-contact .contact-item:nth-child(2) {
    animation: contactCardReveal .8s 1.05s cubic-bezier(
        .16, 1, .3, 1
    ) both;
}

.verse-contact .contact-item.glitch-card:hover {
    transform: translate(-5px, -5px);

    box-shadow:
        5px 5px 0 var(--reveal-pink),
        10px 10px 0 rgba(57, 220, 255, .35);
}

/* ========================================
   BOTTOM DETAILS
======================================== */

.verse-contact .contact-bottom {
    animation: contactBottomReveal .7s 1.35s ease-out both;
}

/* ========================================
   ENTRANCE KEYFRAMES
======================================== */

@keyframes contactEyebrowReveal {

    0% {
        opacity: 0;
        transform: translateY(8px);
        letter-spacing: .45em;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes contactHeadingReveal {

    0% {
        opacity: .65;
    }

    100% {
        opacity: 1;
    }

}

@keyframes contactLineOne {

    0% {
        opacity: 0;
        transform: translateX(-18px);
        filter: none;
    }

    12% {
        opacity: 1;
        transform: translateX(5px);

        filter:
            drop-shadow(-8px 0 var(--reveal-cyan))
            drop-shadow(8px 0 var(--reveal-pink));
    }

    17% {
        transform: translateX(-5px);

        filter:
            drop-shadow(6px 0 var(--reveal-cyan))
            drop-shadow(-6px 0 var(--reveal-pink));
    }

    22% {
        transform: translateX(2px);
        filter: none;
    }

    28%, 100% {
        opacity: 1;
        transform: translateX(0);
        filter: none;
    }

}

@keyframes contactLineTwo {

    0%, 18% {
        opacity: 0;
        transform: translateX(22px);
        filter: none;
    }

    23% {
        opacity: 1;
        transform: translateX(-8px);

        filter:
            drop-shadow(-12px 0 var(--reveal-cyan))
            drop-shadow(12px 0 var(--reveal-pink));
    }

    27% {
        transform: translateX(9px);

        filter:
            drop-shadow(8px 0 var(--reveal-cyan))
            drop-shadow(-8px 0 var(--reveal-pink));
    }

    31% {
        transform: translateX(-4px);

        filter:
            drop-shadow(-5px 0 var(--reveal-cyan))
            drop-shadow(5px 0 var(--reveal-pink));
    }

    36%, 100% {
        opacity: 1;
        transform: translateX(0);
        filter: none;
    }

}

/* ========================================
   CHROMATIC GLITCH SLICES
======================================== */

@keyframes contactIntroCyan {

    0%, 5%, 13%, 18%, 23%, 28%, 100% {
        opacity: 0;
        transform: translateX(0);
        clip-path: inset(0);
    }

    7% {
        opacity: 1;
        transform: translateX(-11px);
        clip-path: inset(12% 0 60% 0);
    }

    10% {
        opacity: .9;
        transform: translateX(8px);
        clip-path: inset(50% 0 20% 0);
    }

    20% {
        opacity: 1;
        transform: translateX(-15px);
        clip-path: inset(70% 0 5% 0);
    }

    25% {
        opacity: .85;
        transform: translateX(10px);
        clip-path: inset(30% 0 40% 0);
    }

}

@keyframes contactIntroPink {

    0%, 5%, 13%, 18%, 23%, 28%, 100% {
        opacity: 0;
        transform: translateX(0);
        clip-path: inset(0);
    }

    7% {
        opacity: 1;
        transform: translateX(11px);
        clip-path: inset(55% 0 15% 0);
    }

    10% {
        opacity: .9;
        transform: translateX(-8px);
        clip-path: inset(10% 0 65% 0);
    }

    20% {
        opacity: 1;
        transform: translateX(15px);
        clip-path: inset(15% 0 60% 0);
    }

    25% {
        opacity: .85;
        transform: translateX(-10px);
        clip-path: inset(60% 0 10% 0);
    }

}

/* ========================================
   PARAGRAPH REVEAL
======================================== */

@keyframes contactCopyReveal {

    0% {
        opacity: 0;
        transform: translateY(14px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

/* ========================================
   CARD REVEAL
======================================== */

@keyframes contactCardReveal {

    0% {
        opacity: 0;
        transform: translateY(24px) skewY(1deg);

        filter:
            drop-shadow(-7px 0 var(--reveal-cyan))
            drop-shadow(7px 0 var(--reveal-pink));
    }

    35% {
        opacity: 1;

        filter:
            drop-shadow(-3px 0 var(--reveal-cyan))
            drop-shadow(3px 0 var(--reveal-pink));
    }

    65% {
        transform: translateY(-3px) skewY(0);
        filter: none;
    }

    100% {
        opacity: 1;
        transform: translateY(0) skewY(0);
        filter: none;
    }

}

/* ========================================
   BOTTOM DETAILS
======================================== */

@keyframes contactBottomReveal {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* ========================================
   CONTINUOUS AMBIENT GLITCH
======================================== */

@keyframes contactAmbientGlitch {

    0%, 88%, 94%, 97%, 100% {
        transform: translateX(0) skewX(0);
        filter: none;
    }

    89% {
        transform: translateX(-4px) skewX(-2deg);
        filter: drop-shadow(5px 0 #39dcff);
    }

    90% {
        transform: translateX(5px) skewX(2deg);
        filter: drop-shadow(-5px 0 #ff397c);
    }

    92% {
        transform: translateX(-2px);

        filter:
            drop-shadow(3px 0 #39dcff)
            drop-shadow(-3px 0 #ff397c);
    }

    95% {
        transform: translateX(2px);
    }

}

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

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

    .verse-contact .contact-heading .eyebrow,
    .verse-contact .contact-heading h1,
    .verse-contact .contact-heading .heading-line,
    .verse-contact .contact-heading .glitch-text::before,
    .verse-contact .contact-heading .glitch-text::after,
    .verse-contact .contact-heading .contact-intro,
    .verse-contact .contact-item,
    .verse-contact .contact-bottom {
        animation: none !important;
        transition: none !important;
    }

    .verse-contact .contact-heading .eyebrow,
    .verse-contact .contact-heading h1,
    .verse-contact .contact-heading .heading-line,
    .verse-contact .contact-heading .contact-intro,
    .verse-contact .contact-item,
    .verse-contact .contact-bottom {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .verse-contact .contact-heading .glitch-text::before,
    .verse-contact .contact-heading .glitch-text::after {
        opacity: 0 !important;
    }

}