Here is the updated code.

I adjusted the .aq-hud.hidden class configuration so that every single UI element (including the settings gear wrapper and the logo link) targets an absolute opacity: 0 and switches to pointer-events: none when the user is inactive. This gives you a completely clean, unblemished view of the aquarium until you move your mouse or touch the screen again.

HTML
<style>
  /* Base reset to safely fill the viewport completely */
  body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #060e1f; }

  #aq-wrap { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden; 
    background: #060e1f; 
  }
  #aq-wrap canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  #aq-back { z-index: 1; opacity: 0.6; }
  #aq-front { z-index: 3; }
  
  .aq-bg { position: absolute; inset: 0; z-index: 0; background:
    radial-gradient(ellipse 70% 60% at 15% 20%, rgba(0,200,180,0.22) 0%, transparent 100%),
    radial-gradient(ellipse 60% 70% at 85% 80%, rgba(70,0,160,0.3) 0%, transparent 100%),
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(0,60,120,0.5) 0%, transparent 100%),
    linear-gradient(175deg, #040c1e 0%, #071730 60%, #030b1a 100%);
    animation: bgPulse 18s ease-in-out infinite alternate;
  }
  @keyframes bgPulse {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.12); }
  }
  
  /* Vignette border effect */
  .aq-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(ellipse 95% 90% at 50% 50%, transparent 55%, rgba(2,6,16,0.75) 100%);
    transition: opacity 0.5s ease;
  }
  
  /* Borderless mode overrides */
  #aq-wrap.borderless .aq-vignette { opacity: 0; }
  #aq-wrap.borderless .aq-title, #aq-wrap.borderless .aq-footer { display: none !important; }

  /* HUD Elements & Global Fading - Set to drop to 0 completely */
  .aq-hud { position: absolute; z-index: 5; transition: opacity 0.8s ease, visibility 0.8s ease; visibility: visible; opacity: 1; }
  .aq-hud.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
  
  .aq-title { top: 20px; left: 0; right: 0; text-align: center; pointer-events: none; }
  .aq-title h2 { font-family: Georgia, serif; font-weight: 300; font-size: 22px; letter-spacing: 0.35em; color: rgba(255,255,255,0.8); text-transform: uppercase; margin: 0 0 4px; }
  .aq-title p { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(160,180,220,0.5); margin: 0; }
  
  .aq-footer { bottom: 85px; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(80,100,150,0.5); pointer-events: none; }
  .aq-stats { top: 25px; left: 25px; font-size: 11px; letter-spacing: 0.1em; color: rgba(120,160,220,0.55); pointer-events: none; }

  /* Logo Configuration Block */
  .aq-logo-link {
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 75px;
    height: 75px;
    z-index: 98;
    display: block;
    transition: transform 0.3s ease;
  }
  .aq-logo-link:hover { transform: scale(1.05); }
  .aq-logo-link img { width: 100%; height: 100%; border: none; display: block; object-fit: contain; }

  /* Gear Controls Element Configuration */
  .aq-gear-wrapper { 
    position: absolute;
    top: 25px; 
    right: 25px; 
    z-index: 99; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
  }
  .aq-gear-btn {
    background: rgba(10, 25, 50, 0.5); 
    border: 1px solid rgba(42, 220, 255, 0.3); 
    border-radius: 50%;
    cursor: pointer; 
    padding: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2ADCFF; 
    box-shadow: 0 0 10px rgba(42, 220, 255, 0.2);
    transition: color 0.3s, transform 0.3s, background-color 0.3s;
  }
  .aq-gear-btn:hover { 
    color: #ffffff; 
    background: rgba(42, 220, 255, 0.4);
    transform: rotate(45deg); 
  }
  .aq-gear-btn svg { width: 24px; height: 24px; fill: currentColor; display: block; }

  /* Settings Dropdown Menu */
  .aq-menu {
    margin-top: 8px; background: rgba(10, 22, 45, 0.9); backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(42, 220, 255, 0.2);
    border-radius: 8px; padding: 6px 0; min-width: 170px; box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    display: none; flex-direction: column;
  }
  .aq-menu.show { display: flex; }
  .aq-menu button {
    background: transparent; border: none; color: rgba(200, 215, 240, 0.85);
    padding: 10px 16px; text-align: left; font-size: 11px; font-family: inherit;
    text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all 0.2s;
  }
  .aq-menu button:hover { background: rgba(42, 220, 255, 0.2); color: #2ADCFF; }

  /* Agent UI Panel */
  .aq-agent-container {
    bottom: 25px; left: 50%; transform: translateX(-50%);
    width: 90%; max-width: 480px; background: rgba(10, 25, 50, 0.65);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px rgba(255, 255, 255, 0.1) solid; border-radius: 30px;
    padding: 6px 6px 6px 18px; display: flex; align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: opacity 0.6s ease, visibility 0.6s ease;
  }
  .aq-agent-container.force-hide { display: none !important; }
  .aq-agent-container input {
    flex: 1; background: transparent; border: none; outline: none;
    color: #fff; font-size: 14px; font-family: inherit;
  }
  .aq-agent-container input::placeholder { color: rgba(160, 180, 220, 0.45); }
  .aq-agent-container button {
    background: rgba(42, 220, 255, 0.25); border: 1px solid rgba(42, 220, 255, 0.4);
    color: #2ADCFF; padding: 8px 18px; border-radius: 20px; cursor: pointer;
    font-weight: bold; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.2s ease;
  }
  .aq-agent-container button:hover { background: rgba(42, 220, 255, 0.45); color: #fff; box-shadow: 0 0 10px rgba(42, 220, 255, 0.3); }
</style>

<div id="aq-wrap" aria-label="Digital Aquarium — animated fish simulation">
  <div class="aq-bg"></div>
  <canvas id="aq-back"></canvas>
  <canvas id="aq-front"></canvas>
  <div class="aq-vignette"></div>
  
  <div class="aq-hud aq-title" id="hud-title">
    <h2>Digital Aquarium</h2>
    <p>Use settings gear to adjust viewport</p>
  </div>
  
  <div class="aq-hud aq-stats" id="hud-stats">
    <span id="fish-count">28</span> fish (<span id="engine-mode">Calm</span>)
  </div>
  
  <div class="aq-hud aq-footer" id="hud-footer">patjones.org</div>

  <a href="https://patjones.org" target="_blank" class="aq-hud aq-logo-link" id="hud-logo">
    <img src="/images/logo.png" alt="Pat Jones Organization Logo" />
  </a>

  <div class="aq-hud aq-gear-wrapper" id="hud-gear">
    <button class="aq-gear-btn" id="gear-trigger" title="Settings Menu">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5z"/></svg>
    </button>
    <div class="aq-menu" id="settings-menu">
      <button id="btn-fullscreen">Toggle Fullscreen</button>
      <button id="btn-prompt-toggle">Hide Prompt Bar</button>
      <button id="btn-borderless">Go Borderless</button>
    </div>
  </div>

  <div class="aq-hud aq-agent-container" id="hud-agent">
    <input type="text" id="agent-input" placeholder="Command activity: 'make them swarm', 'neon blue', 'tiny'..." />
    <button id="agent-btn">Run</button>
  </div>
</div>

<script>
(function() {
  const wrap = document.getElementById('aq-wrap');
  const cB = document.getElementById('aq-back');
  const cF = document.getElementById('aq-front');
  const xB = cB.getContext('2d');
  const xF = cF.getContext('2d');
  let W, H;

  function resize() {
    W = window.innerWidth; H = window.innerHeight;
    cB.width = cF.width = W;
    cB.height = cF.height = H;
  }
  resize();
  window.addEventListener('resize', resize);

  let CHAKRAS = [
    { c: '#FF3A3A', g: 'rgba(255,58,58,0.5)' },
    { c: '#FF8C2A', g: 'rgba(255,140,42,0.5)' },
    { c: '#FFD832', g: 'rgba(255,216,50,0.5)' },
    { c: '#2AFF8C', g: 'rgba(42,255,140,0.5)' },
    { c: '#2ADCFF', g: 'rgba(42,220,255,0.5)' },
    { c: '#7B3FFF', g: 'rgba(123,63,255,0.5)' },
    { c: '#E030FF', g: 'rgba(224,48,255,0.5)' },
  ];

  let agentConfig = {
    speedMultiplier: 1.0,
    sizeMultiplier: 1.0,
    schoolingForce: 0.028,
    separationForce: 1.9,
    overrideColor: null
  };

  const MAX_FISH = 110;
  let SPAWN_INTERVAL = 2800;
  const INIT_PER_CHAKRA = 4;

  function rnd(a, b) { return a + Math.random() * (b - a); }

  class Fish {
    constructor(edge, chakra) {
      this.fg = Math.random() > 0.45;
      this.chakra = chakra || CHAKRAS[Math.floor(Math.random() * CHAKRAS.length)];
      if (edge) {
        this.x = Math.random() > 0.5 ? -30 : W + 30;
        this.y = rnd(0, H);
      } else {
        this.x = rnd(0, W); this.y = rnd(0, H);
      }
      this.vx = rnd(-1, 1) || 0.5;
      this.vy = rnd(-0.6, 0.6);
      this.baseSz = this.fg ? rnd(5.5, 9) : rnd(3, 5.5);
      this.baseSpd = this.fg ? rnd(1.6, 2.6) : rnd(0.9, 1.6);
      this.sz = this.baseSz * agentConfig.sizeMultiplier;
      this.spd = this.baseSpd * agentConfig.speedMultiplier;
      this.wagSpd = rnd(0.12, 0.22);
      this.wagPhase = rnd(0, Math.PI * 2);
      this.age = 0;
      this.opacity = 0;
    }

    update(school) {
      this.age++;
      if (this.opacity < 1) this.opacity = Math.min(1, this.opacity + 0.025);
      
      this.sz = this.sz * 0.95 + (this.baseSz * agentConfig.sizeMultiplier) * 0.05;
      this.spd = this.spd * 0.95 + (this.baseSpd * agentConfig.speedMultiplier) * 0.05;
      this.wagPhase += this.wagSpd * (agentConfig.speedMultiplier * 0.6 + 0.4);

      let sx=0, sy=0, ax=0, ay=0, cx=0, cy=0, sc=0, nc=0;
      const PR = 85, SR = 28 * agentConfig.sizeMultiplier;

      for (let i = 0; i < school.length; i++) {
        const o = school[i];
        if (o === this) continue;
        const dx = o.x - this.x, dy = o.y - this.y;
        const d2 = dx*dx + dy*dy;
        if (d2 > PR*PR) continue;
        const d = Math.sqrt(d2);
        const af = o.chakra === this.chakra ? 1.6 : 0.9;
        ax += o.vx * af; ay += o.vy * af;
        cx += o.x * af; cy += o.y * af;
        nc++;
        if (d < SR && d > 0) { sx -= dx/d; sy -= dy/d; sc++; }
      }

      if (nc > 0) {
        ax /= nc; ay /= nc;
        const al = Math.hypot(ax, ay);
        if (al > 0) { ax = ax/al * this.spd - this.vx; ay = ay/al * this.spd - this.vy; }
        cx /= nc; cy /= nc;
        cx -= this.x; cy -= this.y;
        const cl = Math.hypot(cx, cy);
        if (cl > 0) { cx = cx/cl * this.spd - this.vx; cy = cy/cl * this.spd - this.vy; }
        this.vx += ax * agentConfig.schoolingForce + cx * agentConfig.schoolingForce * 0.28;
        this.vy += ay * agentConfig.schoolingForce + cy * agentConfig.schoolingForce * 0.28;
      }
      if (sc > 0) { 
        this.vx += sx * agentConfig.schoolingForce * agentConfig.separationForce; 
        this.vy += sy * agentConfig.schoolingForce * agentConfig.separationForce; 
      }

      const currentSpd = Math.hypot(this.vx, this.vy);
      if (currentSpd > this.spd) { this.vx = this.vx/currentSpd * this.spd; this.vy = this.vy/currentSpd * this.spd; }

      this.x += this.vx; this.y += this.vy;
      const buf = 45 * agentConfig.sizeMultiplier;
      if (this.x < -buf) this.x = W + buf;
      else if (this.x > W + buf) this.x = -buf;
      if (this.y < -buf) this.y = H + buf;
      else if (this.y > H + buf) this.y = -buf;
    }

    draw(ctx) {
      const ang = Math.atan2(this.vy, this.vx);
      const s = this.sz;
      const wag = Math.sin(this.wagPhase) * s * 0.52;
      const wag2 = Math.sin(this.wagPhase + 0.4) * 2.2;

      ctx.save();
      ctx.globalAlpha = this.opacity * (this.fg ? 0.92 : 0.62);
      ctx.translate(this.x, this.y);
      ctx.rotate(ang);

      ctx.shadowBlur = this.fg ? 18 : 7;
      
      const activeChakra = agentConfig.overrideColor || this.chakra;
      ctx.shadowColor = activeChakra.g;

      const grad = ctx.createLinearGradient(-s * 0.4, 0, s * 1.9, 0);
      grad.addColorStop(0, 'rgba(255,255,255,0.12)');
      grad.addColorStop(0.35, activeChakra.c);
      grad.addColorStop(1, 'rgba(255,255,255,0.9)');
      ctx.fillStyle = grad;

      ctx.beginPath();
      ctx.moveTo(s * 1.85, 0);
      ctx.quadraticCurveTo(s * 0.2, -s * 0.58, -s * 0.9, wag);
      ctx.lineTo(-s * 1.5, wag + wag2);
      ctx.lineTo(-s * 1.5, wag - wag2);
      ctx.lineTo(-s * 0.9, wag);
      ctx.quadraticCurveTo(s * 0.2, s * 0.58, s * 1.85, 0);
      ctx.closePath();
      ctx.fill();

      if (this.fg && s > 6.5) {
        ctx.shadowBlur = 0;
        ctx.fillStyle = 'rgba(255,255,255,0.7)';
        ctx.beginPath();
        ctx.ellipse(s * 0.85, -s * 0.18, s * 0.22, s * 0.14, -0.3, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.restore();
    }
  }

  let school = [];
  function init() {
    school = [];
    for (let c = 0; c < CHAKRAS.length; c++)
      for (let i = 0; i < INIT_PER_CHAKRA; i++)
        school.push(new Fish(false, CHAKRAS[c]));
  }
  init();

  setInterval(() => {
    if (school.length < MAX_FISH) school.push(new Fish(true));
  }, SPAWN_INTERVAL);

  const countEl = document.getElementById('fish-count');
  const modeEl = document.getElementById('engine-mode');
  let frame = 0;

  function loop() {
    xB.clearRect(0, 0, W, H);
    xF.clearRect(0, 0, W, H);
    for (let i = 0; i < school.length; i++) {
      const f = school[i];
      f.update(school);
      f.draw(f.fg ? xF : xB);
    }
    frame++;
    if (frame % 60 === 0) countEl.textContent = school.length;
    requestAnimationFrame(loop);
  }
  loop();

  // Agent Intent Processing Engine Configuration
  function runAgentEngine(prompt) {
    const p = prompt.toLowerCase();
    let modeText = "Custom";

    agentConfig.speedMultiplier = 1.0;
    agentConfig.sizeMultiplier = 1.0;
    agentConfig.schoolingForce = 0.028;
    agentConfig.separationForce = 1.9;
    agentConfig.overrideColor = null;

    if (p.includes('panic') || p.includes('scared') || p.includes('fast') || p.includes('frenzy')) {
      agentConfig.speedMultiplier = 3.2;
      agentConfig.schoolingForce = 0.08;
      agentConfig.separationForce = 4.5;
      modeText = "Frenzy ⚡";
    } else if (p.includes('scatter') || p.includes('alone') || p.includes('chaos')) {
      agentConfig.speedMultiplier = 1.8;
      agentConfig.schoolingForce = -0.01;
      agentConfig.separationForce = 6.0;
      modeText = "Scattered 🌀";
    } else if (p.includes('slow') || p.includes('calm') || p.includes('sleep') || p.includes('chill')) {
      agentConfig.speedMultiplier = 0.4;
      agentConfig.schoolingForce = 0.015;
      modeText = "Zen 🌊";
    } else if (p.includes('swarm') || p.includes('cluster') || p.includes('tight')) {
      agentConfig.speedMultiplier = 1.2;
      agentConfig.schoolingForce = 0.12;
      agentConfig.separationForce = 0.8;
      modeText = "Swarm 🧬";
    }

    if (p.includes('huge') || p.includes('giant') || p.includes('big') || p.includes('whale')) {
      agentConfig.sizeMultiplier = 2.6;
    } else if (p.includes('tiny') || p.includes('small') || p.includes('baby') || p.includes('micro')) {
      agentConfig.sizeMultiplier = 0.45;
    }

    if (p.includes('red')) { agentConfig.overrideColor = { c: '#FF2A2A', g: 'rgba(255,42,42,0.6)' }; } 
    else if (p.includes('blue') || p.includes('cyan')) { agentConfig.overrideColor = { c: '#00F3FF', g: 'rgba(0,243,255,0.6)' }; } 
    else if (p.includes('green')) { agentConfig.overrideColor = { c: '#19FF57', g: 'rgba(25,255,87,0.6)' }; } 
    else if (p.includes('gold') || p.includes('yellow')) { agentConfig.overrideColor = { c: '#FFE600', g: 'rgba(255,230,0,0.6)' }; } 
    else if (p.includes('purple') || p.includes('pink')) { agentConfig.overrideColor = { c: '#FF00A0', g: 'rgba(255,0,160,0.6)' }; }

    if (modeText === "Custom" && agentConfig.overrideColor) modeText = "Color Shift 🎨";
    if (modeText === "Custom" && agentConfig.sizeMultiplier !== 1.0) modeText = "Resize 📐";
    if (p.includes('reset') || p.includes('normal') || p.includes('default')) modeText = "Calm";

    modeEl.textContent = modeText;
  }

  const agentInput = document.getElementById('agent-input');
  const agentBtn = document.getElementById('agent-btn');
  const agentContainer = document.getElementById('hud-agent');
  const gearTrigger = document.getElementById('gear-trigger');
  const settingsMenu = document.getElementById('settings-menu');
  
  const btnFullscreen = document.getElementById('btn-fullscreen');
  const btnPromptToggle = document.getElementById('btn-prompt-toggle');
  const btnBorderless = document.getElementById('btn-borderless');

  function submitCommand() {
    const val = agentInput.value.trim();
    if(val) {
      runAgentEngine(val);
      agentInput.value = "";
    }
  }

  agentBtn.addEventListener('click', submitCommand);
  agentInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') submitCommand(); });

  gearTrigger.addEventListener('click', (e) => {
    e.stopPropagation();
    settingsMenu.classList.toggle('show');
  });

  btnFullscreen.addEventListener('click', (e) => {
    e.stopPropagation();
    if (!document.fullscreenElement) wrap.requestFullscreen?.();
    else document.exitFullscreen?.();
    settingsMenu.classList.remove('show');
  });

  btnPromptToggle.addEventListener('click', (e) => {
    e.stopPropagation();
    agentContainer.classList.toggle('force-hide');
    btnPromptToggle.textContent = agentContainer.classList.contains('force-hide') ? "Show Prompt Bar" : "Hide Prompt Bar";
    settingsMenu.classList.remove('show');
  });

  btnBorderless.addEventListener('click', (e) => {
    e.stopPropagation();
    wrap.classList.toggle('borderless');
    btnBorderless.textContent = wrap.classList.contains('borderless') ? "Exit Borderless" : "Go Borderless";
    settingsMenu.classList.remove('show');
  });

  window.addEventListener('click', () => { settingsMenu.classList.remove('show'); });

  // UI Fade Engine
  let hudTimer;
  const huds = document.querySelectorAll('.aq-hud');
  
  function showHUD() {
    huds.forEach(h => h.classList.remove('hidden'));
    clearTimeout(hudTimer);
    
    // Lock visibility in place if active interaction vectors are in use
    if (document.activeElement === agentInput || settingsMenu.classList.contains('show')) return;
    
    hudTimer = setTimeout(() => {
      huds.forEach(h => h.classList.add('hidden'));
    }, 4000);
  }

  wrap.addEventListener('mousemove', showHUD);
  wrap.addEventListener('touchstart', showHUD, { passive: true });
  agentInput.addEventListener('focus', showHUD);
  agentInput.addEventListener('blur', () => { setTimeout(showHUD, 1000); });
  
  showHUD();
})();
</script>