.logo-glitch {
    position: relative;
    display: inline-block;
    isolation: isolate;
    line-height: 1;
    animation: glitch-reveal 0.6s ease-in-out both;
}

.logo-glitch::before,
.logo-glitch::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--color-paper);
    content: attr(data-text);
    opacity: 0;
    pointer-events: none;
}

.logo-glitch:hover::before,
.logo-glitch:focus-visible::before {
    left: -3px;
    text-shadow: 2px 0 var(--color-ink);
    animation: glitch-slice-one 0.3s 5 linear alternate-reverse,
        glitch-hide 1.5s forwards;
}

.logo-glitch:hover::after,
.logo-glitch:focus-visible::after {
    left: 3px;
    text-shadow: -2px 0 var(--color-ink);
    animation: glitch-slice-two 0.375s 4 linear alternate-reverse,
        glitch-hide 1.5s forwards;
}

.reveal {
    --reveal-delay: 0s;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out var(--reveal-delay),
        transform 0.8s ease-out var(--reveal-delay);
}

.reveal.hover-invert {
    transition: opacity 0.8s ease-out var(--reveal-delay),
        transform 0.8s ease-out var(--reveal-delay),
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-100 {
    --reveal-delay: 0.1s;
}

.reveal-delay-200 {
    --reveal-delay: 0.2s;
}

.process-timeline {
    --timeline-progress: 0;
}

.timeline-progress {
    box-shadow: 0 0 8px rgb(255 255 255 / 35%);
    transform: scaleY(var(--timeline-progress));
    transform-origin: top;
    will-change: transform;
}

@keyframes glitch-hide {
    0%,
    95% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes glitch-slice-one {
    0% { clip-path: inset(20% 0 80% 0); transform: translate(-2px, 1px); }
    20% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px); }
    40% { clip-path: inset(40% 0 50% 0); transform: translate(-2px, 2px); }
    60% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -2px); }
    80% { clip-path: inset(10% 0 70% 0); transform: translate(-1px, 1px); }
    100% { clip-path: inset(30% 0 40% 0); transform: translate(1px, -1px); }
}

@keyframes glitch-slice-two {
    0% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -1px); }
    20% { clip-path: inset(30% 0 20% 0); transform: translate(-2px, 1px); }
    40% { clip-path: inset(70% 0 10% 0); transform: translate(2px, -2px); }
    60% { clip-path: inset(20% 0 50% 0); transform: translate(-2px, 2px); }
    80% { clip-path: inset(50% 0 30% 0); transform: translate(1px, -1px); }
    100% { clip-path: inset(5% 0 80% 0); transform: translate(-1px, 1px); }
}

@keyframes glitch-reveal {
    0% { opacity: 0; transform: scale(0.9) skewX(20deg); filter: blur(4px); }
    20% { opacity: 1; transform: scale(1.1) skewX(-15deg); filter: blur(0); }
    40% { transform: scale(0.95) skewX(10deg); }
    60% { transform: scale(1.02) skewX(-5deg); }
    80% { transform: scale(0.99) skewX(2deg); }
    100% { transform: scale(1) skewX(0); }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .logo-glitch,
    .logo-glitch::before,
    .logo-glitch::after {
        animation: none;
    }

    .reveal,
    .reveal.hover-invert {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .process-card {
        transition: none;
    }
}