/* Extra light streaks. Screen blend keeps the black plate invisible
   so the existing section background is left in place. */
.extra-bg-host {
    position: relative;
    isolation: isolate;
}

.extra-bg {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    mix-blend-mode: screen;
    width: min(880px, 72vw);
    height: auto;
    max-width: none;
    object-fit: contain;
}

/* Both artworks are brightest on their right. Shift them left so the
   glow sits on the dark end of the 270deg page gradient. */
.extra-bg--side {
    top: 50%;
    left: 0;
    transform: translate(-34%, -50%);
}

.extra-bg--corner {
    left: 0;
    bottom: 0;
    width: min(760px, 64vw);
    transform: translate(-28%, 12%);
}

/* Product page: rotated streak, level with the description. */
.form-card > .extra-bg--beside {
    position: absolute;
    left: -100px;
    top: 67%;
    mix-blend-mode: screen;
    z-index: 0;
    transform: translateY(-50%) rotate(-90deg);
}

@media (max-width: 767px) {
    .form-card > .extra-bg--beside {
        left: 140px;
        top: 75%;
    }
}

.form-card.form-card--flat {
    box-shadow: none;
    animation: none;
}

.form-card.form-card--flat::before,
.form-card.form-card--flat::after {
    content: none;
    display: none;
    animation: none;
    box-shadow: none;
    filter: none;
}

.extra-bg-host > :not(.extra-bg) {
    position: relative;
    z-index: 1;
}

.section-production.extra-bg-host::before {
    z-index: 2;
}