/* --- SITE LOGO & REFLECTIONS --- */

.logo-wrapper {
  position: relative;
  display: inline-block;
  width: 620px;
  height: 160px;
  line-height: 0;
}

.logo-shadow {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background-image: url('6db (4).png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.logo {
  position: relative;
  z-index: 1;
  width: 620px;
  height: 160px;
  background-color: var(--primary-color);
  -webkit-mask-image: url('6d-300b.png');
  mask-image: url('6d-300b.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  overflow: hidden;
}

/* Diagonal reflection/shine over logo shape */
.logo::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  opacity: 0;
  transform: translate(-150%, -150%) rotate(25deg);
}

.logo.logo-reflect-active::after,
.logo.logo-reflect-right::after {
  animation: logoDiagonalShine 2.8s ease-out forwards;
}

.logo.logo-reflect-left::after {
  animation: logoDiagonalShineReverse 2.8s ease-out forwards;
}

@keyframes logoDiagonalShine {
  0% { transform: translate(-150%, -150%) rotate(25deg); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translate(150%, 150%) rotate(25deg); opacity: 0; }
}

@keyframes logoDiagonalShineReverse {
  0% { transform: translate(150%, 150%) rotate(25deg); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translate(-150%, -150%) rotate(25deg); opacity: 0; }
}

@media (max-width: 768px) {
  .logo-wrapper { width: 200px; height: 75px; }
  .logo, .logo-shadow { width: 100%; height: 100%; }
}