/* =============================================================
   limina.css
   Styles for the Limina display component (limina_display.js).

   The crossfade works via two absolutely-stacked image layers.
   Opacity + transition handles the fade. JS swaps the --visible class.
   ============================================================= */

.limina_display {
    position: relative;
    width: 100%;
    height: 100%;
}

#limina-display-mount {
    width: 100%;
    height: 100%;
}

/* Both layers fill the container and stack on top of each other */
.limina_display__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;

    opacity: 0;
    transition: opacity 400ms ease;

    /* Prevent flicker on load */
    will-change: opacity;
}

/* The currently visible layer */
.limina_display__layer--visible {
    opacity: 1;
}