:root {
  --toten-logo-width: 250px;
}

.site-header .brand,
header .logo,
.admin-header .erp-brand .logo,
.auth-logo,
.footer-brand {
  animation: toten-logo-enter 700ms cubic-bezier(.16, 1, .3, 1) both;
  display: block;
  flex: 0 0 var(--toten-logo-width);
  max-width: var(--toten-logo-width);
  width: var(--toten-logo-width);
}

.site-header .brand > img,
header .logo > .logo-mark,
.admin-header .erp-brand .logo > .logo-mark,
.auth-logo > img,
.footer-brand > img {
  animation: toten-logo-breathe 5.5s ease-in-out 900ms infinite;
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
  transform-origin: center;
  filter: drop-shadow(0 7px 14px rgba(0, 111, 95, .1));
  transition: filter 260ms ease, transform 360ms cubic-bezier(.16, 1, .3, 1);
}

.site-header .brand:hover > img,
.site-header .brand:focus-visible > img,
header .logo:hover > .logo-mark,
header .logo:focus-visible > .logo-mark,
.admin-header .erp-brand .logo:hover > .logo-mark,
.admin-header .erp-brand .logo:focus-visible > .logo-mark,
.auth-logo:hover > img,
.auth-logo:focus-visible > img,
.footer-brand:hover > img,
.footer-brand:focus-visible > img {
  animation: toten-logo-interact 650ms cubic-bezier(.16, 1, .3, 1) both;
  filter: drop-shadow(0 12px 20px rgba(0, 111, 95, .2));
}

.auth-logo > img {
  margin-bottom: 2.4rem;
}

@keyframes toten-logo-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toten-logo-breathe {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes toten-logo-interact {
  0% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(-4px);
  }

  75% {
    transform: translateY(-1px);
  }

  100% {
    transform: translateY(-2px);
  }
}

@media (max-width: 700px) {
  :root {
    --toten-logo-width: 190px;
  }

  .site-header .brand,
  header .logo,
  .admin-header .erp-brand .logo,
  .auth-logo,
  .footer-brand {
    animation: none !important;
    display: block;
    flex: 0 0 var(--toten-logo-width);
    max-width: var(--toten-logo-width);
    width: var(--toten-logo-width);
    transform: none !important;
    filter: none !important;
  }

  .site-header .brand > img,
  header .logo > .logo-mark,
  .admin-header .erp-brand .logo > .logo-mark,
  .auth-logo > img,
  .footer-brand > img {
    animation: none !important;
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    backface-visibility: hidden;
  }

  .site-header .brand:hover > img,
  .site-header .brand:focus-visible > img,
  header .logo:hover > .logo-mark,
  header .logo:focus-visible > .logo-mark,
  .admin-header .erp-brand .logo:hover > .logo-mark,
  .admin-header .erp-brand .logo:focus-visible > .logo-mark,
  .auth-logo:hover > img,
  .auth-logo:focus-visible > img,
  .footer-brand:hover > img,
  .footer-brand:focus-visible > img {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  .admin-header .erp-product {
    display: none;
  }
}

@media (max-width: 390px) {
  :root {
    --toten-logo-width: 145px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .brand,
  header .logo,
  .admin-header .erp-brand .logo,
  .auth-logo,
  .footer-brand,
  .site-header .brand > img,
  header .logo > .logo-mark,
  .admin-header .erp-brand .logo > .logo-mark,
  .auth-logo > img,
  .footer-brand > img {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
  }
}