/* ------------------------------------------------------------------
   Card selector ("filet encadré"): on hover a one-pixel frame draws
   around the image from two opposite corners — the same gesture as the
   quote frame's "Rideau". On click the image eases forward and the
   sibling cards fade, then retro-selector.js navigates.

   Markup: a.pgi-retro-target > .pgi-retro-selector inside the image
   wrapper. Wrap targets in .pgi-retro-group to fade siblings on click.
   Used by the sub-categories cards block and the single header mega menu.
   (Class names are kept from the former 8-bit selector.)
   ------------------------------------------------------------------ */
.pgi-retro-target {
    --pgi-retro-color: var(--pgi-laguna);
    --pgi-retro-inset: 6px;
    --pgi-retro-radius: 14px;
    --pgi-retro-ease: cubic-bezier(0.77, 0, 0.18, 1);
}

.pgi-retro-target:focus-visible {
    outline: none;
}

.pgi-retro-selector {
    position: absolute;
    inset: var(--pgi-retro-inset);
    z-index: 1;
    border-radius: var(--pgi-retro-radius);
    pointer-events: none;
    background:
        linear-gradient(var(--pgi-retro-color), var(--pgi-retro-color)) left top / 0% 1px no-repeat,
        linear-gradient(var(--pgi-retro-color), var(--pgi-retro-color)) right bottom / 0% 1px no-repeat,
        linear-gradient(var(--pgi-retro-color), var(--pgi-retro-color)) right top / 1px 0% no-repeat,
        linear-gradient(var(--pgi-retro-color), var(--pgi-retro-color)) left bottom / 1px 0% no-repeat;
    transition: background-size 600ms var(--pgi-retro-ease);
}

/* Keyboard focus and the clicked card show the frame on any device. */
.pgi-retro-target:focus-visible .pgi-retro-selector,
.pgi-retro-target.is-selected .pgi-retro-selector {
    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
    transition-duration: 1000ms;
}

/* Children, not the target itself, so scroll-reveal inline opacity is left alone. */
.pgi-retro-target > * {
    transition: opacity 600ms ease;
}

.pgi-retro-group.has-selection .pgi-retro-target:not(.is-selected) > * {
    opacity: 0.3;
}

/* Mouse pointers only: frame on hover, image easing forward on click. */
@media (hover: hover) and (pointer: fine) {
    .pgi-retro-target:hover .pgi-retro-selector {
        background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
        transition-duration: 1000ms;
    }

    .pgi-retro-target img {
        transition: transform 1400ms cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .pgi-retro-target.is-selected img {
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pgi-retro-selector,
    .pgi-retro-target > *,
    .pgi-retro-target img {
        transition: none;
    }
}