:root {
    --archive-easing: cubic-bezier(0.16, 1, 0.3, 1);

    --title-enter-duration: 900ms;

    /* All four covers start together after the title entrance. */
    --cover-enter-delay: 1000ms;
    --cover-enter-duration: 400ms;

    /* Rapid selection flash. */
    --selection-flash-duration: 80ms;
}


/* =========================================================
   TITLE ENTRANCE
   ========================================================= */

.archive-title {
    animation:
        archive-title-enter
        var(--title-enter-duration)
        var(--archive-easing)
        both;
}

@keyframes archive-title-enter {
    from {
        transform: translateY(-110%);
        filter: blur(5px);
        opacity: 0;
    }

    65% {
        filter: blur(2px);
        opacity: 1;
    }

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


/* =========================================================
   ARC COVER ENTRANCE
   ========================================================= */

/*
   The initial state is explicitly hidden. The animation's
   backwards fill mode preserves that state throughout the
   delay, so covers cannot peek up from the bottom.

   Opacity becomes visible rapidly after movement begins.
   No blur filter is applied to the covers themselves.
*/

.arc-card {
    position: relative;
    opacity: 0;
    transform: translateY(100%);

    animation:
        archive-cover-enter
        var(--cover-enter-duration)
        cubic-bezier(0.55, 0, 0.85, 0.35)
        var(--cover-enter-delay)
        both;
}

@keyframes archive-cover-enter {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    10% {
        opacity: 1;
    }

    55% {
        opacity: 1;
        transform: translateY(-5%);
    }

    78% {
        transform: translateY(1%);
    }

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


/* =========================================================
   DIRECTIONAL MOTION STREAK
   ========================================================= */

/*
   A temporary vertical streak overlay simulates the
   directional smear of a fast upward camera movement.

   This is a stylized CSS effect, not a true per-pixel
   directional motion-blur filter.
*/

.arc-card::before {
    content: "";
    position: absolute;
    inset: -35% -10%;
    z-index: 5;

    pointer-events: none;
    opacity: 0;

    background: linear-gradient(
        to bottom,
        transparent 20%,
        rgb(255 255 255 / 8%) 40%,
        rgb(255 255 255 / 18%) 50%,
        rgb(255 255 255 / 8%) 60%,
        transparent 80%
    );

    transform: translateY(45%) scaleY(2.4);

    animation:
        archive-cover-motion-streak
        var(--cover-enter-duration)
        ease-out
        var(--cover-enter-delay)
        both;
}

@keyframes archive-cover-motion-streak {
    0% {
        opacity: 0;
        transform: translateY(45%) scaleY(2.4);
    }

    15% {
        opacity: 0.9;
    }

    45% {
        opacity: 0.65;
        transform: translateY(5%) scaleY(1.8);
    }

    70% {
        opacity: 0.2;
        transform: translateY(-15%) scaleY(1.2);
    }

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


/* =========================================================
   YAKUZA-STYLE ARC SELECTION FLASH
   ========================================================= */

/*
   JavaScript adds .is-selected to the chosen card.
   The flash starts immediately, with no delay or smooth
   fade-in. The animation alternates between bright and dim.
*/

.arc-card.is-selected .arc-link {
    animation:
        archive-selection-flash
        var(--selection-flash-duration)
        steps(1, end)
        0ms
        infinite;
}

@keyframes archive-selection-flash {
    0%,
    49.9% {
        opacity: 1;
    }

    50%,
    99.9% {
        opacity: 0.75;
    }

    100% {
        opacity: 1;
    }
}


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

@media (prefers-reduced-motion: reduce) {
    .archive-title,
    .arc-card,
    .arc-card::before,
    .arc-card.is-selected .arc-link {
        animation: none !important;
    }

    .archive-title,
    .arc-card {
        transform: none;
        filter: none;
        opacity: 1;
    }

    .arc-card::before {
        display: none;
    }
}