:root{
  --bg:#000;
  --fg:#fff;
}

*{
  box-sizing:border-box;

  /* hard anti-select / anti-copy */
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}

html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  overflow:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

  /* stop browser gesture interpretations */
  touch-action:none;
  overscroll-behavior:none;
}

#fx{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  touch-action:none;
}

.center{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  /* all interaction goes to canvas/window */
  pointer-events:none;

  padding:24px;
}

.logo{
  width:min(42vw, 320px);
  height:auto;

  /* bass-like blur pulse: 2s loop, 5% -> 20% -> 5% */
  filter: drop-shadow(0 0 18px rgba(255,255,255,.12))
          blur(clamp(0.6px, 0.12vw, 1.0px));

  animation: logoBlur 2s cubic-bezier(.2,.9,.2,1) infinite;
  will-change: filter;

  /* prevent iOS image drag/select */
  -webkit-user-drag:none;
  user-drag:none;
}

@keyframes logoBlur {
  0%, 100% {
    filter: drop-shadow(0 0 18px rgba(255,255,255,.12))
            blur(clamp(0.6px, 0.12vw, 1.0px));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(255,255,255,.12))
            blur(clamp(2.4px, 0.5vw, 4.0px));
  }
}