/* ══ Loader del overview · logo de The Local Code ══ */
#ldr{position:fixed;inset:var(--frame,10px);z-index:9999;border-radius:clamp(18px,1.8vw,28px);background:#2143E9;
  display:grid;place-items:center;overflow:hidden;-webkit-font-smoothing:antialiased;color:#fff}
#ldr::before{content:"";position:absolute;inset:0;border-radius:inherit;background:url("../../img/textures/texture-tiles-a.svg") 0 0/352px 352px;opacity:.9;pointer-events:none}
#ldr.out{pointer-events:none}
html.ldr-on,html.ldr-on body{overflow:hidden}
/* respeta el margen blanco de la página: el loader va dentro del marco */
html.ldr-on body{background:#fff}

#ldr .l-box{position:relative}
#ldr .l-mark{position:relative;display:block;height:clamp(160px,32vh,265px);width:auto;overflow:visible}
#ldr .l-mark .lc-ink{fill:#fff}#ldr .l-mark .lc-alt{fill:#B8E1FC}
/* el logo apagado de fondo */
#ldr .l-mark.base .lc-ink,#ldr .l-mark.base .lc-alt{fill:rgba(255,255,255,.14)}
/* y encima el mismo logo, que se enciende pieza por pieza como una carga real */
#ldr .l-mark.fill{position:absolute;left:0;top:0}
#ldr .l-mark.fill .lc-g{opacity:0;animation:lcOn .4s ease-out both}
@keyframes lcOn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#ldr .l-mark.fill .lc-g:nth-of-type(1){animation-delay:0s}
#ldr .l-mark.fill .lc-g:nth-of-type(2){animation-delay:.06s}
#ldr .l-mark.fill .lc-g:nth-of-type(3){animation-delay:.12s}
#ldr .l-mark.fill .lc-g:nth-of-type(4){animation-delay:.5s}
#ldr .l-mark.fill .lc-g:nth-of-type(5),#ldr .l-mark.fill .lc-g:nth-of-type(6){animation-delay:.95s}
#ldr .l-mark.fill .lc-g:nth-of-type(7){animation-delay:1.3s}

/* salida: el loader sube como un telón, recortado en el marco (no en el borde de la pantalla),
   y se desenfoca mientras sube */
#ldr.out{animation:ldrOut .95s cubic-bezier(.76,0,.24,1) forwards}
@keyframes ldrOut{
  from{transform:none;clip-path:inset(0 0 0 0 round clamp(18px,1.8vw,28px));filter:blur(0)}
  to{transform:translateY(-100%);clip-path:inset(100% 0 0 0 round clamp(18px,1.8vw,28px));filter:blur(14px)}}

@media(prefers-reduced-motion:reduce){
  #ldr *{animation:none!important;opacity:1!important}
  #ldr.out{animation:none;opacity:0;transition:opacity .3s}}
/* mobile: logo más chico */
@media(max-width:820px){#ldr .l-mark{height:clamp(130px,24vh,185px)}}

/* ── propuestas de barra (?bar=1|2|3) ── */
/* 1 · borde: una línea fina recorre el contorno redondeado del loader */
#ldr .l-edge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#ldr .l-edge rect{x:1px;y:1px;width:calc(100% - 2px);height:calc(100% - 2px);rx:clamp(17px,1.75vw,27px);fill:none;stroke:rgba(255,255,255,.7);stroke-width:2;
  stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0));stroke-linecap:round}
/* 2 · arriba: una línea de carga a todo el ancho, pegada al borde superior (como un navegador) */
#ldr .l-top{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.08)}
#ldr .l-top i{display:block;height:100%;width:calc(var(--p,0) * 1%);background:rgba(255,255,255,.75);border-radius:0 3px 3px 0}
/* 3 · vertical: una barra fina al costado del logo que se llena de abajo hacia arriba */
#ldr .l-vert{position:absolute;top:4%;bottom:4%;left:calc(100% + clamp(26px,3vw,44px));width:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
#ldr .l-vert i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--p,0) * 1%);background:rgba(255,255,255,.75);border-radius:inherit}
/* mobile: cuadraditos del fondo apenas más visibles */
@media(max-width:820px){#ldr::before{opacity:.68;background:url("../../img/textures/texture-tiles-a.svg") 0 0/300px 300px,url("../../img/textures/texture-tiles-a.svg") 0 0/300px 300px}}