/* Feature clips: short muted looping animations in the showcase sections of the feature pages.
   Each clip is rendered on its section's own background colour (#fafbff or #f0f4ff) and its edges are
   feathered, so it sits in the page with no visible frame. js/Home/featureClips.js plays it while on screen.
   A clip's shape comes from its video (inline aspect-ratio + width/height attributes), so 16:10, portrait
   phone clips and wide hero clips all use the same markup. */
.fclip {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.fclip--tall {
    max-width: 600px;
}

.fclip--hero {
    max-width: 1240px;
}

.fclip video {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-composite: intersect;
}

@media (min-width: 901px) {
    /* Let the clip spill a little into the column gap so the UI in it reads larger. */
    .showcase-visual .fclip,
    .detail-visual .fclip {
        width: 108%;
        max-width: none;
        margin-left: -4%;
    }

    .showcase-visual .fclip--tall,
    .detail-visual .fclip--tall {
        width: 100%;
        max-width: 600px;
        margin-left: auto;
    }
}