.scroll-indicator
{
    position: absolute;
    right: 110px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    opacity: 1;
    animation: fadeInOut 4s ease-in-out infinite;
}

    .mouse {
      width: 26px;
      height: 42px;
      border: 2px solid rgba(255, 255, 255, 0.85);
      border-radius: 13px;
      position: relative;
      display: flex;
      justify-content: center;
      padding-top: 7px;
    }

    .wheel {
      width: 3px;
      height: 8px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 2px;
      animation: scrollWheel 1.8s ease-in-out infinite;
    }

    .arrows {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

    .arrow {
      width: 10px;
      height: 10px;
      border-right: 2px solid white;
      border-bottom: 2px solid white;
      transform: rotate(45deg);
      animation: arrowFade 1.8s ease-in-out infinite;
    }

    .arrow:nth-child(1) { opacity: 0.9; animation-delay: 0s; }
    .arrow:nth-child(2) { opacity: 0.6; animation-delay: 0.2s; }
    .arrow:nth-child(3) { opacity: 0.3; animation-delay: 0.4s; }

    .label {
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 10px;
      letter-spacing: 3px;
      color: rgba(255, 255, 255, 0.45);
      text-transform: uppercase;
    }

    @keyframes scrollWheel {
      0%   { transform: translateY(0);    opacity: 1;   }
      50%  { transform: translateY(10px); opacity: 0.2; }
      100% { transform: translateY(0);    opacity: 1;   }
    }

    @keyframes arrowFade {
      0%   { opacity: 0;   transform: rotate(45deg) translate(-3px, -3px); }
      50%  { opacity: 1;   transform: rotate(45deg) translate(0, 0);       }
      100% { opacity: 0;   transform: rotate(45deg) translate(3px, 3px);   }
    }

    @keyframes fadeInOut {
      0%, 100% { opacity: 0.4; }
      50%       { opacity: 1;   }
    }