/* place_holder.css - splash / default-loader styles for RetailAir (Flutter web) */

:root {
    /* Same gradient as background-gradient.svg:
       #CCF7FF -> white (at ~55%) -> #E7DFFF, running top-left to bottom-right.
       The SVG vector (360, 834) on a 360x844 canvas works out to roughly 157deg in CSS. */
    --loader-bg: linear-gradient(157deg, #ccf7ff 0%, #ffffff 55%, #e7dfff 100%);
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* fallback */
    background-image: var(--loader-bg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
}

/* Full-screen gradient container. The z-index creates its own stacking context,
   so the video (z-index: -1) stays visible above this background
   instead of falling behind the page. */
.mainloaderContainerSec {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* correct height on mobile browsers with dynamic toolbars */
    background-color: #ffffff; /* fallback */
    background-image: var(--loader-bg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 0;
    overflow: hidden;
}

/* Tiny 1px image kept from the original markup */
.loaderTrackingPixel {
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 1;
    width: 1px;
    height: 1px;
}

.loaderTrackingPixel img {
    width: 1px;
    height: 1px;
}

/* Keep the whole logo visible (no cropping).
   The video has a solid white background, so "multiply" makes that white
   disappear and lets the gradient show through; the dark logo colours stay. */
#myVideo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    background: transparent;
    mix-blend-mode: multiply;
}