/* ===== Roni glitch intro loader — layers driven by rl-loader.js ===== */
html.rl-lock { overflow: hidden; }

.rl-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: grid;
  place-items: center;
}
.rl-loader.rl-out { opacity: 0; transition: opacity .35s ease; pointer-events: none; }

.rl-mark {
  position: relative;
  width: min(46vw, 400px);
  aspect-ratio: 4000 / 1926;
  opacity: 0;
  will-change: transform, opacity;
}

.rl-l {
  position: absolute;
  inset: 0;
  background: #fff;
  -webkit-mask-image: url("logo.png");
  mask-image: url("logo.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* the glow: two blurred periwinkle copies under the crisp mark. the blur is
   static so the layers stay cached — the js swells the glow by opacity only,
   which composites without repainting (animating a drop-shadow repainted the
   whole mark every frame and stuttered while the page booted) */
.rl-glow-t, .rl-glow-w {
  background: rgb(141, 168, 203);
  will-change: opacity;
}
.rl-glow-t { filter: blur(8px); }
.rl-glow-w { filter: blur(24px); }