/* ==========================================================================
   Velto brand veil — shown while a storefront page loads.

   First page of a visit: a short intro (~0.7s) — the white mark with a light
   sweep and a "charging" bar. Every page after that in the same visit gets a
   quick version (~0.25s) so moving between screens stays fast. The class
   html.vp-repeat is set before first paint by the inline head script.

   The veil lifts upward to reveal the page instead of fading through it.

   Safety nets (kept from the previous version):
     - a CSS-only failsafe clears the veil and unlocks scrolling even if the
       script never runs;
     - no JavaScript → no veil at all;
     - reduced motion → no movement, a near-instant exit.
   ========================================================================== */

:root {
    --vp-green-1: #0d4a2d;
    --vp-green-2: #083521;
    --vp-green-3: #05241a;
    --vp-lime: #9ef07a;
    --vp-bright: #2fd36e;
    --vp-intro: 700ms;      /* charge time on the first page of a visit */
    --vp-quick: 240ms;      /* charge time between screens */
    --vp-exit: 520ms;       /* the lift */
}

body.preload { overflow: hidden; }

.site-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(90% 70% at 50% 42%, var(--vp-green-1) 0%, var(--vp-green-2) 55%, var(--vp-green-3) 100%);
    clip-path: inset(0 0 0 0);
    transition: clip-path var(--vp-exit) cubic-bezier(.76, 0, .24, 1), visibility 0s linear var(--vp-exit);
    /* failsafe: gone after 2.2s no matter what */
    animation: vpFailsafe 1ms linear 2200ms forwards;
}

/* fine technical grid, fading out toward the edges */
.site-preloader::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    background-position: center;
    -webkit-mask-image: radial-gradient(55% 55% at 50% 45%, #000 0%, transparent 100%);
            mask-image: radial-gradient(55% 55% at 50% 45%, #000 0%, transparent 100%);
    animation: vpGridIn 900ms ease-out both;
}

/* soft glow behind the mark */
.site-preloader::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(47, 211, 110, .22), rgba(47, 211, 110, 0));
    pointer-events: none;
}

.vp-stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transform: translateY(-4vh);
    transition: transform var(--vp-exit) cubic-bezier(.76, 0, .24, 1), opacity 300ms ease;
}

/* The logo PNG carries a lot of transparent padding: the box is sized so the
   visible wordmark lands around 190px wide. */
.vp-mark {
    position: relative;
    width: 340px;
    max-width: 78vw;
    aspect-ratio: 3 / 2;
    margin: -70px 0 -64px;       /* trim the transparent padding */
    animation: vpMarkIn 520ms cubic-bezier(.2, .8, .2, 1) both;
}
.vp-mark img,
.site-preloader__logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .35));
}

/* a light sweep that runs across the mark once — confined to the logo shape */
.vp-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%);
    background-size: 260% 100%;
    background-position: 130% 0;
    -webkit-mask: url("../images/velto-white-logo.png") center / contain no-repeat;
            mask: url("../images/velto-white-logo.png") center / contain no-repeat;
    mix-blend-mode: screen;
    animation: vpSweep 900ms ease-in-out 220ms both;
}

/* the charge bar */
.vp-charge {
    position: relative;
    width: 168px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    overflow: visible;
}
.vp-charge i {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--vp-bright), var(--vp-lime));
    transform-origin: left center;
    transform: scaleX(0);
    animation: vpCharge var(--vp-intro) cubic-bezier(.4, 0, .2, 1) 120ms forwards;
    box-shadow: 0 0 12px rgba(158, 240, 122, .55);
}
[dir="rtl"] .vp-charge i { transform-origin: right center; }

/* ---- between screens: same look, much shorter ------------------------- */
.vp-repeat .site-preloader::before { animation: none; }
.vp-repeat .vp-mark { animation: vpMarkIn 200ms ease-out both; }
.vp-repeat .vp-mark::after { animation: none; opacity: 0; }
.vp-repeat .vp-charge i { animation-duration: var(--vp-quick); animation-delay: 0ms; }

/* ---- exit: the veil lifts, the mark rises and fades -------------------- */
body.loaded .site-preloader {
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
}
body.loaded .vp-stage {
    transform: translateY(calc(-4vh - 28px));
    opacity: 0;
}
body.loaded .vp-charge i {
    animation: none;
    transform: scaleX(1);
}

@keyframes vpMarkIn {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes vpSweep {
    from { background-position: 130% 0; }
    to   { background-position: -30% 0; }
}
@keyframes vpCharge {
    to { transform: scaleX(1); }
}
@keyframes vpGridIn {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: none; }
}

/* ---- safety nets ------------------------------------------------------- */
@keyframes vpFailsafe {
    to { clip-path: inset(0 0 100% 0); visibility: hidden; }
}
@keyframes vpScrollFailsafe {
    to { overflow: auto; }
}
body.preload { animation: vpScrollFailsafe 0s linear 2200ms forwards; }

@media (scripting: none) {
    .site-preloader { display: none !important; }
    body.preload { overflow: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
    .site-preloader,
    .site-preloader::before,
    .vp-stage,
    .vp-mark,
    .vp-mark::after,
    .vp-charge i {
        animation: none !important;
        transition: none !important;
    }
    .vp-mark::after { opacity: 0; }
    .vp-charge i { transform: scaleX(1); }
    .site-preloader { animation: vpFailsafe 1ms linear 200ms forwards !important; }
    body.preload { animation: vpScrollFailsafe 0s linear 200ms forwards !important; }
}

@media (max-width: 600px) {
    .vp-mark { width: 280px; margin: -58px 0 -52px; }
    .vp-charge { width: 140px; }
}