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

.hero {
    width: 100%;
    overflow: hidden;
}

.hero-image {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    line-height: 0;
}

.hero-image > img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

/* ==========================================
   STATIC GRID
   Spacing is calculated by JavaScript.
========================================== */

.hero-grid {
    --grid-size-x: 40px;
    --grid-size-y: 40px;
    --grid-line: rgba(255, 255, 255, 0.09);

    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;

    background-image:
        linear-gradient(
            to right,
            var(--grid-line) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            var(--grid-line) 1px,
            transparent 1px
        );

    background-size:
        var(--grid-size-x) var(--grid-size-y);

    background-position: 0 0;
    background-repeat: repeat;

    /* Keep the outer edge aligned with the image */
    box-shadow: inset 0 0 0 1px var(--grid-line);
}

/* ==========================================
   HORIZONTAL GLOW
   Travels along horizontal grid lines.
========================================== */

.hero-grid-glow.horizontal {
    position: absolute;
    width: 140px;
    height: 1px;
    left: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;

    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 174, 105, 0.45) 20%,
        rgba(255, 235, 210, 1) 50%,
        rgba(255, 174, 105, 0.45) 80%,
        transparent 100%
    );

    box-shadow:
        0 0 3px rgba(255, 190, 130, 0.9),
        0 0 8px rgba(255, 140, 65, 0.65);

    transition: opacity 0.4s ease;
    will-change: left, opacity;
}

/* ==========================================
   VERTICAL GLOW
   Travels along vertical grid lines.
========================================== */

.hero-grid-glow.vertical {
    position: absolute;
    width: 1px;
    height: 140px;
    left: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 174, 105, 0.45) 20%,
        rgba(255, 235, 210, 1) 50%,
        rgba(255, 174, 105, 0.45) 80%,
        transparent 100%
    );

    box-shadow:
        0 0 3px rgba(255, 190, 130, 0.9),
        0 0 8px rgba(255, 140, 65, 0.65);

    transition: opacity 0.4s ease;
    will-change: top, opacity;
}

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

@media (prefers-reduced-motion: reduce) {
    .hero-grid-glow {
        display: none !important;
    }
}