body.wr-loading{ overflow:hidden; }

#wings-runway{
  overflow:hidden;
  isolation:isolate;
  position:fixed; inset:0; z-index:999999;
  background:radial-gradient(1200px 600px at 20% 50%, var(--wr-bg-start), var(--wr-bg-end));
  display:flex; align-items:center;
  pointer-events:auto !important; 
}

/* WebGL kinetic typography layer (behind loader UI) */
.wr-kinetic{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:auto !important; 
}
#wrKineticCanvas{
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  pointer-events:auto !important; 
  opacity:1;
}


.wr-kt-title{
  position:absolute;
  top:20px;
  left:20px;
  font-size:32px;
  font-family:'Muli', system-ui, sans-serif;
  color:#fff;
  opacity:0.0; /* keep hidden by default; set to 1 if you want it visible */
  z-index:1;
}

.wr-kt-gsap{
  position:fixed;
  bottom:15px;
  right:15px;
  z-index:1;
  pointer-events:auto !important; 
  opacity:0.0; /* keep hidden by default; set to 1 if you want logo visible */
}
.wr-kt-gsap-logo{
  width:20vw;
  max-width:150px;
  height:auto;
}

/* Container */
.wr-wrap{
  width: var(--wr-wrap-width);
  max-width: var(--wr-wrap-max);
  margin: 0 auto;
  position:relative;
  z-index:2;
}

/* Logo */
.wr-logo{
  font-weight:700;
  font-size: var(--wr-logo-size);
  margin-bottom: 14px;
  transform: translateY(0);
  opacity: 1;
  will-change: transform, opacity;
}

.wr-logo-img{
  display:block;
  height: var(--wr-logo-size);
  width: auto;
}

.wr-track{
  position:relative;
  height: var(--wr-bar-thickness);
  background: var(--wr-track);
}

.wr-bar{
  height:100%;
  width:0%;
  background: var(--wr-bar);
  will-change: width;
}

.wr-pct{
  position:absolute;
  top: calc(-1 * var(--wr-pct-offset));
  left: 0;
  font-size: var(--wr-pct-size);
  color: var(--wr-percent);
  background: var(--wr-percent-bg);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  transform: translateX(-50%);
  will-change: left;
}

/* Exit */
body.wr-done #wings-runway{
  opacity:0;
  transition: opacity var(--wr-fade-ms) ease;
}

body.wr-done .wr-logo{
  transform: translateY(calc(-1 * var(--wr-lift)));
  opacity:0;
  transition: transform var(--wr-lift-ms) var(--wr-ease), opacity var(--wr-fade-ms) ease;
}

@media (prefers-reduced-motion: reduce){
  #wings-runway,.wr-logo,.wr-bar,.wr-pct{ transition:none !important; transform:none !important; }
}


#Canvas{
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:0;
  pointer-events:auto !important; 
}

.wr-kt-fallback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;font-size:clamp(28px,6vw,68px);font-weight:700;color:#111;opacity:.25;letter-spacing:.02em;white-space:nowrap;}

body.wr-kt-failed #wrKineticCanvas{display:none;}
body:not(.wr-kt-failed) .wr-kt-fallback{display:none;}