/* The img has a server-rendered inline background. These layers only animate its reveal. */
.contextus-preview-host { position: relative; }
.contextus-preview-layer {
    position: absolute;
    pointer-events: none;
    overflow: hidden;
    z-index: auto;
    opacity: 1;
    background: #e6e6e4;
}
.contextus-preview-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--contextus-preview);
    background-size: var(--contextus-preview-fit, cover);
    background-position: var(--contextus-preview-position, center);
    background-repeat: no-repeat;
    /* Colour and blur are inside the self-contained inline background SVG. */
}
.contextus-preview-layer.is-revealing { animation: contextus-preview-dissolve 900ms ease both; }
.contextus-preview-settle { animation: contextus-preview-settle 900ms cubic-bezier(.2,.6,.3,1) both !important; }
@keyframes contextus-preview-dissolve { to { opacity: 0; } }
/* Clip compensates the 2% scale so the photo cannot spill outside its box. */
@keyframes contextus-preview-settle {
    from { transform: scale(1.02); clip-path: inset(1%); }
    to { transform: scale(1); clip-path: inset(0); }
}
@media (prefers-reduced-motion: reduce) {
    .contextus-preview-layer.is-revealing { animation: none; opacity: 0; }
    .contextus-preview-settle { animation: none !important; }
}