/* public/app/css/offers-lift-motion.css
 * Synopsis: Motion wow des vignettes offres.
 * Objectif: Hover lift, press, shine Free, reduced-motion.
 */

.offer:not(.offer--locked):hover,
.offer:not(.offer--locked):focus-within {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent),
        inset 0 -2px 0 color-mix(in srgb, currentColor 12%, transparent),
        0 .55rem 0 color-mix(in srgb, currentColor 24%, transparent),
        0 1.35rem 2.4rem color-mix(in srgb, var(--ink) 22%, transparent);
    filter: saturate(1.06);
    transform: translateY(-.45rem) scale(1.015);
}

.offer--soon:hover,
.offer--soon:focus-within {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
        inset 0 -2px 0 color-mix(in srgb, var(--cta, var(--acid)) 22%, transparent),
        0 .6rem 0 color-mix(in srgb, var(--cta, var(--acid)) 38%, transparent),
        0 1.5rem 2.6rem color-mix(in srgb, var(--ink) 24%, transparent),
        0 0 1.5rem color-mix(in srgb, var(--cta, var(--acid)) 28%, transparent);
    transform: translateY(-.55rem) scale(1.02);
}

.offer:not(.offer--locked):active {
    box-shadow:
        inset 0 2px 6px color-mix(in srgb, currentColor 18%, transparent),
        inset 0 -1px 0 color-mix(in srgb, currentColor 10%, transparent),
        0 .12rem 0 color-mix(in srgb, currentColor 20%, transparent),
        0 .35rem .8rem color-mix(in srgb, var(--ink) 14%, transparent);
    transform: translateY(.12rem) scale(.995);
}

.offer--soon::after {
    animation: offer-shine 4.8s ease-in-out infinite;
    background: linear-gradient(
        110deg,
        transparent 35%,
        color-mix(in srgb, #fff 38%, transparent) 48%,
        transparent 62%
    );
    content: '';
    inset: -20% -40%;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

@keyframes offer-shine {
    0%, 62%, 100% {
        opacity: 0;
        transform: translateX(-18%) rotate(8deg);
    }

    72%, 82% {
        opacity: .7;
        transform: translateX(18%) rotate(8deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .offer {
        transition: none;
    }

    .offer:hover,
    .offer:focus-within,
    .offer:active,
    .offer--soon:hover,
    .offer--soon:focus-within {
        filter: none;
        transform: none;
    }

    .offer--soon::after {
        animation: none;
        display: none;
    }
}