/* 1. Micro Center Point */
      .hud-cursor-core {
        width: 4px;
        height: 4px;
        background: #fff;
        border-radius: 50%;
        position: fixed;
        pointer-events: none;
        z-index: 100000;
        transform: translate(-50%, -50%);
        box-shadow:
          0 0 8px #fff,
          0 0 15px #ffcc00;
      }

      /* 2. Tech Diamond Frame (Snappy & Responsive) */
      .hud-cursor-inner {
        width: 20px;
        height: 20px;
        border: 1.5px solid #d4af37;
        position: fixed;
        pointer-events: none;
        z-index: 99999;
        /* Rotates into a diamond shape */
        transform: translate(-50%, -50%) rotate(45deg);
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
        transition:
          transform 0.1s ease-out,
          width 0.2s,
          height 0.2s,
          border-color 0.2s;
      }

      /* 3. Outer Tech Bracket (Lagging & Spinning) */
      .hud-cursor-outer {
        width: 44px;
        height: 44px;
        border: 2px solid transparent;
        /* Creates a high-tech split crosshair effect using borders */
        border-top-color: #ffcc00;
        border-bottom-color: #ffcc00;
        border-radius: 50%;
        position: fixed;
        pointer-events: none;
        z-index: 99998;
        transform: translate(-50%, -50%);
        filter: drop-shadow(0 0 8px rgba(255, 204, 0, 0.6));
      }

      /* --- Build & Guild Logo Constant Animation --- */
      .logo-container {
        position: relative;
        padding-bottom: 4px;
        display: inline-block;
      }

      .logo-char {
        display: inline-block;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .logo-fraunces {
        font-family: "Fraunces", serif;
        font-weight: 900;
      }

      /* Continuous shimmer animation - mimics hover effect */
      .logo-shimmer {
        position: relative;
        overflow: hidden;
      }

      .logo-shimmer::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(200, 169, 106, 0.4),
          transparent
        );
        animation: logo-shimmer 4s linear infinite;
        pointer-events: none;
      }

      @keyframes logo-shimmer {
        0% {
          left: -100%;
        }
        100% {
          left: 100%;
        }
      }

      /* Continuous glow pulse for the ampersand */
      .logo-amp.constant-glow {
        animation: amp-pulse 2.5s ease-in-out infinite;
      }

      @keyframes amp-pulse {
        0%, 100% {
          opacity: 0.9;
          text-shadow: 0 0 5px rgba(200, 169, 106, 0.3);
        }
        50% {
          opacity: 1;
          text-shadow: 0 0 20px rgba(200, 169, 106, 0.8);
          transform: scale(1.1);
        }
      }

      /* Continuous subtle float animation on the entire logo */
      .logo-container.constant-float {
        animation: logo-float 6s ease-in-out infinite;
      }

      @keyframes logo-float {
        0%, 100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-3px);
        }
      }

      /* Continuous color shimmer on individual characters - only applies when visible */
      .logo-loaded .logo-char.constant-shimmer {
        animation: char-shimmer 3s ease-in-out infinite;
      }

      @keyframes char-shimmer {
        0%, 100% {
          color: inherit;
          text-shadow: 0 0 0 transparent;
        }
        50% {
          color: #C8A96A;
          text-shadow: 0 0 10px rgba(200, 169, 106, 0.5);
        }
      }

      /* Ensure logo is visible when using constant animation */
      .logo-container.constant-float .logo-char,
      .logo-container.logo-shimmer .logo-char {
        opacity: 1 !important;
        transform: translateY(0) !important;
      }