/* --- LOGO & HEADER STYLES --- */

.header-top {
  width: 100%;
  padding: calc(2vh + 20px - 120px) 0 calc(2vh - 20px) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2vh;
}

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

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

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

[data-theme="dark"] .logo,
[data-theme="blue"] .logo,
[data-theme="green"] .logo,
[data-theme="purple"] .logo,
[data-theme="orange"] .logo,
[data-theme="red"] .logo,
[data-theme="teal"] .logo,
[data-theme="brown"] .logo,
[data-theme="gray"] .logo {
  background-color: var(--lighter-primary-color);
  -webkit-mask-image: url('6d-300.png');
  mask-image: url('6d-300.png');
}

@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; }
}

.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 { animation: logoDiagonalShine 2.8s ease-out forwards; }
.logo.logo-reflect-right::after { animation: logoDiagonalShine 2.8s ease-out forwards; }
.logo.logo-reflect-left::after { animation: logoDiagonalShineReverse 2.8s ease-out forwards; }

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