/* TechFreel Custom Logo Styles */

/* Prevent flex from squeezing the logo */
.mxd-header__logo {
  flex-shrink: 0;
}

/* Logo images sizing - header (all pages) */
.mxd-logo__img {
  display: block;
  height: 60px !important;
  min-height: 60px;
  width: auto !important;
  max-width: 320px;
  object-fit: contain;
}
@media only screen and (min-width: 768px) {
  .mxd-logo__img {
    height: 80px !important;
    min-height: 80px;
    max-width: 420px;
  }
}
@media only screen and (min-width: 1200px) {
  .mxd-logo__img {
    height: 100px !important;
    min-height: 100px;
    max-width: 450px;
  }
}

/* Logo images sizing - menu */
.menu-logo__img {
  height: 50px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
}

/* Dark mode (default) - show white logo, hide black logo */
img.mxd-logo__img.logo-light,
img.menu-logo__img.logo-light { display: none !important; }

/* Light mode - show black logo, hide white logo */
:root[color-scheme="light"] img.mxd-logo__img.logo-dark,
:root[color-scheme="light"] img.menu-logo__img.logo-dark { display: none !important; }
:root[color-scheme="light"] img.mxd-logo__img.logo-light,
:root[color-scheme="light"] img.menu-logo__img.logo-light { display: block !important; }

/* Pixel/glitch hover animation */
.mxd-logo,
.menu-logo {
  overflow: hidden;
}

.mxd-logo__img,
.menu-logo__img {
  transition: filter 0.2s ease;
}

.mxd-logo:hover .mxd-logo__img,
.menu-logo:hover .menu-logo__img {
  animation: pixel-glitch 0.4s steps(4) forwards;
}

@keyframes pixel-glitch {
  0% {
    filter: blur(0) brightness(1);
    transform: translate(0, 0) scale(1);
  }
  15% {
    filter: blur(2px) brightness(1.3);
    transform: translate(-2px, 1px) scale(1.02);
  }
  30% {
    filter: blur(0) brightness(0.9);
    transform: translate(2px, -1px) scale(0.98);
  }
  45% {
    filter: blur(3px) brightness(1.2);
    transform: translate(-1px, -2px) scale(1.01);
  }
  60% {
    filter: blur(0) brightness(1.1);
    transform: translate(1px, 2px) scale(0.99);
  }
  75% {
    filter: blur(1px) brightness(1.15);
    transform: translate(-2px, 0) scale(1.01);
  }
  100% {
    filter: blur(0) brightness(1);
    transform: translate(0, 0) scale(1);
  }
}