.header {
  background: url('../images/noise-dark.png') center / 20% var(--color-dark);
  color: var(--color-light);
  display: grid;
  height: calc(100vh - var(--nav-height));
  min-height: 44vw;
  position: relative;
}

.header__animation {
  align-content: end;
  display: grid;
  inset: 0;
  justify-content: center;
  padding-block: var(--space-xx-large);
  position: absolute;
  user-select: none;
  -webkit-user-select: none;
}

.header__svg {
  color: var(--color-pink);
  filter:
    drop-shadow(0 0 1.5em rgba(var(--rgb-magenta), 0.7))
    drop-shadow(0 0 2.5em rgba(var(--rgb-magenta), 0.4))
  ;
  height: 100%;
  position: absolute;
  width: 100%;
  will-change: transform;
}

.header__logo {
  color: var(--color-light);
  display: none;
  opacity: 0;
  transform: scale(0.8) translateY(0.625em) translateZ(0);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow)
  ;
  width: 23em;
  will-change: transform;
}

.header__logo svg {
  filter:
    drop-shadow(0 0 1.5em rgba(var(--rgb-magenta), 0.7))
    drop-shadow(0 0 2.5em rgba(var(--rgb-magenta), 0.4))
  ;
  height: auto;
  max-width: 100%;
  overflow: visible;
  width: 100%;
}

.header__content {
  display: flex;
  gap: var(--space-large);
  padding: var(--space-x-large) var(--space-large);
  position: relative;
}

.header__content ul {
  align-content: end;
  margin-block: -0.3875em;
}

.header__content ul:last-child {
  margin-left: auto;
}



.header--done .header__logo {
  opacity: 1;
  transform: none;
}



@media(min-width: 48em) {

  .header__content {
    display: none;
  }

  .header__logo {
    display: block;
  }

}