/* Blue Star Pool and Spas Services · loader.css (Home only, AJUSTES r3)
   «El logo se arma»: the real logo emblem spins in, slides aside while the wordmark is unveiled
   from behind it, a single specular glint crosses the lockup, a thin water line fills underneath.
   Exit: lockup lifts and fades while the white field dissolves (no curtains, ley 1026-c2).
   Everything that moves is transform/opacity on composited layers (WAAPI, compositor thread). */

.loader.bsl{position:fixed;inset:0 0 2px 0;z-index:300;display:grid;place-items:center;overflow:hidden;contain:strict;
  background:radial-gradient(70% 60% at 50% 46%,#EAFDFF 0%,#F4FEFF 46%,#F9FEFE 100%);
  /* safety net: if JS never runs or dies, the loader leaves on its own at 3 s */
  animation:bsl-bail .35s linear 3s forwards}
html body .loader.bsl{animation:bsl-bail .35s linear 3s forwards}
html:not(.js) .loader.bsl,html.skip-loader .loader.bsl{display:none}
@keyframes bsl-bail{to{opacity:0;visibility:hidden}}

.bsl-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.2vw,22px);width:min(600px,82vw)}
.bsl-lock{position:relative;width:100%;aspect-ratio:3/1}
.bsl-emb,.bsl-word{position:absolute;top:0;height:100%}
.bsl-emb{left:0;width:35.417%;z-index:2}
.bsl-word{left:35.417%;width:64.583%;overflow:hidden;z-index:1}
.bsl-word-in{width:100%;height:100%}
.bsl-emb img,.bsl-word img{display:block;width:100%;height:100%}

/* glint: a soft light band clipped to the logo silhouette (static mask, only the band translates) */
.bsl-shine{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;
  -webkit-mask:url("/assets/img/brand/bs-loader-mask.webp") 0 0/100% 100% no-repeat;
          mask:url("/assets/img/brand/bs-loader-mask.webp") 0 0/100% 100% no-repeat}
.bsl-shine i{position:absolute;top:-10%;left:0;width:22%;height:120%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.55) 54%,rgba(255,255,255,0) 100%)}

/* water line: light track + a filled wave unveiled by a two-layer window (no scaleX distortion) */
.bsl-line{position:relative;width:62%;height:8px}
.bsl-line svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bsl-line path{fill:none;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.bsl-track path{stroke:rgba(var(--cyan-rgb,7,208,236),.22)}
.bsl-fill{position:absolute;inset:-2px 0;overflow:hidden}
.bsl-fill-in{position:absolute;inset:2px 0}
.bsl-fill-in path{stroke:var(--blue,#0165B3)}
.bsl-tag{margin:0;font-family:var(--body,"Figtree",system-ui,sans-serif);font-weight:500;font-size:clamp(.66rem,.9vw,.76rem);
  letter-spacing:.28em;text-transform:uppercase;color:var(--navy,#022B7C);white-space:nowrap}

/* initial (pre-JS) state == the first keyframe, so there is no flash before loader.js starts.
   opacity .001 (not 0) so Chrome still rasterizes the layers under the white field (law 0714-c #12). */
.bsl-emb{opacity:.001;transform:translateX(91.18%) scale(.55) rotate(-28deg)}
.bsl-word{transform:translateX(-100%)}
.bsl-word-in{transform:translateX(100%)}
.bsl-shine i{transform:translateX(-120%) skewX(-16deg)}
.bsl-fill{transform:translateX(-100%)}
.bsl-fill-in{transform:translateX(100%)}
.bsl-tag{opacity:.001;transform:translateY(8px)}

/* layers promoted only while running */
.bsl.is-run .bsl-emb,.bsl.is-run .bsl-word,.bsl.is-run .bsl-word-in,.bsl.is-run .bsl-shine i,
.bsl.is-run .bsl-fill,.bsl.is-run .bsl-fill-in,.bsl.is-run .bsl-tag,.bsl.is-run .bsl-stage{will-change:transform,opacity}
.bsl.is-run{will-change:opacity}
.bsl.is-out{pointer-events:none}