/* Shared comparison selection/exit animation (home + /compare + admin preview) */

:root {
    --comparison-selection-duration: 230ms;
    --comparison-exit-duration: 360ms;
    --comparison-enter-duration: 320ms;
    --comparison-enter-fade-duration: 320ms;
    --comparison-selection-easing: cubic-bezier(0, 0, 1, 1);
    --comparison-enter-easing: cubic-bezier(0, 0, 1, 1);
    --comparison-exit-easing: cubic-bezier(0, 0, 1, 1);
    --comparison-winner-scale: 1.07;
    --comparison-loser-scale: 0.82;
}

.comparison-winner-grow,
.comparison-loser-shrink,
.comparison-winner-exit-left,
.comparison-winner-exit-right,
.comparison-loser-exit,
.comparison-pair-swap-hidden,
.comparison-pair-enter-prep,
.comparison-pair-enter {
    position: relative;
    transition: none !important;
    pointer-events: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.comparison-pair-swap-hidden {
    visibility: hidden;
    opacity: 0 !important;
}

.comparison-winner-grow {
    animation: comparisonWinnerGrow var(--comparison-selection-duration)
        var(--comparison-selection-easing) forwards;
    z-index: 3;
}

@keyframes comparisonWinnerGrow {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(var(--comparison-winner-scale));
    }
}

.comparison-loser-shrink {
    animation: comparisonLoserShrink var(--comparison-selection-duration)
        var(--comparison-selection-easing) forwards;
}

@keyframes comparisonLoserShrink {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(var(--comparison-loser-scale));
        opacity: 0.45;
    }
}

.comparison-winner-exit-left {
    animation: comparisonWinnerExitLeft var(--comparison-exit-duration)
        var(--comparison-exit-easing) forwards;
    z-index: 3;
}

.comparison-winner-exit-right {
    animation: comparisonWinnerExitRight var(--comparison-exit-duration)
        var(--comparison-exit-easing) forwards;
    z-index: 3;
}

@keyframes comparisonWinnerExitLeft {
    from {
        transform: scale(var(--comparison-winner-scale)) translate(0, 0) rotate(0deg);
        opacity: 1;
    }

    to {
        transform: scale(1.02) translate(-108px, -98px) rotate(-8deg);
        opacity: 0;
    }
}

@keyframes comparisonWinnerExitRight {
    from {
        transform: scale(var(--comparison-winner-scale)) translate(0, 0) rotate(0deg);
        opacity: 1;
    }

    to {
        transform: scale(1.02) translate(108px, -98px) rotate(8deg);
        opacity: 0;
    }
}

.comparison-loser-exit {
    animation: comparisonLoserExit var(--comparison-exit-duration)
        var(--comparison-exit-easing) forwards;
}

@keyframes comparisonLoserExit {
    from {
        transform: scale(var(--comparison-loser-scale));
        opacity: 0.45;
    }

    to {
        transform: scale(0.65);
        opacity: 0;
    }
}

.comparison-pair-enter-prep {
    opacity: 0;
    transform: scale(0.65);
}

.comparison-pair-enter {
    animation:
        comparisonPairEnterScale var(--comparison-enter-duration)
            var(--comparison-enter-easing) forwards,
        comparisonPairEnterFade var(--comparison-enter-fade-duration)
            var(--comparison-enter-easing) forwards;
}

@keyframes comparisonPairEnterScale {
    from {
        transform: scale(0.65);
    }

    to {
        transform: scale(1);
    }
}

@keyframes comparisonPairEnterFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.home-face-card:focus,
.face-card:focus,
.comparison-preview-card:focus {
    outline: none;
}

.home-face-card:focus-visible,
.face-card:focus-visible,
.comparison-preview-card:focus-visible {
    outline: 2px solid rgba(21, 32, 51, 0.72);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .comparison-winner-grow,
    .comparison-loser-shrink,
    .comparison-winner-exit-left,
    .comparison-winner-exit-right,
    .comparison-loser-exit,
    .comparison-pair-enter {
        animation-duration: 1ms !important;
        animation-timing-function: linear !important;
    }
}