/* ==========================================================================
   SMART DMS - HIIVO TECH branded full-screen loader.

   The HIIVO symbol is the official artwork, unmodified. To animate its two
   parts independently without redrawing the logo, the original PNG was split
   by colour into two layers that carry their own original pixels:
       hiivo-mark-part-a.png  - the vivid blue (#0659EF) section
       hiivo-mark-part-b.png  - the dark blue (#09225A) section
   Both layers are stacked at identical size/position, so once the intro
   finishes they recompose the original mark pixel-for-pixel.

   Presentation only - no application logic depends on this file.
   ========================================================================== */

.hiivo-loader {
    --hl-vivid: #0659EF;
    --hl-dark: #09225A;
    --hl-bg: rgba(255, 255, 255, .65);
    --hl-product: #09225A;
    --hl-muted: #6f6f6f;
    --hl-faint: #9a9a9a;
    --hl-track: rgba(6, 89, 239, .14);

    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hl-bg);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    font-family: Arial, sans-serif;
    opacity: 1;
    transition: opacity .32s ease-out;
}

/* Idle is the default state: the overlay must never cover a ready page. */
.hiivo-loader.is-idle { display: none; }
.hiivo-loader.is-hiding { opacity: 0; }

.hiivo-loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    text-align: center;
}

/* ---- the mark ---------------------------------------------------------- */

.hiivo-loader__mark {
    position: relative;
    width: clamp(74px, 8.5vw, 100px);
    aspect-ratio: 1662 / 1673;
    margin-bottom: 22px;
    opacity: .72;
}

.hiivo-loader__part {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* the source art is ~1662px wide, so downscaling stays sharp */
    object-fit: contain;
    opacity: 1;
}

/* ---- wordmark ---------------------------------------------------------- */

.hiivo-loader__product {
    margin: 0;
    color: var(--hl-product);
    font-size: 1.32rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
}

.hiivo-loader__owner {
    margin: 9px 0 0;
    color: var(--hl-muted);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: 0;
}

.hiivo-loader__site {
    margin: 4px 0 0;
    color: var(--hl-faint);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 0;
}

/* ---- thin progress line ------------------------------------------------ */

.hiivo-loader__bar {
    position: relative;
    width: clamp(132px, 17vw, 168px);
    height: 2px;
    margin-top: 26px;
    border-radius: 999px;
    background: var(--hl-track);
    overflow: hidden;
}

.hiivo-loader__bar span {
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--hl-vivid), var(--hl-dark));
    transform: translate3d(0, 0, 0);
}

.hiivo-loader.is-active .hiivo-loader__bar span {
    animation: hiivo-bar-travel 1.5s ease-in-out infinite alternate;
}

@keyframes hiivo-bar-travel {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(138%, 0, 0); }
}

/* ---- dark variant ------------------------------------------------------ */

/* The dark background is the brand navy, which is also one of the logo's two
   colours - so the mark sits on a neutral white tile to stay legible with its
   original colours untouched. */
.hiivo-loader--dark {
    --hl-bg: rgba(9, 34, 90, .65);
    --hl-product: #ffffff;
    --hl-muted: rgba(255, 255, 255, .78);
    --hl-faint: rgba(255, 255, 255, .55);
    --hl-track: rgba(255, 255, 255, .18);
}

/* The white tile is painted behind the mark instead of being padding on it.
   Padding the mark pushed the two absolutely-positioned layers (which keep
   inset:0 / 100%) outside the tile, so the dark half fell onto the navy
   background and vanished. */
.hiivo-loader--dark .hiivo-loader__mark {
    width: clamp(96px, 10.5vw, 120px);
}

.hiivo-loader--dark .hiivo-loader__mark::before {
    content: "";
    position: absolute;
    inset: -17%;
    z-index: 0;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 18px 44px rgba(3, 12, 34, .38);
}

.hiivo-loader--dark .hiivo-loader__part { z-index: 1; }


/* ---- motion / a11y ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hiivo-loader { transition-duration: .1s; }
    .hiivo-loader.is-active .hiivo-loader__bar span { animation: none; width: 100%; }
}

@media print {
    .hiivo-loader { display: none !important; }
}