/* ========================================
   CASE STUDIES — PAGE INTRO & GLITCH
======================================== */

/* HERO ENTRANCE */

.verse-case-studies .case-intro-eyebrow {
    animation: caseReveal .65s .1s both;
}

.verse-case-studies .case-intro-description {
    animation: caseReveal .85s 1.05s both;
}

.verse-case-studies .hero-bottom {
    animation: caseReveal .75s 1.3s both;
}

.verse-case-studies .hero-background-word {
    animation: caseBackgroundReveal 1.4s .6s both;
}

@keyframes caseReveal {
    from {
        opacity: 0;
        filter: blur(5px);
        translate: 0 15px;
    }

    to {
        opacity: 1;
        filter: none;
        translate: 0 0;
    }
}

@keyframes caseBackgroundReveal {
    from {
        opacity: 0;
    }

    to {
        opacity: .035;
    }
}

/* ========================================
   MAIN HEADING — RGB GLITCH
======================================== */

.verse-case-studies .case-glitch-line {
    position: relative;
    isolation: isolate;

    animation:
        caseHeadingMaterialise 1.6s steps(1,end) both,
        caseHeadingAmbient 7s 2s infinite steps(1,end);
}

.verse-case-studies .case-glitch-line:nth-child(2) {
    animation-delay: .15s, 2.7s;
}

.verse-case-studies .case-glitch-line:nth-child(3) {
    animation-delay: .3s, 3.4s;
}

.verse-case-studies .case-glitch-line:nth-child(4) {
    animation-delay: .45s, 4.1s;
}

.verse-case-studies .case-glitch-line::before,
.verse-case-studies .case-glitch-line::after {
    content: attr(data-text);

    position: absolute;
    inset: 0;

    width: 100%;

    opacity: 0;
    pointer-events: none;

    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    white-space: nowrap;
}

.verse-case-studies .case-glitch-line::before {
    color: var(--verse-cyan);

    animation: caseCyanChannel 7s 2s infinite steps(1,end);
}

.verse-case-studies .case-glitch-line::after {
    color: var(--verse-pink);

    animation: casePinkChannel 7s 2s infinite steps(1,end);
}

.verse-case-studies .case-glitch-line:nth-child(2)::before,
.verse-case-studies .case-glitch-line:nth-child(2)::after {
    animation-delay: 2.7s;
}

.verse-case-studies .case-glitch-line:nth-child(3)::before,
.verse-case-studies .case-glitch-line:nth-child(3)::after {
    animation-delay: 3.4s;
}

.verse-case-studies .case-glitch-line:nth-child(4)::before,
.verse-case-studies .case-glitch-line:nth-child(4)::after {
    animation-delay: 4.1s;
}

@keyframes caseHeadingMaterialise {

    0%, 8% {
        opacity: 0;
        filter: none;
    }

    9%, 13% {
        opacity: 1;
        filter:
            drop-shadow(-7px 0 var(--verse-cyan))
            drop-shadow(7px 0 var(--verse-pink));
        clip-path: inset(20% 0 55% 0);
    }

    14%, 21% {
        opacity: 0;
    }

    22%, 28% {
        opacity: 1;
        clip-path: inset(55% 0 15% 0);
        filter: drop-shadow(5px 0 var(--verse-cyan));
    }

    29%, 37% {
        opacity: 0;
    }

    38%, 48% {
        opacity: 1;
        clip-path: inset(0);
        filter:
            drop-shadow(-4px 0 var(--verse-cyan))
            drop-shadow(4px 0 var(--verse-pink));
    }

    49%, 65% {
        opacity: 1;
        clip-path: inset(0);
        filter: none;
    }

    66%, 72% {
        filter:
            drop-shadow(3px 0 var(--verse-pink))
            drop-shadow(-3px 0 var(--verse-cyan));
    }

    73%, 100% {
        opacity: 1;
        clip-path: inset(0);
        filter: none;
    }
}

@keyframes caseHeadingAmbient {

    0%, 81%, 87%, 91%, 96%, 100% {
        filter: none;
        translate: 0 0;
    }

    82%, 84% {
        filter: drop-shadow(-4px 0 var(--verse-cyan));
        translate: 2px 0;
    }

    85%, 86% {
        filter: drop-shadow(4px 0 var(--verse-pink));
        translate: -2px 1px;
    }

    92%, 94% {
        filter:
            drop-shadow(-3px 0 var(--verse-cyan))
            drop-shadow(3px 0 var(--verse-pink));
    }
}

@keyframes caseCyanChannel {

    0%, 81%, 87%, 91%, 96%, 100% {
        opacity: 0;
        translate: 0 0;
        clip-path: inset(0);
    }

    82%, 84% {
        opacity: .9;
        translate: -5px 0;
        clip-path: inset(12% 0 65% 0);
    }

    85%, 86% {
        opacity: .7;
        translate: 4px 0;
        clip-path: inset(60% 0 15% 0);
    }

    92%, 94% {
        opacity: .8;
        translate: -3px 0;
        clip-path: inset(40% 0 35% 0);
    }
}

@keyframes casePinkChannel {

    0%, 81%, 87%, 91%, 96%, 100% {
        opacity: 0;
        translate: 0 0;
        clip-path: inset(0);
    }

    82%, 84% {
        opacity: .85;
        translate: 5px 0;
        clip-path: inset(55% 0 12% 0);
    }

    85%, 86% {
        opacity: .9;
        translate: -4px 0;
        clip-path: inset(10% 0 72% 0);
    }

    92%, 94% {
        opacity: .85;
        translate: 3px 0;
        clip-path: inset(68% 0 10% 0);
    }
}

/* ========================================
   PROJECT HEADING
======================================== */

.verse-case-studies .case-project-glitch {
    position: relative;
    width: fit-content;

    animation: caseProjectGlitch 8s infinite steps(1,end);
}

.verse-case-studies .case-project-glitch::before,
.verse-case-studies .case-project-glitch::after {
    content: attr(data-text);

    position: absolute;
    inset: 0;

    opacity: 0;
    pointer-events: none;

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

.verse-case-studies .case-project-glitch::before {
    color: var(--verse-cyan);
    animation: caseCyanChannel 8s infinite steps(1,end);
}

.verse-case-studies .case-project-glitch::after {
    color: var(--verse-pink);
    animation: casePinkChannel 8s infinite steps(1,end);
}

@keyframes caseProjectGlitch {

    0%, 82%, 88%, 100% {
        filter: none;
        translate: 0 0;
    }

    83%, 85% {
        filter: drop-shadow(-4px 0 var(--verse-cyan));
        translate: 2px 0;
    }

    86%, 87% {
        filter: drop-shadow(4px 0 var(--verse-pink));
        translate: -2px 0;
    }
}

/* ========================================
   PROJECT CARDS
======================================== */

.verse-case-studies .case-reveal-card {
    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.verse-case-studies .case-reveal-card:hover {
    border-color: var(--verse-cyan);

    box-shadow:
        -3px 0 rgba(57,220,255,.25),
         3px 0 rgba(255,57,124,.25);
}

.verse-case-studies .case-reveal-card:nth-child(2):hover {
    border-color: var(--verse-pink);
}

/* ========================================
   CHART HEADING — RECURRING GLITCH
======================================== */

.verse-case-studies .case-chart-glitch {
    position: relative;
    display: block;
    width: fit-content;

    animation: caseProjectGlitch 9s infinite steps(1,end);
}

.verse-case-studies .case-chart-glitch::before,
.verse-case-studies .case-chart-glitch::after {
    content: attr(data-text);

    position: absolute;
    inset: 0;

    opacity: 0;
    pointer-events: none;

    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    white-space: nowrap;
}

.verse-case-studies .case-chart-glitch::before {
    color: var(--verse-cyan);
    animation: caseCyanChannel 9s infinite steps(1,end);
}

.verse-case-studies .case-chart-glitch::after {
    color: var(--verse-pink);
    animation: casePinkChannel 9s infinite steps(1,end);
}

.verse-case-studies .case-chart-glitch:nth-child(2),
.verse-case-studies .case-chart-glitch:nth-child(2)::before,
.verse-case-studies .case-chart-glitch:nth-child(2)::after {
    animation-delay: -2s;
}

/* ========================================
   CHART — PRESERVE EXISTING ROTATION
======================================== */

.verse-case-studies .pie-chart-wrapper {
    animation: caseChartAppear 1.1s ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 75%;
}

@keyframes caseChartAppear {

    from {
        opacity: .2;
        filter: grayscale(1) blur(5px);
    }

    to {
        opacity: 1;
        filter: none;
    }
}

/* Do not animate the pie-chart transform.
   The original -90deg rotation is preserved. */

/* ========================================
   FINAL CTA
======================================== */

.verse-case-studies .case-cta-glitch {
    position: relative;
    display: block;
    width: fit-content;

    margin-inline: auto;

    animation: caseProjectGlitch 6s infinite steps(1,end);
}

.verse-case-studies .case-cta-glitch::before,
.verse-case-studies .case-cta-glitch::after {
    content: attr(data-text);

    position: absolute;
    inset: 0;

    opacity: 0;
    pointer-events: none;

    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    white-space: nowrap;
}

.verse-case-studies .case-cta-glitch::before {
    color: var(--verse-cyan);
    animation: caseCyanChannel 6s infinite steps(1,end);
}

.verse-case-studies .case-cta-glitch::after {
    color: var(--verse-pink);
    animation: casePinkChannel 6s infinite steps(1,end);
}

.verse-case-studies .case-cta-glitch:nth-child(2),
.verse-case-studies .case-cta-glitch:nth-child(2)::before,
.verse-case-studies .case-cta-glitch:nth-child(2)::after {
    animation-delay: -2s;
}

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

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

    .verse-case-studies .case-glitch-line,
    .verse-case-studies .case-glitch-line::before,
    .verse-case-studies .case-glitch-line::after,
    .verse-case-studies .case-project-glitch,
    .verse-case-studies .case-project-glitch::before,
    .verse-case-studies .case-project-glitch::after,
    .verse-case-studies .case-chart-glitch,
    .verse-case-studies .case-chart-glitch::before,
    .verse-case-studies .case-chart-glitch::after,
    .verse-case-studies .case-cta-glitch,
    .verse-case-studies .case-cta-glitch::before,
    .verse-case-studies .case-cta-glitch::after,
    .verse-case-studies .case-intro-eyebrow,
    .verse-case-studies .case-intro-description,
    .verse-case-studies .hero-bottom,
    .verse-case-studies .hero-background-word,
    .verse-case-studies .pie-chart-wrapper {
        animation: none !important;
        translate: none !important;
        filter: none !important;
    }

    .verse-case-studies .case-glitch-line::before,
    .verse-case-studies .case-glitch-line::after,
    .verse-case-studies .case-project-glitch::before,
    .verse-case-studies .case-project-glitch::after,
    .verse-case-studies .case-chart-glitch::before,
    .verse-case-studies .case-chart-glitch::after,
    .verse-case-studies .case-cta-glitch::before,
    .verse-case-studies .case-cta-glitch::after {
        opacity: 0 !important;
    }

}