/**
 * Home page: the dolphin automaton assembling, as a faint background piece
 * behind the hero. Nothing on the page moves or changes; this layer sits
 * behind the hero content and ignores clicks. Loaded only on the front page.
 */

.ff-home-bg-host {
    position: relative;
    isolation: isolate; /* keeps the layer behind this section's content only */
}

.ff-home-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.ff-home-bg video,
.ff-home-bg img {
    position: absolute;
    right: -6%;
    bottom: -4%;
    width: min(62%, 980px);
    height: auto;
    opacity: 0;
    mix-blend-mode: multiply; /* the white video background disappears into the page */
    transition: opacity 0.8s ease;
}

.ff-home-bg.is-on video,
.ff-home-bg.is-on img {
    opacity: var(--ff-home-bg-opacity, 0.32);
}

/* Soft left edge so the piece fades into the page instead of ending in a line
   (a mask, so it works on the hero's white-to-gray background) */
.ff-home-bg video,
.ff-home-bg img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
}

/* Tablets and phones: centered behind the text, lighter so the words stay easy to read */
@media (max-width: 900px) {
    .ff-home-bg video,
    .ff-home-bg img {
        right: 50%;
        bottom: 0;
        width: 130%;
        transform: translateX(50%);
    }

    .ff-home-bg {
        --ff-home-bg-opacity: 0.16;
    }

    .ff-home-bg video,
    .ff-home-bg img {
        -webkit-mask-image: none;
        mask-image: none;
    }
}