/* ==========================================
   LIRON SUPERMARKET
   HERO RICH COLOR
   NO ANIMATED LIGHT BURST
========================================== */


/* ==========================================
   HERO
========================================== */

.hero {

    position: relative;

    overflow: hidden;

    isolation: isolate;

    /* Smooth, noticeable color transition */
    transition:
        background-color 700ms
        cubic-bezier(0.4, 0, 0.2, 1);

}


/* ==========================================
   HERO CONTENT
========================================== */

.hero > * {

    position: relative;

    z-index: 3;

}


/* ==========================================
   HERO — ALMOST NO LIGHT EFFECT
   Static and extremely subtle
========================================== */

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 1;

    background:

        radial-gradient(
            ellipse at
            var(--light-x, 50%)
            var(--light-y, 50%),

            rgba(255, 255, 255, 0.012) 0%,

            rgba(255, 255, 255, 0.006) 20%,

            transparent 55%
        );

    opacity: 0.35;

    filter: blur(25px);

}


/* ==========================================
   HERO EDGE
   Very subtle static depth
========================================== */

.hero::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 2;

    border:
        1px solid rgba(255, 255, 255, 0.025);

    box-shadow:
        inset 0 0 20px
        rgba(255, 255, 255, 0.006);

}


/* ==========================================
   MOBILE
   EVEN LESS HERO LIGHT
========================================== */

@media (max-width: 768px) {

    .hero::before {

        opacity: 0.15;

        filter: blur(28px);

    }

}


/* ==========================================
   REDUCED MOTION
========================================== */

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

    .hero {

        transition: none;

    }

}