/* ============================================================
   PRELOADER — cortina de marca estilo "draw-on" (ref.: Joby)
   Fundo: gradiente WebGL animado da marca (grainient.js, o
   mesmo dos CTA banners) com fallback CSS idêntico ao
   .ds-cta-banner__bg. Logo NutriCard Multi branca se desenha,
   depois a cortina desce com cantos arredondados revelando a
   página. Roda 1x por sessão (sessionStorage) — a classe
   html.nc-loading é decidida por script inline no <head>.
   ============================================================ */

html.nc-loading {
    overflow: hidden;
}

.nc-pre {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    place-items: center;
    overflow: hidden;
    /* Mesmo fallback do CTA banner (sem WebGL2 / reduced-motion) */
    background: linear-gradient(160deg, #00296B, #001E50 55%, #001233);
    will-change: transform;
}

html.nc-loading .nc-pre {
    display: grid;
}

.nc-pre__bg {
    position: absolute;
    inset: 0;
    /* Captura estática do gradiente da marca (decisão: sem WebGL
       no preloader). O fallback CSS do .nc-pre segue por baixo. */
    background-image: url('/public/assets/grainient-static.webp');
    background-size: cover;
    background-position: center;
}

.nc-pre__stage {
    position: relative;
    width: min(64vw, 420px);
}

.nc-pre__logo {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.nc-pre__logo path,
.nc-pre__logo g {
    will-change: transform, opacity;
}

/* Cores vêm do próprio SVG (arte da logo-branca.svg da navbar:
   Nutri/MULTI/arco brancos, CARD com gradiente prata) */
.nc-pre__arc-stroke {
    fill: none !important;
    stroke: #fff;
    stroke-width: 11.35;
    stroke-linecap: butt;
    /* GSAP revela; escondido até o timeline assumir (evita flash) */
    visibility: hidden;
}

/* Estados iniciais escondidos — o timeline usa fromTo, isto só
   evita 1 frame de logo completa antes do JS rodar */
.nc-pre__arc,
.nc-pre .nc-l {
    visibility: hidden;
}