body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #000000;
  }
  
  .logo-container {
    position: relative;
    display: inline-block;
    width: 512px; /* Adjust as needed */
    height: 512px; /* Adjust as needed */
    overflow: hidden;
  }
  
  .logo {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.shine1 {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.1) 100%);
    transform: rotate(0deg) translateX(-100%);
    pointer-events: none;
    animation: shine 3s infinite;
  }
@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.shine2 {
    position: absolute;
    top: 0;
    left: -100%; /* Start the shine effect off-screen */
    width: 150%; /* Ensure it covers the logo during animation */
    height: 100%;
    background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0.2) 100%
    );
    transform: skewX(-45deg); /* Creates the diagonal appearance */
    animation: glimmer 2s infinite; /* Adjust animation duration as needed */
  }

  @keyframes glimmer {
    0% {
      left: -150%; /* Start off-screen */
    }
    50% {
      left: 100%; /* Move fully across the logo */
    }
    100% {
      left: -150%; /* Return to the starting point */
    }
  }

  
.glitch
{
  position: relative;
  width: 100%;
  height: 100vh;
  background: url(https://images.unsplash.com/photo-1494959764136-6be9eb3c261e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80);
  background-size: cover;
}

.glitch:before
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://images.unsplash.com/photo-1494959764136-6be9eb3c261e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80);
  background-size: cover; /* contain for split effect */
  opacity: .5;
  mix-blend-mode: hard-light;
  animation: glitch2 10s linear infinite;
}

.glitch:hover:before
{
animation: glitch1 1s linear infinite;
}

@keyframes glitch1
{
0%
{
  background-position: 0 0;
  filter: hue-rotate(0deg);
}
10%
{
  background-position: 5px 0;
}
20%
{
  background-position: -5px 0;
}
30%
{
  background-position: 15px 0;
}
40%
{
  background-position: -5px 0;
}
50%
{
  background-position: -25px 0;
}
60%
{
  background-position: -50px 0;
}
70%
{
  background-position: 0 -20px;
}
80%
{
  background-position: -60px -20px;
}
81%
{
  background-position: 0 0;
}
100%
{
  background-position: 0 0;
  filter: hue-rotate(360deg);
}
}

@keyframes glitch2
{
0%
{
  background-position: 0 0;
  filter: hue-rotate(0deg);
}
10%
{
  background-position: 15px 0;
}
15%
{
  background-position: -15px 0;
}
20%
{
  filter: hue-rotate(360deg);
}
25%
{
  background-position: 0 0;
  filter: hue-rotate(0deg);
}
100%
{
  background-position: 0 0;
  filter: hue-rotate(0deg);
}
}