/* ========================================
   ARTICLE — INTEGRATED REVEAL
======================================== */

.verse-article {
    --article-glitch-cyan: #39dcff;
    --article-glitch-pink: #ff397c;
}

/* ========================================
   HEADER ENTRANCE
======================================== */

.verse-article .article-back {
    animation: articleBackEnter .45s ease-out both;
}

.verse-article .article-meta {
    animation: articleMetaEnter .65s .12s ease-out both;
}

.verse-article .article-header > .eyebrow {
    animation: articleMetaEnter .55s .2s ease-out both;
}

/* ========================================
   TITLE GLITCH
======================================== */

.verse-article .article-header h1.article-title-glitch {
    position: relative;
    isolation: isolate;

    animation:
        articleTitleEnter 1.9s steps(1, end) both,
        articleTitleAmbient 11s 2.1s infinite steps(1, end);
}

.verse-article .article-title-glitch::before,
.verse-article .article-title-glitch::after {
    content: attr(data-text);

    position: absolute;
    inset: 0;
    width: 100%;

    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;

    pointer-events: none;
    opacity: 0;
}

.verse-article .article-title-glitch::before {
    color: var(--article-glitch-cyan);

    animation:
        articleCyanSlice 1.9s steps(1, end) both,
        articleCyanAmbient 11s 2.1s infinite steps(1, end);
}

.verse-article .article-title-glitch::after {
    color: var(--article-glitch-pink);

    animation:
        articlePinkSlice 1.9s steps(1, end) both,
        articlePinkAmbient 11s 2.1s infinite steps(1, end);
}

/* ========================================
   INTRODUCTION
======================================== */

.verse-article .article-header .article-intro {
    animation: articleCopyEnter .8s .65s ease-out both;
}

/* ========================================
   SUBTLE ARTICLE INTERACTIONS
======================================== */

.verse-article .article-content h2 {
    transition: text-shadow .16s ease;
}

.verse-article .article-content h2:hover {
    text-shadow:
        -2px 0 var(--article-glitch-cyan),
        2px 0 var(--article-glitch-pink);
}

.verse-article .article-content a {
    transition: text-shadow .16s ease;
}

.verse-article .article-content a:hover {
    text-shadow:
        -1px 0 var(--article-glitch-cyan),
        1px 0 var(--article-glitch-pink);
}

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

@keyframes articleBackEnter {
    from {
        opacity: 0;
        transform: translateX(-9px);
    }

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

@keyframes articleMetaEnter {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

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

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

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

@keyframes articleTitleEnter {
    0%, 10% {
        opacity: 0;
        transform: translateX(-12px);
        filter: none;
    }

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

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

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

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

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

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

/* ========================================
   INITIAL CHROMATIC SLICES
======================================== */

@keyframes articleCyanSlice {
    0%, 11%, 17%, 23%, 100% {
        opacity: 0;
        transform: translateX(0);
        clip-path: inset(0);
    }

    13% {
        opacity: .95;
        transform: translateX(-9px);
        clip-path: inset(15% 0 63% 0);
    }

    15% {
        opacity: .85;
        transform: translateX(6px);
        clip-path: inset(55% 0 12% 0);
    }

    20% {
        opacity: .9;
        transform: translateX(-5px);
        clip-path: inset(72% 0 5% 0);
    }
}

@keyframes articlePinkSlice {
    0%, 11%, 17%, 23%, 100% {
        opacity: 0;
        transform: translateX(0);
        clip-path: inset(0);
    }

    13% {
        opacity: .95;
        transform: translateX(9px);
        clip-path: inset(57% 0 13% 0);
    }

    15% {
        opacity: .85;
        transform: translateX(-6px);
        clip-path: inset(12% 0 63% 0);
    }

    20% {
        opacity: .9;
        transform: translateX(5px);
        clip-path: inset(20% 0 54% 0);
    }
}

/* ========================================
   CONTINUOUS AMBIENT EFFECTS
======================================== */

@keyframes articleTitleAmbient {
    0%, 91%, 94%, 100% {
        transform: translateX(0);
        filter: none;
    }

    92% {
        transform: translateX(-2px);
        filter: drop-shadow(3px 0 #39dcff);
    }

    93% {
        transform: translateX(2px);
        filter: drop-shadow(-3px 0 #ff397c);
    }
}

@keyframes articleCyanAmbient {
    0%, 91%, 94%, 100% {
        opacity: 0;
        transform: none;
        clip-path: inset(0);
    }

    92% {
        opacity: .7;
        transform: translateX(-5px);
        clip-path: inset(36% 0 38% 0);
    }

    93% {
        opacity: .6;
        transform: translateX(3px);
        clip-path: inset(70% 0 10% 0);
    }
}

@keyframes articlePinkAmbient {
    0%, 91%, 94%, 100% {
        opacity: 0;
        transform: none;
        clip-path: inset(0);
    }

    92% {
        opacity: .7;
        transform: translateX(5px);
        clip-path: inset(62% 0 12% 0);
    }

    93% {
        opacity: .6;
        transform: translateX(-3px);
        clip-path: inset(15% 0 60% 0);
    }
}

/* ========================================
   REDUCED MOTION
======================================== */

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

    .verse-article .article-back,
    .verse-article .article-meta,
    .verse-article .article-header > .eyebrow,
    .verse-article .article-header h1.article-title-glitch,
    .verse-article .article-title-glitch::before,
    .verse-article .article-title-glitch::after,
    .verse-article .article-header .article-intro {
        animation: none !important;
        transition: none !important;
    }

    .verse-article .article-back,
    .verse-article .article-meta,
    .verse-article .article-header > .eyebrow,
    .verse-article .article-header h1.article-title-glitch,
    .verse-article .article-header .article-intro {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .verse-article .article-title-glitch::before,
    .verse-article .article-title-glitch::after {
        opacity: 0 !important;
    }

    .verse-article .article-content h2:hover,
    .verse-article .article-content a:hover {
        text-shadow: none;
    }

}