/* public/app/css/offers-lift.css
 * Synopsis: Relief et texture des vignettes offres.
 * Objectif: Aspect bouton tactile, grain, profondeur.
 */

.offer {
    background:
        linear-gradient(
            155deg,
            color-mix(in srgb, #fff 22%, transparent) 0%,
            transparent 42%
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, currentColor 7%, transparent),
            color-mix(in srgb, currentColor 3%, transparent)
        );
    border-radius: .85rem;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent),
        inset 0 -3px 0 color-mix(in srgb, currentColor 16%, transparent),
        0 .35rem 0 color-mix(in srgb, currentColor 28%, transparent),
        0 .85rem 1.6rem color-mix(in srgb, var(--ink) 16%, transparent);
    isolation: isolate;
    overflow: hidden;
    position: relative;
    transform: translateY(0);
    transition:
        transform .28s cubic-bezier(.22, 1, .36, 1),
        box-shadow .28s ease,
        border-color .28s ease,
        filter .28s ease;
    will-change: transform;
}

.offer::before {
    background-image:
        repeating-linear-gradient(
            -18deg,
            transparent 0 2px,
            color-mix(in srgb, currentColor 5%, transparent) 2px 3px
        ),
        radial-gradient(
            circle at 18% 12%,
            color-mix(in srgb, #fff 28%, transparent),
            transparent 46%
        );
    content: '';
    inset: 0;
    opacity: .55;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.offer > * {
    position: relative;
    z-index: 1;
}

.offer--soon {
    border-color: color-mix(in srgb, var(--cta, var(--acid)) 55%, currentColor);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 48%, transparent),
        inset 0 -3px 0 color-mix(in srgb, var(--cta, var(--acid)) 28%, transparent),
        0 .4rem 0 color-mix(in srgb, var(--cta, var(--acid)) 42%, transparent),
        0 1rem 1.85rem color-mix(in srgb, var(--ink) 18%, transparent),
        0 0 0 1px color-mix(in srgb, var(--cta, var(--acid)) 35%, transparent);
}

.offer--locked {
    border-color: color-mix(in srgb, currentColor 35%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
        inset 0 -2px 0 color-mix(in srgb, currentColor 8%, transparent),
        0 .2rem 0 color-mix(in srgb, currentColor 12%, transparent),
        0 .45rem 1rem color-mix(in srgb, var(--ink) 10%, transparent);
    filter: grayscale(.45);
    opacity: .62;
    pointer-events: none;
    user-select: none;
}

.offer--locked .offer-badge--hl {
    background: color-mix(in srgb, currentColor 28%, transparent);
    box-shadow: none;
    color: inherit;
}