/* =========================================================================
   Check-Beam display animations.
   Used on .media-item via CSS variables --animation-in / --animation-out
   plus --animation-duration and --animation-easing. Each animation has
   matching -in and -out variants so cross-fades (old element out, new
   element in) stay visually consistent.
   ========================================================================= */

@keyframes anim-none-in { from {} to {} }
@keyframes anim-none-out { from {} to {} }

/* ---------- Fade ---------- */

@keyframes anim-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes anim-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ---------- Slide ---------- */

@keyframes anim-slide-left-in {
    from { opacity: 0; transform: translateX(40%); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes anim-slide-left-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-40%); }
}

@keyframes anim-slide-right-in {
    from { opacity: 0; transform: translateX(-40%); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes anim-slide-right-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40%); }
}

@keyframes anim-slide-up-in {
    from { opacity: 0; transform: translateY(40%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes anim-slide-up-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-40%); }
}

@keyframes anim-slide-down-in {
    from { opacity: 0; transform: translateY(-40%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes anim-slide-down-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(40%); }
}

/* ---------- Zoom ---------- */

@keyframes anim-zoom-in {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes anim-zoom-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.7); }
}

@keyframes anim-zoom-out-in {
    from { opacity: 0; transform: scale(1.25); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes anim-zoom-out-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(1.25); }
}

/* ---------- Blur ---------- */

@keyframes anim-blur-in {
    from { opacity: 0; filter: blur(20px); }
    to   { opacity: 1; filter: blur(0); }
}

@keyframes anim-blur-out {
    from { opacity: 1; filter: blur(0); }
    to   { opacity: 0; filter: blur(20px); }
}

/* ---------- Flip ---------- */

@keyframes anim-flip-in {
    from { opacity: 0; transform: perspective(800px) rotateY(85deg); }
    to   { opacity: 1; transform: perspective(800px) rotateY(0); }
}

@keyframes anim-flip-out {
    from { opacity: 1; transform: perspective(800px) rotateY(0); }
    to   { opacity: 0; transform: perspective(800px) rotateY(-85deg); }
}

/* ---------- Reveal (clip-path) ---------- */

@keyframes anim-reveal-in {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

@keyframes anim-reveal-out {
    from { clip-path: inset(0 0 0 0); }
    to   { clip-path: inset(0 0 0 100%); }
}

/* ---------- Rise (slide-up with bounce) ---------- */

@keyframes anim-rise-in {
    0%   { opacity: 0; transform: translateY(60%) scale(0.95); }
    70%  { opacity: 1; transform: translateY(-3%) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes anim-rise-out {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    30%  { opacity: 1; transform: translateY(-3%) scale(1.01); }
    100% { opacity: 0; transform: translateY(60%) scale(0.95); }
}