.br { display: none; }
html.br-on .br { display: block; }
html.br-on, html.br-on body { overflow: hidden; }

.br {
  position: fixed; inset: 0; z-index: 100000;
  pointer-events: auto; cursor: pointer;
  --br-bg: #050507;
  --br-split-a: 58%;
  --br-split-b: 42%;
}
.br__half {
  position: absolute; inset: 0;
  background: var(--br-bg);
  will-change: transform;
}
.br__half--a { clip-path: polygon(0 0, 100% 0, 100% calc(var(--br-split-b) + 1px), 0 calc(var(--br-split-a) + 1px)); }
.br__half--b { clip-path: polygon(0 var(--br-split-a), 100% var(--br-split-b), 100% 100%, 0 100%); }
.br__half::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60vmax 60vmax at 50% 50%, rgba(255,255,255,0.035), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px);
}
.br__seam {
  position: absolute; left: -10%; right: -10%; top: 50%; height: 2px;
  transform: rotate(-9.5deg) scaleX(0);
  background: linear-gradient(90deg, transparent, #9ff6ff 20%, #fff 50%, #ff8fd0 80%, transparent);
  box-shadow: 0 0 18px 2px rgba(255,255,255,0.55), 0 0 60px 8px rgba(120,200,255,0.35);
  opacity: 0;
}
.br__aura {
  position: absolute; left: 50%; top: 50%;
  width: 80vmin; height: 80vmin;
  transform: translate(-50%, -50%) scale(0.6);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,200,255,0.28), rgba(255,60,160,0.12) 55%, transparent 75%);
  filter: blur(30px);
  opacity: 0;
  mix-blend-mode: screen;
}
.br__stage {
  position: absolute; left: 50%; top: 50%;
  width: min(46vmin, 300px);
  transform: translate(-50%, -54%);
  display: flex; flex-direction: column; align-items: center;
  will-change: transform, filter, opacity;
}
.br__svg { width: 100%; height: auto; overflow: visible; display: block; }
.br__flash {
  position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none;
  mix-blend-mode: overlay;
}
.br__word {
  margin-top: clamp(14px, 3.4vmin, 28px);
  font-family: Outfit, system-ui, sans-serif; font-weight: 800;
  font-size: clamp(18px, 4.2vmin, 30px);
  letter-spacing: 0.62em; padding-left: 0.62em;
  color: #f2f4f7;
  text-shadow: 0 0 18px rgba(255,255,255,0.25);
  opacity: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.br__rule {
  margin-top: 10px; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: scaleX(0);
}
.br__skip {
  position: absolute; right: 16px; bottom: 16px;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.45);
  font: 600 13px/1 "DM Sans", system-ui, sans-serif;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; cursor: pointer;
  opacity: 0; transition: opacity 0.4s;
}
.br.is-skippable .br__skip { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .br { display: none !important; }
}