/* =========================================================
   Space Vanta — Search Image
   SEARCH IMAGE V0.1
   Image Frame + Product Visual Treatment
   ========================================================= */


/* =========================================================
   IMAGE FRAME
   ========================================================= */

.sv-search__card-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;

    background: rgba(0, 0, 0, 0.018);

    border: 1px solid rgba(0, 0, 0, 0.045);

    transition:
        border-color 320ms ease,
        box-shadow 320ms ease,
        transform 320ms cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   PRODUCT IMAGE FRAME
   ========================================================= */

.sv-search__card--product .sv-search__card-image {
    aspect-ratio: 1 / 1;
}


/* =========================================================
   COLLECTION IMAGE FRAME
   ========================================================= */

.sv-search__card--collection .sv-search__card-image {
    aspect-ratio: 4 / 3;
}


/* =========================================================
   IMAGE
   ========================================================= */

.sv-search__card-image img {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    object-position: center;

    transition:
        transform 520ms cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.sv-search__card--product .sv-search__card-image img {
    object-fit: contain;
}


/* =========================================================
   COLLECTION IMAGE
   ========================================================= */

.sv-search__card--collection .sv-search__card-image img {
    object-fit: contain;
}


/* =========================================================
   IMAGE REFLECTION LAYER
   ========================================================= */

.sv-search__card-image::after {
    content: "";

    position: absolute;
    z-index: 2;

    top: 0;
    left: -120%;

    width: 55%;
    height: 100%;

    pointer-events: none;

    background:
        linear-gradient(105deg,
            transparent 0%,
            rgba(255, 255, 255, 0.00) 32%,
            rgba(255, 255, 255, 0.42) 48%,
            rgba(185, 220, 255, 0.16) 56%,
            rgba(255, 255, 255, 0.00) 72%,
            transparent 100%);

    transform: skewX(-18deg);

    opacity: 0;
}


/* =========================================================
   HOVER
   ========================================================= */

.sv-search__card:hover .sv-search__card-image {
    border-color: rgba(0, 0, 0, 0.09);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.055);

    transform: translateY(-2px);
}


.sv-search__card:hover .sv-search__card-image img {
    transform: scale(1.025);
}


/* =========================================================
   LIGHT SWEEP
   ========================================================= */

.sv-search__card:hover .sv-search__card-image::after {
    opacity: 1;

    animation:
        sv-search-image-reflection 1350ms cubic-bezier(.22, 1, .36, 1) 1;
}


/* =========================================================
   LIGHT SWEEP ANIMATION
   ========================================================= */

@keyframes sv-search-image-reflection {

    0% {
        left: -120%;
        opacity: 0;
    }

    18% {
        opacity: 0.75;
    }

    72% {
        opacity: 0.45;
    }

    100% {
        left: 140%;
        opacity: 0;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sv-search__card-image,
    .sv-search__card-image img {
        transition: none;
    }

    .sv-search__card:hover .sv-search__card-image {
        transform: none;
    }

    .sv-search__card:hover .sv-search__card-image img {
        transform: none;
    }

    .sv-search__card:hover .sv-search__card-image::after {
        animation: none;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 749px) {

    .sv-search__card:hover .sv-search__card-image {
        transform: translateY(-1px);

        box-shadow:
            0 5px 16px rgba(0, 0, 0, 0.045);
    }

    .sv-search__card:hover .sv-search__card-image img {
        transform: scale(1.018);
    }
}