*{ box-sizing: border-box; }
html, body{ height:100%; margin:0; }
body{ font-family:"Roboto Slab", serif; background:#000; }

.split{
  height: 100vh;
  display:flex;
  position:relative;
  overflow:hidden;
}

.half{
  flex: 1;
  position:relative;
  display:block;
  text-decoration:none;
  overflow:hidden;
}

.bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
}

.half .color{ opacity:0; }
.half .bw{
  opacity:1;
  filter: grayscale(1) contrast(1.05) brightness(.70);
}

.half::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 70%);
  opacity: .95;
  transition: opacity .35s ease;
  pointer-events:none;
}

.split::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width: 26vw;
  transform: translateX(-50%);
  pointer-events:none;
  z-index: 3;
}

.half:hover .color{ opacity:1; transform: scale(1.02); }
.half:hover .bw{ opacity:0; }
.half:hover::after{ opacity:.65; }

.split:hover .half{
  filter: brightness(.75);
  transition: filter .25s ease;
}
.split:hover .half:hover{
  filter: brightness(1);
}

.left:hover{ box-shadow: inset 0 0 0 9999px rgba(0,255,0,0.06); }
.right:hover{ box-shadow: inset 0 0 0 9999px rgba(0,140,255,0.06); }

.center-logo{
  position:absolute;
  left:50%;
  top:45%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events:none;
}

.center-logo img{
  width: min(440px, 240px);
  height: auto;
  display:block;
  filter: none !important;
  box-shadow: none !important;
  image-rendering: auto;
  -webkit-animation-name: logo;
  animation-name: logo;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@media (max-width: 900px){
  .split{
    flex-direction:column;
  }
}

@-webkit-keyframes logo {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes logo {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}